@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-main  u-bg-neutral--100">

        <div class="o-imagebanner">
            <img
{{--                    sizes="(max-width: 1920px) 100vw, 1920px"--}}
{{--                 srcset="--}}
{{--                    https://picsum.photos/id/112/320/47 320w,--}}
{{--                    https://picsum.photos/id/112/929/135 929w,--}}
{{--                    https://picsum.photos/id/112/1311/191 1311w,--}}
{{--                    https://picsum.photos/id/112/1657/242 1657w,--}}
{{--                    https://picsum.photos/id/112/1920/280 1920w"--}}
                 src="/img/faq-header.jpg"
                 alt="">
        </div>

        <div class="o-faq">

            <div class="o-faq__intro">
                <h1 class="o-faq__title">{{ $page->translation->visual_name }}</h1>
                <div class="o-faq__description  s-text">{!! $page->translation->description !!}</div>
            </div>

            <div class="o-faq__grid  js-faq">
                <div class="o-faq__filters">
                    <h3 class="o-faq__subheader">Categorie</h3>
                    <ul class="o-faq__links">
                        @foreach($composedQuestionsByCategories as $composedQuestionsByCategory)
                            <li class="o-faq__linkitem">
                                <button class="o-faq__link  js-category-toggle @if($loop->first) is-active @endif" data-category="{{ $composedQuestionsByCategory->id }}">
                                    {{ $composedQuestionsByCategory->translation->name }}
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8">
                                        <path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" d="m0 0 4 4-4 4"/>
                                    </svg>
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="o-faq__suggest">
                    <div class="c-suggest">
                        <h3 class="c-suggest__title">Heb je een andere vraag?</h3>
                        <p class="c-suggest__content">Neem dan gerust contact met ons op.</p>
                        <div class="c-suggest__action">
                            @include('site.components.button', [
                                'buttonType' => 'text',
                                'buttonText' => 'Contact',
                                'buttonIcon' => 'arrowRight',
                                'buttonLink' => $links->contact->route
                            ])
                        </div>
                    </div>
                </div>

                <div class="o-faq__main">

                    @foreach($composedQuestionsByCategories as $composedQuestionsByCategory)

                        <div class="o-faq__category  js-category-group  @if($loop->first) is-active @endif" data-category="{{ $composedQuestionsByCategory->id }}">

                            @include('site.components.faq', [
                                'faqTitle' => $composedQuestionsByCategory->translation->name,
                                'faqQuestions' => $composedQuestionsByCategory->questions
                            ])

                        </div>

                    @endforeach

                </div>
            </div>

        </div>

    </div>

@endsection