{% extends "admin_base.html" %}
{% from "macros/ui.html" import styled_field %}

{% set active_page = 'banner' %}
{% set title = 'Banner' %}

{% block admin_content %}
<main class="max-w-5xl mx-auto px-6 py-10 space-y-12">

  {# ── Banner Form ───────────────────────────────────────────────── #}
  <section class="flex justify-center">
    <div class="w-full max-w-md">
      <div class="bg-surface border border-border rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-center mb-4">Enter new Banner</h2>
        <form method="POST" class="space-y-4">
          {{ banner_form.hidden_tag() }}
          {{ styled_field(banner_form.content) }}
          <button type="submit"
                  class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
            Add message
          </button>
        </form>
        {% if error %}
          <p class="text-red-500 text-center mt-3">{{ error }}</p>
        {% endif %}
      </div>
    </div>
  </section>

  {# ── Banner List ───────────────────────────────────────────────── #}
  {% if banners %}
  <section>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {% for banner in banners %}
      <div class="block bg-surface border border-border rounded-xl p-5 shadow-sm hover:border-primary hover:bg-background transition">
        <h3 class="text-lg font-semibold mb-1">{{ banner.content }}</h3>
        {% if banner.is_active %}
          <form method="POST" action="{{ url_for('admin.hide_active_banner') }}">
            <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-md transition">
              Hide
            </button>
          </form>
        {% else %}
          <form method="POST" action="{{ url_for('admin.set_active_banner', banner_id=banner.id) }}">
            <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white py-2 rounded-md transition">
              Show banner
            </button>
          </form>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </section>
  {% else %}
    <p class="text-center text-muted">No banners created yet.</p>
  {% endif %}

</main>
{% endblock admin_content %}