{% extends "public/base.html" %}
{% load static %}

{% block title %}Support & FAQ — {{ site.site_name }}{% endblock %}
{% block meta_description %}Answers to common questions about our IT services, web development, hosting, security and support.{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Support &amp; FAQ</h1>
                </div>
            </div>
        </div>
    </div>

    <section class="section">
        <div class="hero-container">
            <div class="row grid-spacer-2">

                <div class="col-xl-8 order-1 order-xl-0">
                    <div class="hero-container">
                        <div class="d-flex flex-column gspace-2">
                            <div class="faq-wrapper">
                                <div class="tab-content p-0" id="faqTabsContent">

                                    {% if categories %}
                                        {% for cat in categories %}
                                        <div class="tab-pane fade {% if forloop.first %}show active{% endif %}"
                                             id="cat-{{ cat.slug }}" role="tabpanel">
                                            <div class="accordion d-flex flex-column gspace-2" id="faqAccordion{{ cat.id }}">
                                                {% for faq in cat.items.all %}
                                                {% if faq.is_active %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header">
                                                        <button class="accordion-button collapsed" type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#faq{{ faq.id }}">
                                                            {{ faq.question }}
                                                        </button>
                                                    </h2>
                                                    <div id="faq{{ faq.id }}" class="accordion-collapse collapse"
                                                         data-bs-parent="#faqAccordion{{ cat.id }}">
                                                        <div class="accordion-body">{{ faq.answer|safe }}</div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endfor %}

                                    {% else %}
                                    <div class="text-center py-5">
                                        <p class="secondary-accent">No FAQs published yet.</p>
                                    </div>
                                    {% endif %}

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

                <div class="col-xl-4 order-0 order-xl-1">
                    <div class="card other-services">
                        <div class="other-services-content">
                            <ul class="service-list px-0 mb-0" id="faqTabs" role="tablist">
                                {% if categories %}
                                    {% for cat in categories %}
                                    <li role="presentation">
                                        <a class="other-service-link {% if forloop.first %}active{% endif %}"
                                           id="{{ cat.slug }}-tab"
                                           data-bs-toggle="tab"
                                           data-bs-target="#cat-{{ cat.slug }}"
                                           type="button" role="tab">
                                            {{ cat.name }}<i class="fa-solid fa-arrow-right rotate45"></i>
                                        </a>
                                    </li>
                                    {% endfor %}
                                {% else %}
                                <li role="presentation"><a class="other-service-link active" data-bs-toggle="tab" data-bs-target="#strategy" type="button" role="tab">Strategy &amp; Getting Started<i class="fa-solid fa-arrow-right rotate45"></i></a></li>
                                <li role="presentation"><a class="other-service-link" data-bs-toggle="tab" data-bs-target="#web" type="button" role="tab">Websites, Apps &amp; E-commerce<i class="fa-solid fa-arrow-right rotate45"></i></a></li>
                                <li role="presentation"><a class="other-service-link" data-bs-toggle="tab" data-bs-target="#server" type="button" role="tab">Servers, Hosting &amp; Cloud<i class="fa-solid fa-arrow-right rotate45"></i></a></li>
                                <li role="presentation"><a class="other-service-link" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab">Email, Domains &amp; Integrations<i class="fa-solid fa-arrow-right rotate45"></i></a></li>
                                <li role="presentation"><a class="other-service-link" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">Backup &amp; Support<i class="fa-solid fa-arrow-right rotate45"></i></a></li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>

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

    {% include "public/includes/logos_strip.html" with logos=global_partners %}

</div>
{% endblock %}