{% load custom_tags %}
{% load widget_tweaks %}
{% load i18n %}

<div class="input_field">
    <!-- Check if the field type is an image -->

    {% if mult_value == "False" %}
    <label class="form-label tt">{{fields.title}}</label>
    {% endif %}

    {% if fields.type == "image" %}

        {% if fields.sub_type == "drop_down" %}

            <div class="accordion" id="nested-accordion-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">

                <div class="accordion-item">

                    <h2 class="accordion-header">

                        <button class="accordion-button collapsed" type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#nested-collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                            aria-expanded="false"
                            aria-controls="nested-collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}">
                            {{ fields.title }}<span class="drop_down_tag" style="background-color: green;">{% trans "Image" %}</span>
                        </button>

                    </h2>

                    <div id="nested-collapse-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"
                        class="accordion-collapse collapse">
                        <div class="accordion-body">

                            {% 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" id=fields.form_name autocomplete="off"%}
                            {% endwith %}
                            
                            <!-- Have image field as a component to reduce editing code multiple times for it -->
                            {% include 'components/main/image_field_display.html' %}

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

                        </div>
                    </div>

                </div>
            </div>

        {% else %}

            {% if mult_value == "True" %}
            <p style="font-weight: bold; font-size: 1vw">{{fields.title}}</p>
            {% endif %}

            {% 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" id=fields.form_name autocomplete="off"%}
            {% endwith %}
            
            <!-- Have image field as a component to reduce editing code multiple times for it -->
            {% include 'components/main/image_field_display.html' %}

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

        {% endif %}
    
    {% else %}
    
        {% if mult_value == "True" %}
        <p style="font-weight: bold; font-size: 1vw">{{fields.title}}</p>
        {% endif %}

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

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

    {% endif %}

</div>