@extends($site->themeView('layout'))

{{-- Files theme: all tools, or one category (with its introduction). --}}
@section('content')
    @php($groups = isset($group) ? [$group => $tools] : \App\Support\FileTools::groups($site, $tools))
    <header class="container-site max-w-6xl pt-8">
        @include($site->themeView('partials.breadcrumbs'))
        <h1 class="mt-4 text-3xl font-black tracking-tight md:text-4xl">{{ $title }}</h1>
        @isset($group)<p class="mt-2 max-w-3xl text-lg text-slate-600">{{ __('files.groups.'.$group.'.description') }}</p>@endisset
        <label class="relative mt-6 block max-w-md">
            <span class="sr-only">{{ __('files.search_tools') }}</span>
            <x-site.icon name="search" class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
            <input type="search" data-filter="[data-tile]" placeholder="{{ __('files.search_tools') }}" class="field py-2.5 ps-9 text-sm">
        </label>
    </header>
    <div class="container-site max-w-6xl py-6">
        @foreach ($groups as $key => $list)
            <section class="mt-6" aria-labelledby="g-{{ $key }}">
                @unless (isset($group))<h2 id="g-{{ $key }}" class="text-sm font-bold tracking-wider text-slate-500 uppercase"><a href="{{ lpath('/'.seg('tools').'/'.seg('category').'/'.$key) }}" class="hover:text-brand">{{ __('files.groups.'.$key.'.name') }}</a></h2>@else<h2 id="g-{{ $key }}" class="sr-only">{{ $title }}</h2>@endunless
                <ul class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($list as $tool)
                        <li data-tile data-search="{{ mb_strtolower($tool->name.' '.$tool->summary) }}">
                            <a href="{{ $tool->path() }}" class="group flex h-full gap-3 rounded-2xl border border-black/[0.06] bg-white p-4 transition hover:border-brand/40 hover:shadow-lg">
                                <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-brand/10 text-brand"><x-site.icon :name="$tool->icon()" class="size-5" /></span>
                                <span class="min-w-0"><span class="block font-semibold">{{ $tool->name }}</span>@if ($tool->summary)<span class="mt-0.5 line-clamp-2 block text-xs text-slate-500">{{ $tool->summary }}</span>@endif</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </section>
        @endforeach
    </div>
@endsection