{% load i18n %}
{% load get_field %}
{% load static %}
{% if not hide_form_errors %}
    {% include "frontend/forms/errors.html" %}
{% endif %}
{% if form and expert_form and not hide_expert_mode %}
    <div class="mb-3 text-end">
        <a href="#"
           class="text-muted small"
           id="expert-mode-toggle"
           style="text-decoration: none">{% translate "Show Expert Mode" %}</a>
    </div>
{% endif %}
<div id="custom-form-container"
     class="{% if form %}custom-crd-form{% else %}expert-crd-form{% endif %}">
    {% if form and form.context %}{{ form.context }}{% endif %}
    {% if form and form.get_fieldsets|length == 1 %}
        {# Single fieldset - render without tabs #}
        {% for fieldset in form.get_fieldsets %}
            <div class="my-2">
                {% for field in fieldset.fields %}
                    {% with field=form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                {% endfor %}
                {% for subfieldset in fieldset.fieldsets %}
                    {% if subfieldset.fields %}
                        <div>
                            <h4 class="mt-3">{{ subfieldset.title }}</h4>
                            {% for field in subfieldset.fields %}
                                {% with field=form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}
    {% elif form %}
        {# Multiple fieldsets or auto-generated form - render with tabs #}
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            {% for fieldset in form.get_fieldsets %}
                {% if not fieldset.hidden %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if forloop.first %}active{% endif %}{% if fieldset.has_mandatory %} has-mandatory{% endif %}"
                                id="{{ fieldset.title|slugify }}-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#custom-{{ fieldset.title|slugify }}"
                                type="button"
                                role="tab"
                                aria-controls="custom-{{ fieldset.title|slugify }}"
                                aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
                            {{ fieldset.title }}
                            {% if fieldset.has_mandatory %}<span class="mandatory-indicator">*</span>{% endif %}
                        </button>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <div class="tab-content" id="myTabContent">
            {% for fieldset in form.get_fieldsets %}
                <div class="tab-pane fade my-2 {% if fieldset.hidden %}d-none{% endif %}{% if forloop.first %}show active{% endif %}"
                     id="custom-{{ fieldset.title|slugify }}"
                     role="tabpanel"
                     aria-labelledby="custom-{{ fieldset.title|slugify }}-tab">
                    {% for field in fieldset.fields %}
                        {% with field=form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                    {% endfor %}
                    {% for subfieldset in fieldset.fieldsets %}
                        {% if subfieldset.fields %}
                            <div>
                                <h4 class="mt-3">{{ subfieldset.title }}</h4>
                                {% for field in subfieldset.fields %}
                                    {% with field=form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>
{% if expert_form and not hide_expert_mode %}
    <div id="expert-form-container"
         class="expert-crd-form"
         style="{% if form %}display:none{% endif %}">
        {% if expert_form and expert_form.context %}{{ expert_form.context }}{% endif %}
        <ul class="nav nav-tabs" id="expertTab" role="tablist">
            {% for fieldset in expert_form.get_fieldsets %}
                {% if not fieldset.hidden %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if forloop.first %}active{% endif %}{% if fieldset.has_mandatory %} has-mandatory{% endif %}"
                                id="expert-{{ fieldset.title|slugify }}-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#expert-{{ fieldset.title|slugify }}"
                                type="button"
                                role="tab"
                                aria-controls="expert-{{ fieldset.title|slugify }}"
                                aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
                            {{ fieldset.title }}
                            {% if fieldset.has_mandatory %}<span class="mandatory-indicator">*</span>{% endif %}
                        </button>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        <div class="tab-content" id="expertTabContent">
            {% for fieldset in expert_form.get_fieldsets %}
                <div class="tab-pane fade my-2 {% if fieldset.hidden %}d-none{% endif %}{% if forloop.first %}show active{% endif %}"
                     id="expert-{{ fieldset.title|slugify }}"
                     role="tabpanel"
                     aria-labelledby="expert-{{ fieldset.title|slugify }}-tab">
                    {% for field in fieldset.fields %}
                        {% with field=expert_form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                    {% endfor %}
                    {% for subfieldset in fieldset.fieldsets %}
                        {% if subfieldset.fields %}
                            <div>
                                <h4 class="mt-3">{{ subfieldset.title }}</h4>
                                {% for field in subfieldset.fields %}
                                    {% with field=expert_form|get_field:field %}{{ field.as_field_group }}{% endwith %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
{% if form %}
    <input type="hidden"
           name="active_form"
           id="active-form-input"
           value="custom">
{% endif %}
<div class="col-sm-12 d-flex justify-content-end">
    {# browser form validation fails when there are fields missing/invalid that are hidden #}
    <input class="btn btn-primary me-1 mb-1"
           type="submit"
           {% if form and expert_form %}formnovalidate{% endif %}
           value="{% if form_submit_label %}{{ form_submit_label }}{% else %}{% translate "Save" %}{% endif %}" />
</div>
<script defer src="{% static 'js/bootstrap-tabs.js' %}"></script>
{% if form and not hide_expert_mode %}
    <script defer src="{% static 'js/expert-mode.js' %}"></script>
{% endif %}
