{{-- 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. --}}

<x-pane class="download-column">
    <x-stack gap="space400">
        <x-stack align="center" gap="space200">
            @if ($siteLogo)
                <img src="{{ Storage::disk('public')->url($siteLogo) }}" alt="{{ $siteTitle ?: config('app.name', 'SealShare') }}" class="download-site-logo" />
            @endif

            <x-stack align="center" gap="space100">
                <h1 class="md-type-headline-lg md-text-center">{{ $siteTitle ?: config('app.name', 'SealShare') }}</h1>
                <p class="md-type-body-lg md-ink-variant md-text-center">{{ $siteDescription ?: __('Share your files safely and securely') }}</p>
            </x-stack>
        </x-stack>

        {{-- Each state is one card under the page's h1: the card holds everything the recipient acts
             on, and it is the shape SealShare has always shown them. --}}
        @if (! $authenticated)
            <x-card :title="__('Password Required')" :subtitle="__('Enter the password to access these files')" heading="h2" variant="outlined">
                <x-form wire:submit="verifyPassword">
                    <x-password
                        full
                        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" />
                    </x-slot:actions>
                </x-form>
            </x-card>
        @else
            <x-card :title="__('Shared Files')" heading="h2" variant="outlined">
                <x-stack gap="space200">
                    <x-stack gap="space100">
                        <x-list :label="__('Shared Files')">
                            @foreach ($share->files as $file)
                                <x-list-item
                                    :title="$file->relative_path ?: $file->original_name"
                                    icon="description"
                                    wire:key="file-{{ $file->id }}"
                                >
                                    <x-slot:description><span class="md-tabular">{{ Number::fileSize($file->file_size) }}</span></x-slot:description>
                                    <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="md-type-body-sm md-ink-variant">{{ __('Expires') }}: {{ $share->expires_at->diffForHumans() }}</p>
                        @endif
                    </x-stack>

                    <x-row justify="end">
                        @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 />
                        @else
                            <x-button :label="__('Download')" icon="download" variant="filled" :link="route('share.download.file', [$share, $share->files->first()])" no-wire-navigate />
                        @endif
                    </x-row>
                </x-stack>
            </x-card>
        @endif
    </x-stack>
</x-pane>