<div class="c-faq">
    @if(!empty($faqTitle))
        <h2 class="c-faq__title">
            <span>{{ $faqTitle }}</span>
            <span class="c-faq__icon">
                <svg width="64" height="45">
                    <use href="/img/icon-cow--question.svg#cow--question"></use>
                </svg>
            </span>
        </h2>
    @endif

    <ul class="c-faq__list  js-toggle">
        @foreach($faqQuestions as $faqQuestion)
            <li class="c-faq__item">
                <h3 class="c-faq__question  js-toggle-switch">{{ $faqQuestion->translation->name }}</h3>
                <div class="c-faq__answer  s-text  js-toggle-content" hidden>
                    {!! $faqQuestion->translation->description !!}
                </div>
            </li>
        @endforeach
    </ul>

    @if(!empty($faqToAllButton) && $faqToAllButton == true)
        @include('site.components.button', [
           'buttonType' => 'text',
           'buttonIcon' => 'arrowRight',
           'buttonClasses' => 'u-spacing-mt4',
           'buttonText' => 'Bekijk alle vragen',
           'buttonLink' => $links->faq->route
        ])
    @endif
</div>