@props([
    // slots
    'append' => null,
])

<div id="sharp-app" class="p-4 h-screen flex justify-center items-center" style="background: linear-gradient(
      45deg,
      hsl(var(--primary-h), var(--primary-s), var(--accent-bg-l)),
      hsl(var(--primary-h), var(--primary-s), var(--primary-l)) 80%
)">
    <div class="w-full max-w-sm">
        @if($logoUrl = app(\Code16\Sharp\Utils\SharpTheme::class)->loginLogoUrl())
            <div class="flex justify-center mb-3">
                <img src="{{ url($logoUrl) }}" alt="{{ config("sharp.name") }}" width="300" class="w-auto h-auto" style="max-height: 100px;max-width: 200px">
            </div>
        @else
            <div class="flex justify-center logo mb-4">
                <svg width="641.06" height="97.344" viewBox="0 0 641.06 97.344" xmlns="http://www.w3.org/2000/svg"><path d="m161.25 27.648c-1.584-8.208-7.344-12.24-17.28-12.24-4.896 0-8.64 1.008-11.376 2.88-2.736 2.016-4.176 4.464-4.176 7.2s0.864 4.896 2.736 6.48c1.728 1.728 4.464 3.168 8.208 4.464l20.304 7.92c6.912 2.736 12.24 6.048 15.984 10.08 3.744 4.176 5.616 9.216 5.616 15.408 0 8.496-3.168 15.12-9.504 20.016-6.336 5.04-15.408 7.488-27.072 7.488-10.368 0-18.72-2.592-25.2-7.632-7.2-5.616-10.944-13.392-11.376-23.616h16.848c0 7.632 4.032 12.528 11.952 14.544 2.448 0.72 5.616 1.008 9.504 1.008s7.632-1.008 10.944-3.024c3.312-1.872 5.04-4.608 5.04-7.92s-0.864-5.76-2.736-7.632c-1.872-1.728-4.752-3.312-8.928-4.896l-18.576-7.344c-7.2-2.736-12.672-6.048-16.56-9.792s-5.76-8.928-5.76-15.552c0-7.776 3.024-13.968 9.072-18.432 6.192-4.752 14.544-7.056 25.056-7.056s18.576 2.448 24.336 7.2c5.616 4.896 8.928 11.664 9.792 20.448z"/><path d="m242.61 1.872v39.024h40.752v-39.024h16.992v93.456h-16.992v-39.6h-40.752v39.6h-16.992v-93.456z"/><path d="m370.48 1.872h21.312l30.672 93.456h-18l-6.48-20.16h-34.704l-6.624 20.16h-18zm-2.88 60.48h26.208l-12.96-40.176z"/><path d="m530.04 30.528c0 6.624-1.872 12.24-5.616 16.992s-9.072 7.92-16.128 9.792l25.056 38.016h-22.176l-20.592-36.432h-12.96v36.432h-16.992v-93.456h34.56c11.088 0 19.584 2.592 25.776 7.92 6.048 5.04 9.072 11.952 9.072 20.736zm-36.432 16.992c6.192 0 10.944-1.44 14.112-4.32 3.168-2.736 4.752-6.48 4.752-11.232 0-4.608-1.44-8.352-4.32-11.232-2.88-2.736-7.2-4.176-12.96-4.176h-17.568v30.96z"/><path d="m607.51 1.872c10.512 0 18.864 2.592 24.768 7.632 5.904 5.184 8.784 12.528 8.784 22.032 0 9.648-2.88 16.992-8.784 22.032-5.904 5.184-14.256 7.776-24.768 7.776h-15.84v33.984h-17.136v-93.456zm0 44.64c5.328 0 9.216-1.44 11.952-4.176s4.032-6.336 4.032-10.8c0-4.32-1.296-7.92-4.032-10.8-2.736-2.736-6.624-4.176-11.952-4.176h-15.84v29.952z"/><path d="m36.49 43.104c-3.4256 0-6.3241-1.2648-8.8011-3.7945-2.477-2.477-3.6891-5.4809-3.6891-8.9065 0-3.531 1.2121-6.5349 3.6891-9.0119s5.4809-3.6891 9.0119-3.6891 6.5349 1.2121 8.9592 3.7418c2.477 2.477 3.7418 5.4809 3.7418 9.0119s-1.2648 6.4822-3.7945 8.9592c-2.477 2.4242-5.5336 3.6891-9.1173 3.6891z"/><path d="m12.49 81.104c-3.4256 0-6.3241-1.2648-8.8011-3.7945-2.477-2.477-3.6891-5.4809-3.6891-8.9065 0-3.531 1.2121-6.5349 3.6891-9.0119s5.4809-3.6891 9.0119-3.6891 6.5349 1.2121 8.9592 3.7418c2.477 2.477 3.7418 5.4809 3.7418 9.0119s-1.2648 6.4822-3.7945 8.9592c-2.477 2.4242-5.5336 3.6891-9.1173 3.6891z"/><path d="m59.49 81.104c-3.4256 0-6.3241-1.2648-8.8011-3.7945-2.477-2.477-3.6891-5.4809-3.6891-8.9065 0-3.531 1.2121-6.5349 3.6891-9.0119s5.4809-3.6891 9.0119-3.6891 6.5349 1.2121 8.9592 3.7418c2.477 2.477 3.7418 5.4809 3.7418 9.0119s-1.2648 6.4822-3.7945 8.9592c-2.477 2.4242-5.5336 3.6891-9.1173 3.6891z"/></svg>
            </div>
        @endif

        @if ($errors->any())
            <div role="alert" class="alert alert-danger">
                {{ $errors->first() }}
            </div>
        @endif

        <div class="bg-white rounded p-4 border-0 mb-3">
            @if(config("sharp.name", 'Sharp') !== 'Sharp')
                <div class="card-header bg-transparent border-0 pb-0 pt-4">
                    <h1 class="text-center card-title mb-0 fs-4">{{ config("sharp.name") }}</h1>
                </div>
            @endif

            <div class="card-body p-5 py-4">
                {{ $slot }}
            </div>
        </div>

        {{ $append }}

        <p class="text-center mt-2 text-white login__powered">
            <span>powered by</span>
            <a class="text-reset" href="https://sharp.code16.fr/docs/">Sharp {{sharp()->version()}}</a>
        </p>
    </div>
</div>
