@extends('master')

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

@section('content')

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

        <div class="t-faq  u-spacing-mt5">
            <div class="t-faq__menu">
                <h1 class="">{{ $page->translation->name }}</h1>

                <ul class="t-faq__nav">
                    @foreach($composedQuestionCategories as $composedQuestionCategory)
                        <li class="t-faq__nav-item">
                            <button class="t-faq__button  js-category-toggle @if($loop->first) is-active @endif" data-category="{{ $composedQuestionCategory->id }}" type="button">
                                <span class="t-faq__button-label">{{ $composedQuestionCategory->translation->name }}</span>
                                <i class="t-faq__button-arrow">@include('components.icons.arrowhead')</i>
                            </button>
                        </li>
                    @endforeach
                </ul>

            </div>

            <div class="t-faq__content">
                <div class="t-faq__categories">
                    @foreach($composedQuestionCategories as $composedQuestionCategory)
                        <div class="t-faq__category  js-category-group  @if($loop->first) is-active @endif" data-category="{{ $composedQuestionCategory->id }}">
                            <h2 class="t-faq__subheading">{{$composedQuestionCategory->translation->name}}</h2>
                            @include('components.faq', [
                                 'faqItems' => $composedQuestionCategory->questions
                            ])
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>


@endsection