@extends($defaultLayout)

@section('content')
    <div class="container">
        <div class="breadcrumbs">
            @include('breadcrumbs::breadcrumbs')
        </div>
        <div class="row py-6 py-md-8 py-lg-10 position-relative">
            @if(count($categories))
                <div class="col-lg-3 mb-6 mb-lg-0">
                    <button
                        class="btn btn--underline d-lg-none"
                        data-toggle-menu
                        type="button"
                    >
                        {{ __('side-nav.nav toggle') }}
                    </button>
                    <div class="side-nav-block" data-menu-block>
                        <button
                            class="btn--close d-lg-none"
                            data-close-menu
                            type="button"
                        >
                            <span class="sr-only">
                                {{ __('side-nav.nav close button') }}
                            </span>
                            <i aria-hidden="true" class="far fa-times"></i>
                        </button>
                        <nav>
                            <span>{{ __('faq.themes title') }}</span>
                            <ul class="list-unstyled side-nav-list">
                                @foreach($categories as $cat)
                                    <li class="side-nav-list--item">
                                        <a
                                            href="{{ $cat->route() }}"
                                            @class([
                                                'side-nav-list--link',
                                                $cat->id === $category->id ? 'active' : ''
                                            ])
                                        >
                                            {{ $cat->name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </nav>
                    </div>
                </div>
            @endif
            <section class="col-lg-7 offset-lg-1">
                <h1 class="h2 mb-6 mb-md-8">{{ $category->name }}</h1>
                @forelse ($groups as $group)
                    <article class="mb-6">
                        <h2 class="h4 border-bottom-light pb-2">{{ $group->name }}</h2>
                        <ul class="list-unstyled list--faq">
                            @forelse ($group->faqs as $faq)
                                <li>
                                    <a
                                        class="border-bottom-light py-1 list__link"
                                        href="{{ $faq->route() }}"
                                    >
                                        {{ $faq->title }}
                                        <i
                                            aria-hidden="true"
                                            class="far fa-arrow-right list__link--icon"
                                        ></i>
                                    </a>
                                </li>
                            @empty
                                <li>
                                    <p>{{ __('faq.no faqs found') }}</p>
                                </li>
                            @endforelse
                        </ul>
                    </article>
                @empty
                    <p>{{ __('faq.no groups found') }}</p>
                @endforelse
            </section>
        </div>
    </div>
    {{ block('faq-index') }}
    <div class="container pb-6 pb-md-8 pb-lg-10">
        <div class="row">
            <div class="col-lg-4">{{ block('cta-1') }}</div>
            <div class="col-lg-4">{{ block('cta-2') }}</div>
            <div class="col-lg-4">{{ block('cta-3') }}</div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ mix('frontend/js/lamett/filter.js') }}"></script>
@endpush