@php
    $tenantId = $tenantId ?? (tenant() ? tenant('id') : null);
    $settings = $tenantSiteSettings ?? null;
    $siteName = $siteName ?? ($settings?->site_name ?? 'qpost');
@endphp

@extends('tenant.layouts.base')

@section('body-class', 'min-h-screen bg-base c-main scope-tenant theme-default')

@section('body')
    @php
        $homeUrl = tenant_url() . '/';
    @endphp

    <div class="min-h-screen px-4 py-8 md:px-6 md:py-10">
        <div class="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-xl items-center">
            <x-ui.card padded class="w-full space-y-5 border border-muted bg-card shadow-sm">
                <div class="flex flex-col items-center gap-4">
                    <a href="{{ $homeUrl }}" class="inline-flex items-center justify-center">
                        @if ($settings?->logo_path)
                            <img
                                src="{{ tenant_file_url($settings->logo_path) }}"
                                alt="{{ $siteName }}"
                                class="block h-14 w-auto max-w-[12rem] object-contain"
                            >
                        @else
                            <div class="grid h-14 w-14 place-items-center rounded-full bg-primary-soft text-lg font-extrabold tracking-[-0.05em] c-primary">
                                {{ mb_substr($siteName, 0, 1) }}
                            </div>
                        @endif
                    </a>

                    <div class="space-y-1 text-center">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] c-primary">
                            login
                        </div>
                        <h1 class="m-0 text-[clamp(1.8rem,3vw,2.5rem)] font-extrabold tracking-[-0.055em] c-main">
                            {{ $title ?? 'qpost' }}
                        </h1>

                        @if (! empty($panelCopy))
                            <p class="m-0 text-sm leading-6 c-muted">{{ $panelCopy }}</p>
                        @endif
                    </div>
                </div>

                <div>
                    {{ $slot }}
                </div>
            </x-ui.card>
        </div>
    </div>
@endsection