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

@php($ads = app(\App\Services\AdManager::class))

@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'))
            <div class="mt-5 flex items-start gap-4">
                <span class="icon-tile hidden size-14 sm:grid"><x-site.icon :name="$tool->icon()" class="size-7" /></span>
                <div>
                    <h1 class="text-3xl font-black tracking-tight md:text-4xl">{{ $tool->name }}</h1>
                    @if ($tool->summary)<p class="mt-2 max-w-3xl text-lg text-slate-600">{{ $tool->summary }}</p>@endif
                </div>
            </div>
        </div>
    </header>

    <div class="container-site grid gap-10 py-8 lg:grid-cols-[minmax(0,1fr)_300px]">
        <div class="min-w-0">
            {{-- The interactive area never contains or touches an ad unit. --}}
            <section class="card p-5 sm:p-8" aria-label="{{ $tool->isGame() ? __('site.game') : __('site.calculator') }}">
                @include($tool->view())
                <noscript><p class="mt-4 text-sm text-red-700">{{ $tool->isGame() ? __('site.enable_js_game') : __('site.enable_js_tool') }}</p></noscript>
            </section>

            @if ($html)
                <div class="prose-site mt-14">{!! $html !!}</div>
            @endif

            @include($site->themeView('partials.faq'), ['faq' => $tool->faq])

            @if ($guides->isNotEmpty())
                <section class="mt-14" aria-labelledby="guides-title">
                    <h2 id="guides-title" class="section-title">{{ __('site.go_further') }}</h2>
                    <div class="mt-6 grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach ($guides as $post)
                            @include($site->themeView('partials.post-card'))
                        @endforeach
                    </div>
                </section>
            @endif

            @if ($suggestion ?? null)
                @include($site->themeView('partials.network-suggestion'), ['other' => $suggestion])
            @endif

            {{ $ads->slot('after_content') }}
        </div>

        <aside class="space-y-8">
            <div class="space-y-8 lg:sticky lg:top-24">
                @if ($others->isNotEmpty())
                    <section>
                        <h2 class="eyebrow">{{ $tool->isGame() ? __('site.other_games') : __('site.other_tools') }}</h2>
                        <ul class="mt-3 space-y-2">
                            @foreach ($others as $other)
                                <li>
                                    <a href="{{ $other->path() }}" class="group flex items-center gap-3 rounded-xl p-2 hover:bg-white">
                                        <span class="icon-tile size-9"><x-site.icon :name="$other->icon()" class="size-5" /></span>
                                        <span class="text-sm font-semibold group-hover:text-brand">{{ $other->name }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ $indexPath }}" class="mt-3 inline-block text-sm font-semibold text-brand hover:underline">{{ __('site.see_all') }}</a>
                    </section>
                @endif
                {{ $ads->slot('sidebar') }}
            </div>
        </aside>
    </div>
@endsection