<div class="container">

    <div class="row py-5">
        <div class="col-lg-9 mx-auto text-black text-center">
            <h1 class="display-4">Sıkça Sorulan Sorular</h1>
        </div>
    </div>

    <div class="row">
        <div class="accordion" id="faq-accordionPanels">

            <% if (faqs.length === 0) { %>

                <p>Henüz hiç sık sorulan soru yok, soruldukça ekleriz. =P</p>

            <% } else { %>

                <div class="accordion" id="faq-accordion">

                    <% for (const [i, faq] of faqs.entries()) { %>
                        
                        <div class="accordion-item">

                            <!-- QUESTION -->
                            <h2 class="accordion-header" id=<%=`heading${i}`%>>
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=<%=`#collapse${i}`%> aria-expanded="false" aria-controls=<%=`collapse${i}`%>>
                                    <%= faq.question %> 
                                </button>
                                <span id="faq-id" style="display: none;"><%= faq._id.toString() %></span>
                            </h2>

                            <!-- ANSWER -->
                            <div id=<%=`collapse${i}`%> class="accordion-collapse collapse" aria-labelledby=<%=`heading${i}`%> data-bs-parent="#faq-accordion">
                                <div class="accordion-body">
                                    <%= faq.answer %> 
                                </div>
                            </div>
                        </div>

                    <% } %>

                </div>

            <% } %> 

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