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

{{-- Toolbox theme: tool index with the same instant filter as the home page. --}}
@section('content')
    <header class="border-b border-black/[0.06] bg-white">
        <div class="container-site max-w-7xl py-8">
            @include($site->themeView('partials.breadcrumbs'))
            <h1 class="mt-4 text-3xl font-black tracking-tight md:text-4xl">{{ $title }}</h1>
            <label class="relative mt-6 block max-w-xl">
                <span class="sr-only">{{ __('theme.filter_tools') }}</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-tile]" placeholder="{{ __('theme.filter_tools') }}" class="field py-3 ps-12" autocomplete="off">
            </label>
        </div>
    </header>
    <div class="container-site max-w-7xl py-8">
        <ul class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($tools as $tool)
                <li data-tile data-search="{{ mb_strtolower($tool->name.' '.$tool->summary) }}">@include($site->themeView('partials.tool-card'))</li>
            @endforeach
        </ul>
    </div>
@endsection