{% load i18n %}
<div class="modal fade" id="cookiebannerModal" tabindex="-1" role="dialog" aria-labelledby="cookiebannerModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="cookiebannerModalLabel">{{ cb_settings.title }}</h3>
        {% if cb_settings.header_text %}
          <p>{{ cb_settings.header_text|safe }}</p>
        {% endif %}
      </div>
      <div class="modal-body">
        <form id="cookiebannerForm">
          {% for cookiegroup in cb_settings.groups %}
            <div id="cookiegroup_{{ cookiegroup.id }}" style="margin-bottom: 10px;">
              <div>
                <label class="switch">
                  <input type="checkbox" name="{{ cookiegroup.id }}" {% if not cookiegroup.optional %}checked disabled{% endif %}>
                  <span class="slider"></span>
                </label>
                <h4 class="cookiebannerH4">{{ cookiegroup.name }}</h4>
              </div>
              <p>{{ cookiegroup.description }}</p>
              <a data-toggle="collapse" href="#detailCollapse{{ cookiegroup.id }}" role="button">{% trans 'Show cookie details' %}</a>
              <div class="collapse" id="detailCollapse{{ cookiegroup.id }}">
                <div class="card card-body">
                  <table>
                    {% for cookie in cookiegroup.cookies %}
                      <tr>
                        <td>{{ cookie.pattern }}</td>
                        <td>{{ cookie.description }}</td>
                      </tr>
                    {% endfor %}
                  </table>
                </div>
              </div>
            </div>
          {% endfor %}
        </form>
      </div>
      <div class="modal-footer">
        {% if cb_settings.footer_text %}
          <p class="text-left">{{ cb_settings.footer_text|safe }}</p>
        {% endif %}
        <input type="submit" name="enable_all" class="cookiebannerSubmit btn btn-primary"
               value="{% trans 'Accept all' %}">
        <input type="submit" name="save" class="cookiebannerSubmit btn btn-secondary"
               value="{% trans 'Save' %}">
        <nav class="cookie-footer-links">
          {% for link in cb_settings.footer_links %}
            <span class="nav-item"><a class="nav-link" href="{{ link.href }}">{{ link.title }}</a></span>
          {% endfor %}
        </nav>
      </div>
    </div>
  </div>
</div>

<script>
  const cookiegroups = JSON.parse("{{ cookiegroups_json|escapejs }}");

  document.addEventListener("DOMContentLoaded", function () {
    let keyValue = document.cookie.match('(^|;) ?cookiebanner=([^;]*)(;|$)');
    let cookiebannerCookie = keyValue ? decodeURIComponent(keyValue[2]) : null;
    if (cookiebannerCookie) return;

    $('#cookiebannerModal').modal({
      backdrop: 'static',
      keyboard: false
    });
    $(".cookiebannerSubmit").click(function (e) {
      let enable_cookies;
      if (this.name === 'enable_all') {
        enable_cookies = cookiegroups.map((x) => x.id);
      } else {
        let serialized_form = $("#cookiebannerForm").serializeArray();
        let checked_cookiegroups = serialized_form.map((x) => x.name);
        enable_cookies = cookiegroups
                .filter((x) => {
                  return checked_cookiegroups.includes(x.id) ? x : !x.optional;
                })
                .map((x) => x.id);
      }

      // set the cookie.
      let max_age = (365 * 24 * 60 * 60);

      let secure = window.location.hostname === 'localhost' ? "" : "secure";
      document.cookie = `cookiebanner=${encodeURIComponent(enable_cookies)}; path=/; max-age=${max_age}; ${secure}`;
      location.reload();
    })
  });
</script>

<style>
  .cookiebannerH4 {
    display: inline-block;
  }

  /* The switch - the box around the slider */
  .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:checked:disabled + .slider {
    background-color: rgba(34, 154, 255, 0.4);
  }

  input:checked:disabled + .slider:hover {
    cursor: not-allowed;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

  .cookie-footer-links {
    text-align: left;
    min-height: auto;
    margin-bottom: auto;
    display: inline-block;
    float: left;
  }

  .cookie-footer-links .nav-item, .cookie-footer-links .nav-link {
    color: #999;
  }

  .cookie-footer-links .nav-item:after {
    content: "|";
    padding-right: 5px;
    padding-left: 5px;
  }

  .cookie-footer-links .nav-item:last-child:after {
    content: none;
    padding-right: 0;
    padding-left: 0;
  }

  .modal-open {
    overflow-y: auto;
  }

  .modal-dialog {
    margin-top: 120px;
  }

  #cookiebannerForm table {
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
  }

  #cookiebannerForm table td {
    padding: 3px 4px;
  }

</style>