{% if request.consent.requires_prompt %}
<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-brand-surfaceLight dark:bg-brand-surfaceDark border-t border-zinc-200 dark:border-zinc-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
    <div class="flex-1">
      <p class="font-mono text-sm text-zinc-600 dark:text-zinc-400">
        We use cookies to improve your experience.
        {% if site_settings and site_settings.privacy_policy_page %}
          <a href="{{ site_settings.privacy_policy_page.url }}" class="text-brand-cyan hover:underline">Privacy Policy</a>
        {% endif %}
      </p>
    </div>
    <div class="flex items-center gap-3 shrink-0">
      <form method="post" action="{% url 'consent' %}" class="inline">
        {% csrf_token %}
        <button type="submit" name="reject_all" value="1"
          class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">Reject all</button>
      </form>
      <form method="post" action="{% url 'consent' %}" class="inline">
        {% csrf_token %}
        <button type="submit" name="accept_all" value="1"
          class="px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Accept all</button>
      </form>
      <details class="relative">
        <summary class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer list-none">Manage</summary>
        <div class="absolute bottom-full right-0 mb-2 w-72 bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 shadow-lg">
          <form method="post" action="{% url 'consent' %}" class="space-y-3">
            {% csrf_token %}
            <label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
              <input type="checkbox" name="analytics" value="1" class="accent-brand-cyan" />
              Analytics cookies
            </label>
            <label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
              <input type="checkbox" name="advertising" value="1" class="accent-brand-pink" />
              Advertising cookies
            </label>
            <button type="submit" class="w-full px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Save preferences</button>
          </form>
        </div>
      </details>
    </div>
  </div>
</div>
{% endif %}