{% extends "cms/base.html" %}
{% load static %}
{% block title %}Cookie Consent{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-hint { font-size:.72rem;color:var(--cms-muted);margin-top:.3rem;line-height:1.6; }
  .addon-tag {
    font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    padding:.2rem .5rem;border-radius:5px;
    background:var(--cms-accent);color:#fff;
    vertical-align:middle;margin-left:.55rem;position:relative;top:-2px;
  }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>Cookie Consent<span class="addon-tag">Add-on</span></h2>
</div>

<form method="post">
  {% csrf_token %}
  <div class="row g-3">
    <div class="col-lg-8">

      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head">The Banner</div>
        <table class="cms-table form-table" style="margin:0">
          <tbody>
            <tr>
              <td class="field-label">Show banner</td>
              <td class="field-td">
                <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer">
                  <input type="checkbox" name="cookie_consent_enabled" value="1"{% if obj.cookie_consent_enabled %} checked{% endif %}
                         style="width:15px;height:15px;accent-color:var(--cms-accent)">
                  <span style="font-size:.82rem;color:var(--cms-text)">Show the consent banner on first visit</span>
                </label>
                <div class="field-hint">
                  Analytics only load after the visitor accepts. Essential cookies are
                  always active. The choice is remembered for a year.
                </div>
              </td>
            </tr>
            <tr>
              <td class="field-label">Accept button</td>
              <td class="field-td">
                <input type="text" name="cookie_consent_accept_label" class="field-input"
                       value="{{ obj.cookie_consent_accept_label }}" placeholder="Accept All">
              </td>
            </tr>
            <tr>
              <td class="field-label">Essential button</td>
              <td class="field-td">
                <input type="text" name="cookie_consent_essential_label" class="field-input"
                       value="{{ obj.cookie_consent_essential_label }}" placeholder="Essential Only">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="cms-card" style="padding:0;overflow:hidden">
        <div class="section-head">Message</div>
        <div style="padding:.75rem 1rem">
          <textarea name="cookie_consent_message" id="id_cookie_consent_message" class="django_ckeditor_5">{{ obj.cookie_consent_message|default:'' }}</textarea>
          <input type="hidden" id="id_cookie_consent_message_script-ck-editor-5-upload-url"
                 data-upload-url="{% url 'ck_editor_5_upload_file' %}"
                 data-upload-file-types='["jpeg","jpg","png","gif","webp","svg"]'
                 data-csrf_cookie_name="csrftoken">
          <span id="id_cookie_consent_message_script-span" style="display:none;">{{ ck_config|safe }}</span>
          <div class="field-hint">
            This is a statement about the cookies this site actually sets. Write what is
            true here rather than borrowing another company paragraph. Leave it blank to
            use the standard wording.
          </div>
        </div>
      </div>

    </div>

    <div class="col-lg-4">

      <div class="d-flex gap-2 mb-3">
        <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Consent</button>
      </div>

      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head">Preview</div>
        <div style="padding:1rem">
          <div style="background:#0d2137;border-radius:8px;padding:.9rem">
            <div style="margin:0 0 .7rem;font-size:.78rem;color:rgba(255,255,255,.8);line-height:1.5">
              {% if obj.cookie_consent_message %}{{ obj.cookie_consent_message|safe }}{% else %}We use cookies to understand how visitors use our site and to improve your experience. You can choose which cookies to allow below.{% endif %}
            </div>
            <div style="display:flex;gap:.5rem">
              <span style="background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25);border-radius:7px;padding:.35rem .8rem;font-size:.75rem;font-weight:600">
                {% firstof obj.cookie_consent_essential_label 'Essential Only' %}
              </span>
              <span style="background:var(--cms-accent);color:#fff;border-radius:7px;padding:.35rem .9rem;font-size:.75rem;font-weight:700">
                {% firstof obj.cookie_consent_accept_label 'Accept All' %}
              </span>
            </div>
          </div>
          <div class="field-hint" style="margin-top:.7rem">
            The live banner uses this site own accent colour. Link a cookie policy from
            Legal Pages and it appears in the message automatically.
          </div>
        </div>
      </div>

      <a href="{% url 'cms_dashboard' %}" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

    </div>

  </div>
</form>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
{% endblock %}