@extends('front.layouts.app')

@section('content')
    <div class="container-lg text-lg-center pt-3">
        @include('front.partials.breadcrumbs')
        <h1 class="display-5 text-body-emphasis text-center font-family-zilla-slab mb-4">
            @if (!is_null($category))
                Discover <span class="bg-highlighter-yellow fw-bold px-2">{{ $category->name }} AI Tools</span> Today
            @else
                Discover over <span class="bg-highlighter-yellow fw-bold px-2">{{ $tools_count }} AI Tools</span> Today
            @endif
        </h1>
    </div>

    <div class="container-lg pb-5">

        <div class="accordion mb-3 sticky-top shadow rounded-2" style="top:1em;" id="accordionCategory">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseCategory" aria-controls="collapseCategory">
                        <span class="h5 fw-bold mb-0">Filter by Category ({{ $parent_categories->count() }})</span>
                    </button>
                </h2>
                <div id="collapseCategory" class="accordion-collapse collapse" data-bs-parent="#accordionCategory">
                    <div class="accordion-body">
                        @foreach ($parent_categories as $parent_category)
                            <h3 class="d-inline">
                                <a href="{{ route('front.discover.category', ['category_slug' => $parent_category->slug]) }}"
                                    class="btn btn-outline-dark text-decoration-none btn-sm border-2 fw-bold mb-1 rounded-pill px-3 {{ !is_null($category) && $category->slug == $parent_category->slug ? 'active' : '' }}">{{ $parent_category->name }}
                                    {{ $parent_category->emoji }}</a>
                            </h3>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center g-3">
            @for ($i = 1; $i <= 18; $i++)
                <div class="col-6 col-lg-4">
                    @include('front.partials.ai-tool-card')
                </div>
            @endfor
        </div>
    </div>
@endsection