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

{{-- Hub site: directory of every site of the network, filterable by topic. --}}
@section('content')
    <section class="relative overflow-hidden bg-ink text-white">
        <div class="pointer-events-none absolute inset-0 opacity-30 [background:radial-gradient(60rem_30rem_at_80%_-10%,var(--brand),transparent),radial-gradient(40rem_25rem_at_0%_110%,var(--accent),transparent)]" aria-hidden="true"></div>
        <div class="container-site relative py-16 md:py-24">
            <p class="text-sm font-semibold text-white/70">{{ trans_choice('network.sites_count', $total, ['count' => $total]) }}</p>
            <h1 class="mt-3 max-w-3xl text-4xl font-black tracking-tight text-balance md:text-6xl">{{ $site->localized('home_heading') ?: __('network.directory_heading') }}</h1>
            <p class="mt-4 max-w-2xl text-lg text-white/80">{{ $site->localized('tagline') ?: __('network.directory_intro') }}</p>
            <label class="relative mt-8 block max-w-xl">
                <span class="sr-only">{{ __('site.search') }}</span>
                <x-site.icon name="search" class="pointer-events-none absolute start-4 top-1/2 size-5 -translate-y-1/2 text-slate-400" />
                <input type="search" data-filter="[data-site-card]" placeholder="{{ __('site.search_placeholder') }}" class="w-full rounded-2xl border-0 bg-white py-4 ps-12 pe-4 text-ink shadow-xl focus:ring-4 focus:ring-white/30">
            </label>
        </div>
    </section>

    <div class="container-site py-10">
        <nav aria-label="{{ __('network.directory_title') }}" class="flex flex-wrap gap-2">
            <a href="{{ lpath('/') }}" @class(['chip', 'border-ink bg-ink text-white hover:text-white' => ! $topic])>{{ __('network.filter_all') }}</a>
            @foreach ($topics as $key => $icon)
                <a href="{{ lpath('/') }}?theme={{ $key }}" rel="nofollow" @class(['chip', 'border-ink bg-ink text-white hover:text-white' => $topic === $key])><x-site.icon :name="$icon" class="size-4" /> {{ __('network.topics.'.$key) }}</a>
            @endforeach
        </nav>

        <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($sites as $other)
                <div data-site-card data-search="{{ mb_strtolower($other->name.' '.\App\Services\Network::pitch($other).' '.collect(\App\Services\Network::topics($other))->map(fn ($t) => __('network.topics.'.$t))->implode(' ')) }}">
                    @include($site->themeView('network.site-card'))
                </div>
            @endforeach
        </div>

        @if ($site->localized('description'))
            <section class="tint mt-16 rounded-3xl p-8 md:p-10"><p class="max-w-3xl text-slate-700">{{ $site->localized('description') }}</p></section>
        @endif
    </div>
@endsection