@extends('master', ['menuLayout' => true])

@section('title', !empty($page->translation->meta_title) ? $page->translation->meta_title : config('site.company.name'))
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-menu" >

        <div class="l-menu__bar">
            <div class="l-menu__close">
                <button class="c-close  c-close--dark" aria-expanded="true" aria-controls="menu-bar" tabindex="-1"></button>
            </div>

            <div class="l-menu__breadcrumbs">
                @include('components.breadcrumb')
            </div>

            <div class="l-menu__category">
                <ul class="c-submenu">
                    @foreach($composedQuestionCategories as $composedQuestionCategory)
                        <li class="c-submenu__item">
                            <div class="c-submenu__link @if($loop->first) is-active @endif" data-faq-category="{{ $composedQuestionCategory->id }}">
                                <span class="c-submenu__label">{{ $composedQuestionCategory->translation->name }}</span>
                                <span class="c-submenu__arrow">@include('components.icons.arrowheadRight')</span>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>


        <div class="l-menu__content">
            <div class="u-spacing-mb5">
                <h1 class="c-page-title">{{ $page->translation->name }}</h1>

                <div class="l-menu__filter-button">
                    <button class="c-ghost-button  c-ghost-button--icon  c-ghost-button--reverse">
                        <span class="c-ghost-button__text">Categorieën</span>
                        <i class="c-ghost-button__icon">
                            @include('components.icons.pin')
                        </i>
                    </button>
                </div>
            </div>

            <div class="u-spacing-pb6">

                <div class="c-faq__categories">
                    @foreach($composedQuestionCategories as $composedQuestionCategory)
                        <div class="c-faq__category  @if($loop->first) is-active @endif">
                            @include('components.faq', [
                                 'faqItems' => $composedQuestionCategory->questions
                            ])
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    </div>


@endsection