{% load static i18n cookies_tags %}

{% translate cookie_modal_button_accept as accept_text %}
{% translate cookie_modal_button_accept_all as accept_all_text %}
{% translate cookie_modal_button_decline as decline_text %}
{% translate cookie_modal_button_details as details_text %}
{% translate cookie_modal_button_settings as settings_text %}

<div id="cookie-consent-modal-wrapper" class="ga-cookie-modal-wrapper noselect">
    <div class="ga-cookie-modal">

        <!--Header; visible on every tab-->
        <div class="ga-cookie-modal-header">
            <div class="ga-cookie-modal-title">
                <h2>{{cookie_modal_title}}</h2>
                {% if cookie_modal_logo %}
                    <a href="{{cookie_modal_logo_url}}" data-target="_blank" rel="external noopener" aria-label="{% translate "Open link in a new tab" %}">
                        <img class="icon" src="{% static cookie_modal_logo %}" alt="{{cookie_modal_title}}" />
                    </a>
                {% endif %}
            </div>
            <div class="ga-cookie-modal-description">
                <p>{{cookie_modal_description}}</p>
            </div>
        </div>

        <div class="ga-cookie-modal-tabs">
            <!--Main tab-->
            <div class="ga-cookie-modal-tab open ga-cookie-modal-form-tab" id="ga-cookie-modal-main-tab">
                <form class="ga-cookie-modal-form" method="post" action="{{cookie_modal_form_action}}">
                    {% csrf_token %}
                    <!--Action buttons-->
                    <div class="ga-cookie-modal-actions p-2">
                        <button type="submit" class="ga-cookie-modal-decline btn btn-danger btn-outline">
                            {{decline_text}}
                        </button>
                        <button type="button" class="ga-cookie-modal-btn ga-cookie-modal-settings btn btn-primary btn-outline" data-target="#ga-cookie-modal-tab-settings">
                            {{settings_text}}
                        </button>
                        <button type="submit" class="ga-cookie-modal-accept btn btn-primary" name="{{cookie_modal_accept_all_value}}" value="{{cookie_modal_accept_all_value}}">
                            {{accept_all_text}}
                        </button>
                    </div>
                </form>
            </div>
            <!--Settings tab-->
            <div class="ga-cookie-modal-tab ga-cookie-modal-tab-settings" id="ga-cookie-modal-tab-settings">

                <form class="ga-cookie-modal-form" method="post" action="{{cookie_modal_form_action}}">
                    {% csrf_token %}
                    <input type="hidden" name="cookie_modal_form_type" value="cookie_modal_accept_all_cookies" />
                    <div class="ga-cookie-modal-content">
                        {% for form_field in cookie_modal_form %}
                            <!--Custom form-group inputs-->
                            <div class="form-group">
                                {% if form_field.field.widget.input_type == "checkbox" %}
                                    {{ form_field }}
                                    <label for="{{ form_field.id_for_label }}">
                                        <span class="label-text">{{ form_field.label }}</span>
                                    </label>
                                {% else %}
                                    <label for="{{ form_field.id_for_label }}">{{ form_field.label }}</label>
                                    <div class="form-field{%if form_field.errors|length > 0%} has-errors{%endif%}">
                                        {{ form_field }}
                                    </div>
                                {% endif %}
                                {% if fields_show_errors and form_field.errors %}
                                    <div class="alert alert-danger">
                                        {% for error in form_field.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                {% if form_field.help_text %}
                                    <small id="{{ form_field.id_for_label }}-help" class="form-help-text text-muted">{{ form_field.help_text }}</small>
                                {% endif %}
                            </div>
                        {% endfor %}
                        {% for item in cookie_modal_extras %}
                            {% render_with_context item %}
                        {% endfor %}
                    </div>
                    <!--Action buttons-->
                    <div class="ga-cookie-modal-actions p-2">
                        <button type="button" class="ga-cookie-modal-btn ga-cookie-modal-back btn btn-primary btn-outline" data-target="#ga-cookie-modal-main-tab">
                            {% translate "Back" %}
                        </button>
                        <button type="button" class="ga-cookie-modal-btn ga-cookie-modal-details btn btn-primary btn-outline" data-target="#ga-cookie-modal-tab-details">
                            {{details_text}}
                        </button>
                        <button type="submit" class="ga-cookie-modal-accept btn btn-primary">
                            {{accept_text}}
                        </button>
                    </div>
                </form>
            </div>
            <!--Details tab-->
            <div class="ga-cookie-modal-tab ga-cookie-modal-tab-details" id="ga-cookie-modal-tab-details">
                <div class="ga-cookie-modal-content">
                    {% for panel in cookie_modal_panels %}
                        <div class="ga-cookie-modal-consent-panel">
                            <div class="cookie-consent-panel-title">
                                <h3>{{panel.title}}</h3>
                            </div>
                            <div class="cookie-consent-panel-body">
                                <p>{{panel.long_description}}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <!--Action buttons-->
                <div class="ga-cookie-modal-actions p-2">
                    <button type="button" class="ga-cookie-modal-btn ga-cookie-modal-back btn btn-primary btn-outline" data-target="#ga-cookie-modal-tab-settings">
                        {% translate "Back" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>