{% extends "base.html" %}
{% block title %}Banners — Admin{% endblock %}
{% block content %}
<div class="container-fluid py-3 px-lg-4">
  <h1 class="h4 fw-bold mb-4"><i class="bi bi-badge-ad me-2"></i>Promo & Announcement Banners</h1>

  <div class="row g-4">
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body">
          <h2 class="h6 text-uppercase text-muted mb-3">Create Banner</h2>
          <form method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="action" value="create">
            <div class="mb-3">
              <label class="form-label">Title</label>
              <input type="text" name="title" class="form-control rounded-3" required maxlength="200">
            </div>
            <div class="mb-3">
              <label class="form-label">Content</label>
              <textarea name="content" class="form-control rounded-3" rows="3"></textarea>
            </div>
            <div class="mb-3">
              <label class="form-label">Image URL (optional)</label>
              <input type="url" name="image_url" class="form-control rounded-3" placeholder="https://...">
            </div>
            <div class="mb-3">
              <label class="form-label">Link URL (optional)</label>
              <input type="url" name="link_url" class="form-control rounded-3">
            </div>
            <div class="mb-3">
              <label class="form-label">Position</label>
              <select name="position" class="form-select rounded-3">
                <option value="top">Top (all pages)</option>
                <option value="dashboard">Dashboard only</option>
                <option value="sidebar">Sidebar</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Priority (higher = first)</label>
              <input type="number" name="priority" class="form-control rounded-3" value="0">
            </div>
            <button class="btn btn-primary rounded-pill w-100">Create Banner</button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-7">
      <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
          {% for b in banners %}
          <div class="p-3 border-bottom d-flex justify-content-between align-items-start gap-3">
            <div>
              <div class="fw-semibold">{{ b.title }}
                {% if b.is_active %}<span class="badge bg-success">Active</span>{% else %}<span class="badge bg-secondary">Off</span>{% endif %}
              </div>
              <div class="small text-muted">{{ b.content[:120] if b.content else '' }}</div>
              <div class="small text-muted mt-1">Position: {{ b.position }} · Priority: {{ b.priority }}</div>
            </div>
            <div class="d-flex gap-1">
              <form method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="action" value="toggle">
                <input type="hidden" name="banner_id" value="{{ b.id }}">
                <button class="btn btn-sm btn-outline-secondary">{{ 'Disable' if b.is_active else 'Enable' }}</button>
              </form>
              <form method="post" onsubmit="return confirm('Delete banner?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="banner_id" value="{{ b.id }}">
                <button class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </div>
          </div>
          {% else %}
          <div class="p-4 text-center text-muted">No banners yet</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block content_mobile %}{{ self.content() }}{% endblock %}