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

@section('content')
    <header class="border-b border-black/[0.06] bg-white">
        <div class="container-site py-8 md:py-10">
            @include($site->themeView('partials.breadcrumbs'))
            <h1 class="mt-5 text-3xl font-black tracking-tight md:text-4xl">{{ __('network.our_sites') }}</h1>
            <p class="mt-2 max-w-2xl text-lg text-slate-600">{{ __('network.intro', ['site' => $site->name]) }}</p>
        </div>
    </header>

    <div class="container-site py-10">
        @if ($related->isNotEmpty())
            <section aria-labelledby="related-title">
                <h2 id="related-title" class="section-title">{{ __('network.related_title') }}</h2>
                <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($related as $other)
                        @include($site->themeView('network.site-card'))
                    @endforeach
                </div>
            </section>
        @endif

        @if ($others->isNotEmpty())
            <section class="mt-14" aria-labelledby="others-title">
                <h2 id="others-title" class="section-title">{{ __('network.others_title') }}</h2>
                <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($others as $other)
                        @include($site->themeView('network.site-card'))
                    @endforeach
                </div>
            </section>
        @endif

        @if ($hub && ! $hub->is($site))
            <p class="mt-12 text-center"><a href="{{ app(\App\Services\Network::class)->url($hub) }}" class="btn-ghost">{{ __('network.hub_link') }} <x-site.icon name="arrow" class="size-4" /></a></p>
        @endif
    </div>
@endsection