{# Cookie consent banner — included in base.html before </body>.
   JS-driven: hidden by default, shown only if cookie_consent cookie is absent.
   No-JS behaviour: banner stays hidden → only essential cookies set (privacy-safe default). #}
<style>
  @keyframes cb-slide-up   { from { transform:translateY(100%); opacity:0 } to { transform:translateY(0); opacity:1 } }
  @keyframes cb-slide-down { from { transform:translateY(0); opacity:1 }    to { transform:translateY(100%); opacity:0 } }
  #cookie-banner.cb-enter { animation: cb-slide-up   0.35s cubic-bezier(0.22,1,0.36,1) forwards }
  #cookie-banner.cb-exit  { animation: cb-slide-down 0.25s ease-in forwards }
  #cookie-manage-btn:hover { background:#F1F5F9!important; border-color:#CBD5E1!important }
  #cookie-save-btn:hover   { border-color:#1D4ED8!important; color:#1D4ED8!important }
  #cookie-functional-label:focus-within #cookie-track { outline:2px solid #1D4ED8; outline-offset:2px }
</style>

<div id="cookie-banner"
     role="dialog" aria-label="{{ t.cookie_title }}"
     style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
            background:#fff;border-top:1px solid #E2E8F0;
            box-shadow:0 -4px 32px rgba(15,23,42,0.09)">
  <div class="container-page" style="padding-top:1rem;padding-bottom:1rem">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;flex-wrap:wrap">

      <!-- Left: copy + collapsible prefs -->
      <div style="flex:1;min-width:240px">
        <p style="font-size:0.8125rem;color:#475569;margin:0;line-height:1.55">
          {{ t.cookie_message }}
          <a href="{{ url_for('public.privacy') }}#cookies"
             style="color:#1D4ED8;text-decoration:underline;text-underline-offset:2px">{{ t.cookie_policy }}</a>
        </p>

        <!-- Preferences panel (collapsed by default) -->
        <div id="cookie-prefs" hidden
             style="margin-top:0.875rem;padding:0.875rem;
                    border:1px solid #E2E8F0;border-radius:12px;background:#F8FAFC">

          <!-- Essential row -->
          <div style="display:flex;justify-content:space-between;align-items:flex-start;
                      padding-bottom:0.75rem;margin-bottom:0.75rem;border-bottom:1px solid #F1F5F9">
            <div>
              <div style="font-size:0.8125rem;font-weight:600;color:#0F172A;margin-bottom:2px">{{ t.cookie_essential_label }}</div>
              <div style="font-size:0.75rem;color:#64748B;line-height:1.4">{{ t.cookie_essential_desc }}</div>
            </div>
            <span style="font-size:0.625rem;font-weight:700;letter-spacing:0.06em;color:#16A34A;
                         background:#F0FDF4;border:1px solid #BBF7D0;border-radius:6px;
                         padding:3px 8px;flex-shrink:0;margin-top:2px">{{ t.cookie_essential_always }}</span>
          </div>

          <!-- Functional row -->
          <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem">
            <div style="flex:1">
              <div style="font-size:0.8125rem;font-weight:600;color:#0F172A;margin-bottom:2px">{{ t.cookie_functional_label }}</div>
              <div style="font-size:0.75rem;color:#64748B;line-height:1.4">{{ t.cookie_functional_desc }}</div>
            </div>
            <!-- Toggle switch -->
            <label id="cookie-functional-label"
                   style="position:relative;display:inline-block;width:44px;height:24px;
                          cursor:pointer;flex-shrink:0;margin-top:1px">
              <input type="checkbox" id="cookie-functional"
                     role="switch" aria-checked="false" aria-label="Functional cookies"
                     style="opacity:0;width:0;height:0;position:absolute">
              <span id="cookie-track"
                    style="position:absolute;inset:0;background:#CBD5E1;border-radius:24px;
                           transition:background 0.2s ease;border-radius:99px"></span>
              <span id="cookie-dot"
                    style="position:absolute;top:3px;left:3px;width:18px;height:18px;
                           background:#fff;border-radius:50%;
                           box-shadow:0 1px 4px rgba(0,0,0,0.22);
                           transition:transform 0.2s ease"></span>
            </label>
          </div>

          <!-- Save choices -->
          <div style="margin-top:0.875rem;display:flex;justify-content:flex-end">
            <button type="button" id="cookie-save-btn"
                    style="font-size:0.8125rem;font-family:inherit;cursor:pointer;
                           padding:6px 16px;border:1px solid #E2E8F0;border-radius:8px;
                           background:white;color:#475569;
                           transition:border-color 0.15s ease,color 0.15s ease">
              {{ t.cookie_save }}
            </button>
          </div>
        </div>
      </div>

      <!-- Right: action buttons -->
      <div style="display:flex;gap:8px;flex-shrink:0;align-items:flex-start;padding-top:1px">
        <button type="button" id="cookie-manage-btn" class="btn-outline btn-sm"
                style="font-size:0.8125rem;white-space:nowrap;padding:8px 16px;
                       border-radius:10px;transition:background 0.15s,border-color 0.15s">
          {{ t.cookie_manage }}
        </button>
        <button type="button" id="cookie-accept-btn" class="btn btn-sm"
                style="font-size:0.8125rem;white-space:nowrap;padding:8px 18px;border-radius:10px">
          {{ t.cookie_accept_all }}
        </button>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  var COOKIE_NAME = 'cookie_consent';
  var MAX_AGE     = 365 * 24 * 60 * 60;
  var banner      = document.getElementById('cookie-banner');

  // Already consented — bail out
  if (document.cookie.split(';').some(function (c) {
    return c.trim().startsWith(COOKIE_NAME + '=');
  })) return;

  // Show with slide-up animation
  banner.style.display = 'block';
  requestAnimationFrame(function () { banner.classList.add('cb-enter'); });

  var prefs     = document.getElementById('cookie-prefs');
  var checkbox  = document.getElementById('cookie-functional');
  var track     = document.getElementById('cookie-track');
  var dot       = document.getElementById('cookie-dot');
  var manageBtn = document.getElementById('cookie-manage-btn');
  var saveBtn   = document.getElementById('cookie-save-btn');
  var acceptBtn = document.getElementById('cookie-accept-btn');

  function updateToggle() {
    var on = checkbox.checked;
    track.style.background   = on ? '#1D4ED8' : '#CBD5E1';
    dot.style.transform      = on ? 'translateX(20px)' : 'translateX(0)';
    checkbox.setAttribute('aria-checked', on ? 'true' : 'false');
  }
  checkbox.addEventListener('change', updateToggle);

  var TEXT_MANAGE = {{ t.cookie_manage | tojson }};
  var TEXT_CLOSE  = {{ t.cookie_close  | tojson }};
  manageBtn.addEventListener('click', function () {
    var opening = prefs.hidden;
    prefs.hidden     = !opening;
    manageBtn.textContent = opening ? TEXT_CLOSE : TEXT_MANAGE;
    if (opening) prefs.querySelector('input').focus();
  });

  saveBtn.addEventListener('click', function () {
    var cats = ['essential'];
    if (checkbox.checked) cats.push('functional');
    dismiss(cats.join(','));
  });

  acceptBtn.addEventListener('click', function () {
    dismiss('essential,functional');
  });

  function dismiss(value) {
    document.cookie = COOKIE_NAME + '=' + value
      + ';path=/;max-age=' + MAX_AGE + ';SameSite=Lax';
    banner.classList.remove('cb-enter');
    banner.classList.add('cb-exit');
    setTimeout(function () { banner.style.display = 'none'; }, 280);
  }
}());
</script>
