@props([
    'title',
    'subtitle' => null,
])

<div class="card shadow-sm border-0" style="max-width: 420px; width: 100%;">
    <div class="card-body p-4 p-md-5">
        <div class="text-center mb-4">
            <x-ui.layout.logo context="auth" class="mb-3 mx-auto d-block" />
            <h4 class="mb-1 fw-semibold">{{ $title }}</h4>
            @if ($subtitle)
                <small class="text-muted">{{ $subtitle }}</small>
            @endif
        </div>

        <x-ui.layout.flash />

        {{ $slot }}
    </div>
</div>
