@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
            <div class="col-lg-7 offset-lg-1">
                <section class="border-bottom-dark border-bottom-large pb-4 mb-4">
                    <div class="mb-2">
                        <a class="btn--back" href="{{ $category->route() }}">
                            <i
                                aria-hidden="true"
                                class="far fa-arrow-left btn--back--icon"
                            ></i>
                            {{ __('faq.return to overview') }}
                        </a>
                    </div>
                    <h1 class="h2">{{ $faq->title }}</h1>
                    @if(count($faq->tags))
                        <div class="d-flex flex-wrap align-items-baseline mt-2">
                            <p class="small mb-0 me-2">{{ __('faq.for tags') }}</p>
                            <ul class="list-unstyled d-flex align-items-center">
                                @foreach($faq->tags as $tag)
                                    <li class="tag me-1">
                                        {{ $tag->name }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </section>
                <div class="border-bottom-dark border-bottom-large pb-4 mb-4">
                    <div class="body__text">{!! $faq->intro !!}</div>
                    <div class="pa-column">
                        @pagearchitectrenderer($faq->body)
                    </div>
                </div>
                @if(count($faq->relatedFaqs))
                    <section>
                        <h2 class="h4 border-bottom-light pb-2">
                            {{ __('faq.more about') }} {{ $category->name }}
                        </h2>
                        <ul class="list-unstyled list--faq">
                            @foreach($faq->relatedFaqs as $relatedFaq)
                                <li>
                                    <a
                                        class="border-bottom-light py-1 list__link"
                                        href="{{ $relatedFaq->route() }}"
                                    >
                                        {{ $relatedFaq->title }}
                                        <i
                                            aria-hidden="true"
                                            class="far fa-arrow-right list__link--icon"
                                        ></i>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endif
            </div>
        </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