{% if cnilUrl is not defined %}
  {% set cnilUrl = aa_content_path_safe('page', {slugAdmin: 'gdpr'}) %}
{% endif %}
<div class="clementine-backdrop"></div>
<div class="clementine-banner">
  <div class="container">
    <div class="clementine-banner__text">
      <button class="clementine-deny-all">{{ 'gdpr.deny_all'|trans({}, 'gdpr_banner') }}</button>
      <span class="clementine-banner__text-title">{{ 'gdpr.title'|trans({}, 'gdpr_banner') }}</span>
      <div>
        {{ 'gdpr.base'|trans({'%cnilUrl%': cnilUrl}, 'gdpr_banner')|raw }}
      </div>
    </div>
    <div class="clementine-banner__buttons">
      <button class="clementine-accept-all btn btn-primary">{{ 'gdpr.accept_all'|trans({}, 'gdpr_banner') }}</button>
      <button class="clementine-configure btn btn-transparent"
              data-bs-toggle="modal"
              data-bs-target="#clementine-modal"
      >{{ 'gdpr.configure'|trans({}, 'gdpr_banner') }}</button>
    </div>
  </div>
</div>
<button
  class="clementine-quick-access btn btn-secondary"
  data-bs-toggle="modal"
  data-bs-target="#clementine-modal"
>
  <span class="clementine-quick-access-ico" aria-hidden="true"></span>
</button>
<div class="modal clementine-modal" tabindex="-1" id="clementine-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p class="h2">{{ 'gdpr.modal.title'|trans({}, 'gdpr_banner') }}</p>
        <div class="modal-body-content">
          <div class="row">
            <div class="col">
              {{ 'gdpr.modal.base'|trans({'%cnilUrl%': cnilUrl}, 'gdpr_banner')|raw }}
            </div>
          </div>

          {% set gdprSections = [
            'functional',
            'analytics',
            'marketing',
          ] %}
          {% for section in gdprSections %}
            <div class="row">
              <div class="col">
                <label class="clementine-control-labels" for="clementine-control-{{ section }}">
                  <span class="label-title">{{ ('gdpr.sections.'~section~'.title')|trans({}, 'gdpr_banner')|raw }}</span>
                  <span class="label-description">{{ ('gdpr.sections.'~section~'.description')|trans({}, 'gdpr_banner')|raw }}</span>
                </label>
              </div>
              <div class="col clementine-control-col">
                <label class="checkbox-container">
                  <input
                      id="clementine-control-{{ section }}"
                      class="custom-checkbox clementine-control"
                      type="checkbox"
                      data-clementine-section="{{ section }}"
                      {% if section == 'functional' %} readonly="readonly" disabled="disabled" checked="checked"{% endif %}
                  />
                  <span class="checkmark"></span>
                </label>
              </div>
            </div>
          {% endfor %}
        </div>
        <div class="modal-buttons-container">
          <button class="btn btn-transparent clementine-save"
                  data-bs-dismiss="modal">{{ ('gdpr.modal.save')|trans({}, 'gdpr_banner') }}</button>
          <button class="btn btn-primary clementine-accept-all"
                  data-bs-dismiss="modal">{{ ('gdpr.modal.accept-all')|trans({}, 'gdpr_banner') }}</button>
        </div>
      </div>
    </div>
  </div>
</div>
