{{-- The page a recipient opens. No anchored components (menus, tooltips) on it: it has to work on
     iOS before Safari 18.4, which cannot position them. --}}

<div class="mx-auto w-full max-w-lg">
    <div class="mb-8 text-center">
        @if ($siteLogo)
            <img src="{{ Storage::disk('public')->url($siteLogo) }}" alt="{{ $siteTitle ?: config('app.name', 'SealShare') }}" class="mx-auto mb-4 h-20 w-auto" />
        @endif

        <h1 class="type-headline-lg">{{ $siteTitle ?: config('app.name', 'SealShare') }}</h1>

        <p class="mt-2 type-body-lg text-on-surface-variant">{{ $siteDescription ?: __('Share your files safely and securely') }}</p>
    </div>

    @if (! $authenticated)
        <form wire:submit="verifyPassword">
            <x-card :title="__('Password Required')" :subtitle="__('Enter the password to access these files')" variant="outlined">
                <x-password
                    wire:model="password"
                    :label="__('Password')"
                    required
                    autocomplete="off"
                    :placeholder="__('Enter share password')"
                />

                <x-slot:actions>
                    <x-button type="submit" :label="__('Unlock')" variant="filled" icon="lock_open" spinner="verifyPassword" class="w-full" />
                </x-slot:actions>
            </x-card>
        </form>
    @else
        <x-card :title="__('Shared Files')" variant="outlined">
            <x-list :label="__('Shared Files')">
                @foreach ($share->files as $file)
                    <x-list-item
                        :title="$file->relative_path ?: $file->original_name"
                        :description="Number::fileSize($file->file_size)"
                        icon="description"
                        wire:key="file-{{ $file->id }}"
                    >
                        <x-slot:end>
                            <x-button icon="download" :link="route('share.download.file', [$share, $file])" no-wire-navigate :aria-label="__('Download :name', ['name' => $file->original_name])" />
                        </x-slot:end>
                    </x-list-item>
                @endforeach
            </x-list>

            @if ($share->expires_at)
                <p class="mt-2 type-body-sm text-on-surface-variant">
                    {{ __('Expires') }}: {{ $share->expires_at->diffForHumans() }}
                </p>
            @endif

            <x-slot:actions>
                @if ($share->files->count() > 1)
                    <x-button :label="__('Download All as ZIP')" icon="download" variant="filled" :link="route('share.download.all', $share)" no-wire-navigate class="w-full" />
                @else
                    <x-button :label="__('Download')" icon="download" variant="filled" :link="route('share.download.file', [$share, $share->files->first()])" no-wire-navigate class="w-full" />
                @endif
            </x-slot:actions>
        </x-card>
    @endif
</div>