@extends('layouts.app', [
    'navTitle' => 'Mit kérdeztek más szülők?',
    'pageTitle' => 'Mit kérdeztek más szülők?',
    'seoTitle' => 'Mit kérdeztek más szülők?',
    'seoDesc' => 'Mit kérdeztek más szülők?',
    'pageImageRelativeUrl' => '',
    'navBackgroundDesktop' => 'faq/nav-background-desktop.webp',
    'navBackgroundMobile' => 'faq/nav-background-mobile.webp',
    'menuIndex' => -1,
])
@section('content')
    <link rel="stylesheet" href="/css/faq.css">
    <div class="container big-padding">
        @php
            $index = 1;
        @endphp
        @foreach ($faqs as $faq)
            <div id="{{ $faq->id }}" class="expandable" onclick="expand(this)">
                <div class="row no-gutters justify-content-between align-items-center">
                    <div class="title">{{ $index }}. {{ $faq->question }}</div>
                    <i class="fa-solid fa-chevron-down" style="color:#398300;"></i>
                </div>
                <div class="content">
                    <div class="h-10"></div>
                    {!! $faq->answer !!}
                </div>
            </div>
            @php
                $index++;
            @endphp
        @endforeach
    </div>
@endsection