{% extends "base/base.html" %}

{% block website_head %}
{% load static %} <!-- Load static files such as CSS, JS, images -->
{% load custom_tags %} <!-- Load custom template tags defined in custom_tags.py -->
{% load widget_tweaks %} <!-- Load widget tweaks for customizing form widgets -->
{% load i18n %}

<title>{{ title }}</title>

<link rel="stylesheet" href="{% static 'cms/css/content.css' %}"> <!-- Link to the CSS file for styling -->

{% endblock website_head %}

{% block navigation_holder %}
    
    {% include "components/sidebar/sidebar_label_expanded.html" %}

{% endblock navigation_holder %}

{% block website_body %}

<div class="container">

    <!-- Form for submitting data with multipart/form-data for handling file uploads -->
    <form action="" method="POST" enctype="multipart/form-data" id="backend-form" autocomplete="off">
        {% csrf_token %} <!-- Include CSRF token for form protection -->

        <!-- Loop through each section in the data variable -->
        {% for section in data %}

        <div class="section">

            <!-- Create an accordion element for each section -->
            <div class="accordion" id="accordion-{{ forloop.counter }}">

                <div class="accordion-item">

                    <h2 class="accordion-header">
                        <!-- Button to toggle the visibility of the accordion content -->
                        {% if section|check_string_show  %}
                        <button class="accordion-button button_parent" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapse-{{ forloop.counter }}" aria-expanded="true"
                            aria-controls="collapse-{{ forloop.counter }}">
                        {% else %}
                        <button class="accordion-button collapsed button_parent" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse-{{ forloop.counter }}" aria-expanded="false"
                        aria-controls="collapse-{{ forloop.counter }}">
                        {% endif %}
                            <h1>{{section|format_mult_val_title_name}}</h1>
                        </button>
                    </h2>

                    <!-- Content of the accordion that collapses/expands -->
                    {% if section|check_string_show  %}
                    <div id="collapse-{{ forloop.counter }}" class="accordion-collapse collapse show"
                        aria-labelledby="heading-{{ forloop.counter }}"
                        data-bs-parent="#accordion-{{ forloop.counter }}">
                    {% else%}
                    <div id="collapse-{{ forloop.counter }}" class="accordion-collapse collapse"
                        aria-labelledby="heading-{{ forloop.counter }}"
                        data-bs-parent="#accordion-{{ forloop.counter }}">
                    {% endif %}

                        <div class="accordion-body">

                            <!-- Loop through each field in the current section -->
                            {% for fields in data|get_item:section %}

                                {% if fields.title %} <!-- Single value stand-alone OR Dropdown -->
                                    <div class="single_value">

                                        <!-- Check if the field is a dropdown -->
                                        {% if fields.sub_type == "drop_down" %}

                                        <div class="input_field_post_inner">
                                            <div class="accordion"
                                                id="accordion-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}" style="margin-bottom: 6vh;">

                                                <div class="accordion-item">

                                                    <h2 class="accordion-header">
                                                        <!-- Button to toggle the visibility of the inner accordion content -->
                                                        <button class="accordion-button collapsed" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                            aria-expanded="false"
                                                            aria-controls="collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                                                            <!-- Display field title with optional tags -->
                                                            {% if 'img'|check_tags:fields.tags %}
                                                                {{fields.title}}<span class="drop_down_tag" style="background-color: green;">{% trans 'Image' %}</span>
                                                            
                                                            {% elif 'txtarea'|check_tags:fields.tags%}
                                                                {{fields.title}}<span class="drop_down_tag" style="background-color: red;">{% trans 'Text Area' %}</span>

                                                            {% elif 'html'|check_tags:fields.tags%}
                                                                {{fields.title}}<span class="drop_down_tag" style="background-color: #1d1d1d;">HTML</span>

                                                            {% else %}
                                                                {{fields.title}}
                                                            {% endif %}
                                                            
                                                        </button>
                                                    </h2>

                                                    <!-- Content of the inner accordion that collapses/expands -->
                                                    <div id="collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                        class="accordion-collapse collapse"
                                                        aria-labelledby="heading-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                        data-bs-parent="#accordion-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">

                                                        <div class="accordion-body">

                                                            <div class="input_field">

                                                                <!-- Check if the field type is an image -->
                                                                {% if fields.type == "image" %}

                                                                    {% with form_field=form|get_form_field:fields.form_name %}
                                                                        <label style="color: #BBB; font-size:0.8vw; margin-bottom: 1vw">(Upload your image and submit to apply the changes.)</label>
                                                                        <br>
                                                                        {% render_field form_field class="form-control" autocomplete="off"%}
                                                                    {% endwith %}

                                                                    <!-- Have image field as a component to reduce editing code multiple times for it -->
                                                                    {% include 'components/main/image_field_display.html' %}
  
                                                                {% else %}

                                                                    {% with form_field=form|get_form_field:fields.form_name %}
                                                                        {% render_field form_field class="form-control" id="floatingInput" autocomplete="off"%}
                                                                    {% endwith %}

                                                                    {% include 'components/main/comments_display.html' %}

                                                                {% endif %}
                                
                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>
                                        </div>

                                        {% else %}

                                        {% include "components/main/input_field.html" with mult_value="False" %}

                                        {% endif %} <!--Field Sub type-->

                                    </div>
                                
                                {% elif not fields.title or fields.expandable_field %} <!-- Mult Value in dropdown -->

                                    {% for mut_val_field_unproccesed in fields %}

                                    <div class="input_field_post_inner">

                                        <div class="accordion"
                                            id="accordion-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                            style="margin-bottom: 6vh;">

                                            <div class="accordion-item">

                                                <h2 class="accordion-header">
                                                    <!-- Button to toggle the visibility of the inner accordion content -->
                                                    <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                        aria-expanded="false"
                                                        aria-controls="collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                                                        <!-- Display field title with optional tags -->

                                                        {{mut_val_field_unproccesed|format_mult_val_title_name}}
                                                        <span class="drop_down_tag" style="background-color: #0d6efd;">{% trans 'Multiple Value' %}</span>

                                                    </button>
                                                </h2>

                                                <!-- Content of the inner accordion that collapses/expands -->
                                                <div id="collapse-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                    class="accordion-collapse collapse"
                                                    aria-labelledby="heading-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                                                    data-bs-parent="#accordion-inner-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">

                                                    <div class="accordion-body">
                                                        {% for mult_val_field in fields|get_item:mut_val_field_unproccesed%}

                                                        {% with fields=mult_val_field %}
                                                        {% include "components/main/input_field.html" with mult_value="True" %}
                                                        {% endwith %}

                                                        {% endfor %}

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    {% endfor %} <!--Loop through mult content fields-->

                                {% endif %} <!--Field Main type-->

                            {% endfor %} <!--Loop through data-->

                            <!-- Submit button for the form -->
                            <button type="submit" class="btn btn-outline-primary form_submit_button submitButtonJS"
                                style="margin-left: 0.1vw;">Submit</button>

                        </div>

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

        </div>

        {% endfor %}

    </form>
    
</div>



{% endblock website_body %}

{% block additional_dom_scripts %}
<script type="module" src="{% static 'cms/js/upload_progress_bar.js' %}"></script>
<script type="module" src="{% static 'cms/js/handle_submitions.js' %}"></script>
<script type="module" src="{% static 'cms/js/general.js' %}"></script>
{% endblock additional_dom_scripts %}