@extends('layouts.public')

@section('title', __('Downloads & Resources'))
@section('meta_description', __('Company profile, project reports, policies, circulars and tender documents available for download.'))

@section('content')
    <x-page-hero :eyebrow="__('Resource centre')"
                 :title="__('Downloads & Resources')"
                 :subtitle="__('Company profile, reports, policies, circulars and tender documents.')"
                 :breadcrumbs="[__('Downloads') => null]" />

    <section class="section">
        <div class="container-page grid gap-12 lg:grid-cols-12">

            <aside class="lg:col-span-3">
                <div class="lg:sticky lg:top-28">
                    <p class="meta-label mb-4">{{ __('Categories') }}</p>

                    <ul class="space-y-1">
                        <li>
                            <a href="{{ route('downloads.index') }}"
                               @class([
                                   'block rounded-lg px-3.5 py-2.5 text-sm transition',
                                   'bg-primary text-text' => blank($activeCategory),
                                   'text-text-secondary hover:bg-surface-muted' => filled($activeCategory),
                               ])>{{ __('All resources') }}</a>
                        </li>

                        @foreach ($categories as $category)
                            <li>
                                <a href="{{ route('downloads.index', ['category' => $category->slug]) }}"
                                   @class([
                                       'block rounded-lg px-3.5 py-2.5 text-sm transition',
                                       'bg-primary text-text' => $activeCategory === $category->slug,
                                       'text-text-secondary hover:bg-surface-muted' => $activeCategory !== $category->slug,
                                   ])>{{ $category->name }}</a>
                            </li>
                        @endforeach
                    </ul>

                    <form method="GET" class="mt-8">
                        @if ($activeCategory)
                            <input type="hidden" name="category" value="{{ $activeCategory }}">
                        @endif

                        <label for="download-search" class="meta-label mb-3 block">{{ __('Search') }}</label>
                        <div class="relative">
                            <x-icon name="search" class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
                            <input id="download-search" type="search" name="q" value="{{ request('q') }}"
                                   class="form-input pl-10" placeholder="{{ __('File name…') }}">
                        </div>
                    </form>
                </div>
            </aside>

            <div class="lg:col-span-9">
                @if ($downloads->isEmpty())
                    <x-empty-state icon="folder"
                                   :title="__('No files in this category yet')"
                                   :message="__('Documents published by the team will appear here.')" />
                @else
                    <ul class="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-surface"
                        data-reveal-group>
                        @foreach ($downloads as $download)
                            <li class="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between sm:px-6"
                                data-reveal-child>
                                <div class="flex min-w-0 items-start gap-4">
                                    <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary">
                                        <x-icon :name="$download->icon()" class="size-5" />
                                    </span>

                                    <div class="min-w-0">
                                        <h2 class="font-display text-base font-semibold text-text">{{ $download->title }}</h2>

                                        @if ($download->description)
                                            <p class="mt-1 line-clamp-2 text-sm text-text-secondary">{{ $download->description }}</p>
                                        @endif

                                        <p class="meta-label mt-2 flex flex-wrap items-center gap-x-4 gap-y-1">
                                            @if ($download->category)
                                                <span>{{ $download->category->name }}</span>
                                            @endif
                                            <span>{{ Str::upper((string) $download->file_type) }}</span>
                                            <span>{{ $download->sizeLabel() }}</span>
                                            @if ($download->published_at)
                                                <span>{{ $download->published_at->format('d M Y') }}</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <x-button variant="outline" :href="route('downloads.file', $download)"
                                          class="shrink-0 self-start sm:self-center">
                                    <x-icon name="download" class="size-4" /> {{ __('Download') }}
                                </x-button>
                            </li>
                        @endforeach
                    </ul>

                    @if ($downloads->hasPages())
                        <div class="mt-10">{{ $downloads->links() }}</div>
                    @endif
                @endif
            </div>
        </div>
    </section>
@endsection