{% load i18n %}
{% load wagtailcore_tags ocyanjson %}

{% with settings.cookie_jar.CookieSettings as cookie_settings %}
        <div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% trans 'Cookie settings' %}">
            <div class="cookie-consent-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-consent-title">
                <div class="cookie-consent-panel is-active" id="cookie-consent-main-panel">
                    <div class="cookie-banner-title" id="cookie-consent-title">
                        <i class="fa fa-shield-halved" aria-hidden="true"></i>
                        <span>{% trans 'Privacy & Cookies' %}</span>
                    </div>
                    <div id="cookie_popup_content">
                        <p>
                            {% blocktrans %}
                            We use cookies to make sure our website works as well as possible. If you continue using this website, we assume you agree.
                            {% endblocktrans %}
                        </p>
                    </div>
                    <div id="cookie_buttons" class="cookie-consent-actions">
                        <button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
                        <button type="button" id="cookie_popup_settingsToggle">{% trans 'Settings' %}</button>
                    </div>
                    <div class="cookie-consent-hint">
                        {% trans 'You can update your cookie preferences at any time.' %}
                    </div>
                </div>

                <div class="cookie-consent-panel" id="cookie-consent-settings-panel">
                    <button type="button" class="cookie-consent-back" id="cookie_popup_backButton">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        <span>{% trans 'Back' %}</span>
                    </button>
                    <div class="cookie-banner-title">
                        <i class="fa fa-sliders" aria-hidden="true"></i>
                        <span>{% trans 'Cookie settings' %}</span>
                    </div>
                    <div id="cookie_popup_content_modal">
                        {% if cookie_settings.popup_cookie_message %}
                            {{ cookie_settings.popup_cookie_message|richtext }}
                        {% else %}
                            <p>
                                {% blocktrans %}
                                Choose which cookie categories you allow. Functional cookies are always enabled because they are required for the website to work.
                                {% endblocktrans %}
                            </p>
                        {% endif %}
                    </div>
                    {% include "cookie_jar/partials/cookie_checkboxes.html" %}
                    <div class="cookie-consent-actions cookie-consent-actions-settings">
                        <button type="button" id="cookie_popup_acceptButton_settings">{% trans 'Accept' %}</button>
                        <button type="button" id="cookie_model_saveButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Save preferences' %}</button>
                    </div>
                </div>
            </div>
        </div>
{% endwith %}

<script>
  (function () {
    function byId(id) {
      return document.getElementById(id);
    }

    function showSettings(event) {
      if (event) {
        event.preventDefault();
        event.stopPropagation();
      }
      var main = byId("cookie-consent-main-panel");
      var settings = byId("cookie-consent-settings-panel");
      if (main && settings) {
        main.classList.remove("is-active");
        settings.classList.add("is-active");
      }
    }

    function showMain(event) {
      if (event) {
        event.preventDefault();
      }
      var main = byId("cookie-consent-main-panel");
      var settings = byId("cookie-consent-settings-panel");
      if (main && settings) {
        settings.classList.remove("is-active");
        main.classList.add("is-active");
      }
    }

    document.addEventListener("DOMContentLoaded", function () {
      var settingsBtn = byId("cookie_popup_settingsToggle");
      var backBtn = byId("cookie_popup_backButton");
      var acceptSettingsBtn = byId("cookie_popup_acceptButton_settings");
      var acceptBtn = byId("cookie_popup_acceptButton");

      if (settingsBtn) {
        settingsBtn.addEventListener("click", showSettings);
      }
      if (backBtn) {
        backBtn.addEventListener("click", showMain);
      }
      if (acceptSettingsBtn && acceptBtn) {
        acceptSettingsBtn.addEventListener("click", function (event) {
          event.preventDefault();
          acceptBtn.click();
        });
      }
    });
  })();
</script>