<?php
    defined('BASEPATH') OR exit('No direct script access allowed');
?>

<section id="title" class="primary">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h1><?= lang('faq_title') ?></h1>
                <p class="lead"><?= lang('faq_des') ?></p>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb text-dark float-right">
                        <li class="breadcrumb-item">
                            <a href="/"><?= lang('header_home') ?></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="/about"><?= lang('header_about') ?></a>
                        </li>
                        <li class="breadcrumb-item active">FAQ</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section><!--/#title-->

<section id="faqs" class="container">
    <?php if (isset($_SESSION['site_lang']) && $_SESSION['site_lang'] !== 'de') { ?>
        <div class="alert alert-warning" role="alert">
            <h4><?= lang('faq_note_title') ?></h4>
            <p><?= lang('faq_note_des') ?></p>
        </div>
    <?php } ?>
    <ul class="faq list-unstyled">
        <li>
            <span class="number">01</span>
            <div>
                <h4><?= lang('faq_section1_title') ?></h4>
                <div class="panel-group" id="accordion1">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1"
                               href="#collapseOne1">
                                <?= lang('faq_section1_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseOne1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section1_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1"
                               href="#collapseOne2">
                                <?= lang('faq_section1_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseOne2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section1_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1"
                               href="#collapseOne3">
                                <?= lang('faq_section1_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseOne3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section1_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1"
                               href="#collapseOne4">
                                <?= lang('faq_section1_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseOne4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section1_a4') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1"
                               href="#collapseOne5">
                                <?= lang('faq_section1_q5') ?>
                            </a>
                        </h5>
                        <div id="collapseOne5" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section1_a5') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <span class="number">02</span>
            <div>
                <h4><?= lang('faq_section2_title') ?></h4>
                <div class="panel-group" id="accordion2">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapseTwo1">
                                <?= lang('faq_section2_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseTwo1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section2_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapseTwo2">
                                <?= lang('faq_section2_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseTwo2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section2_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapseTwo3">
                                <?= lang('faq_section2_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseTwo3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section2_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapseTwo4">
                                <?= lang('faq_section2_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseTwo4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section2_a4') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2"
                               href="#collapseTwo5">
                                <?= lang('faq_section2_q5') ?>
                            </a>
                        </h5>
                        <div id="collapseTwo5" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section2_a5') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <span class="number">03</span>
            <div>
                <h4><?= lang('faq_section3_title') ?></h4>
                <div class="panel-group" id="accordion3">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3"
                               href="#collapseThree1">
                                <?= lang('faq_section3_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseThree1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section3_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3"
                               href="#collapseThree2">
                                <?= lang('faq_section3_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseThree2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section3_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3"
                               href="#collapseThree3">
                                <?= lang('faq_section3_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseThree3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section3_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion3"
                               href="#collapseThree4">
                                <?= lang('faq_section3_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseThree4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section3_a4') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <span class="number">04</span>
            <div>
                <h4><?= lang('faq_section4_title') ?></h4>
                <div class="panel-group" id="accordion4">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion4"
                               href="#collapseFour1">
                                <?= lang('faq_section4_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseFour1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section4_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion4"
                               href="#collapseFour2">
                                <?= lang('faq_section4_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseFour2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section4_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion4"
                               href="#collapseFour3">
                                <?= lang('faq_section4_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseFour3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section4_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion4"
                               href="#collapseFour4">
                                <?= lang('faq_section4_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseFour4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section4_a4') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion4"
                               href="#collapseFour5">
                                <?= lang('faq_section4_q5') ?>
                            </a>
                        </h5>
                        <div id="collapseFour5" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section4_a5') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <span class="number">05</span>
            <div>
                <h4><?= lang('faq_section5_title') ?></h4>
                <div class="panel-group" id="accordion5">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion5"
                               href="#collapseFive1">
                                <?= lang('faq_section5_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseFive1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section5_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion5"
                               href="#collapseFive2">
                                <?= lang('faq_section5_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseFive2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section5_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion5"
                               href="#collapseFive3">
                                <?= lang('faq_section5_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseFive3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section5_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion5"
                               href="#collapseFive4">
                                <?= lang('faq_section5_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseFive4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section5_a4') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion5"
                               href="#collapseFive5">
                                <?= lang('faq_section5_q5') ?>
                            </a>
                        </h5>
                        <div id="collapseFive5" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section5_a5') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <span class="number">06</span>
            <div>
                <h4><?= lang('faq_section6_title') ?></h4>
                <div class="panel-group" id="accordion6">
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion6"
                               href="#collapseSix1">
                                <?= lang('faq_section6_q1') ?>
                            </a>
                        </h5>
                        <div id="collapseSix1" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section6_a1') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion6"
                               href="#collapseSix2">
                                <?= lang('faq_section6_q2') ?>
                            </a>
                        </h5>
                        <div id="collapseSix2" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section6_a2') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion6"
                               href="#collapseSix3">
                                <?= lang('faq_section6_q3') ?>
                            </a>
                        </h5>
                        <div id="collapseSix3" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section6_a3') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion6"
                               href="#collapseSix4">
                                <?= lang('faq_section6_q4') ?>
                            </a>
                        </h5>
                        <div id="collapseSix4" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section6_a4') ?>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-2">
                        <h5 class="card-header">
                            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion6"
                               href="#collapseSix5">
                                <?= lang('faq_section6_q5') ?>
                            </a>
                        </h5>
                        <div id="collapseSix5" class="card-collapse collapse">
                            <div class="card-body">
                                <?= lang('faq_section6_a5') ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</section><!--#faqs-->