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

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

{{--
    Files theme tool page. The tool spans the full width with no ad beside or
    inside it (no accidental clicks near the upload/download controls). Ads
    only appear next to and after the explanatory article below.
--}}
@section('content')
    <header class="container-site max-w-5xl pt-8 text-center">
        @include($site->themeView('partials.breadcrumbs'))
        <h1 class="mt-4 text-3xl font-black tracking-tight text-balance md:text-5xl">{{ $tool->name }}</h1>
        @if ($tool->summary)<p class="mx-auto mt-3 max-w-2xl text-lg text-slate-600">{{ $tool->summary }}</p>@endif
    </header>

    <section class="container-site mt-8 max-w-5xl" aria-label="{{ __('site.calculator') }}">
        <div class="fz-panel rounded-3xl bg-white p-4 shadow-xl ring-1 shadow-brand/5 ring-black/[0.06] sm:p-8">
            @include($tool->view())
            <noscript><p class="mt-4 text-sm text-red-700">{{ __('site.enable_js_tool') }}</p></noscript>
        </div>
    </section>

    <div class="container-site mt-14 grid max-w-6xl gap-10 lg:grid-cols-[minmax(0,1fr)_300px]">
        <article class="min-w-0">
            @if ($html)<div class="prose-site">{!! $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') }}
        </article>

        <aside class="space-y-8">
            <div class="space-y-8 lg:sticky lg:top-24">
                @if ($others->isNotEmpty())
                    <nav aria-labelledby="other-tools">
                        <h2 id="other-tools" class="eyebrow">{{ __('site.other_tools') }}</h2>
                        <ul class="mt-3 space-y-1">
                            @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="grid size-8 place-items-center rounded-lg bg-brand/10 text-brand"><x-site.icon :name="$other->icon()" class="size-4" /></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>
                    </nav>
                @endif
                {{ $ads->slot('sidebar') }}
            </div>
        </aside>
    </div>
@endsection