{% extends "admin/base_admin.html" %}
{% set admin_page = "scenarios" %}

{% block title %}Scenarios - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-2xl">Scenarios</h1>
      <p class="text-slate text-sm">
        Pre-computed calculator outputs — embedded as cards in articles and PDFs.
        Showing {{ scenarios | length }} of {{ total }}.
      </p>
    </div>
    <div class="flex gap-2">
      <a href="{{ url_for('admin.scenario_new') }}" class="btn">New Scenario</a>
    </div>
  </header>

  <form class="card mb-4 flex flex-wrap gap-3 items-end"
        hx-get="{{ url_for('admin.scenario_results') }}"
        hx-target="#scenario-results"
        hx-trigger="change, input delay:300ms"
        hx-indicator="#scenario-loading">

    <div class="flex-1 min-w-48">
      <label class="block text-sm text-slate mb-1">Search</label>
      <input type="text" name="search" value="{{ current_search }}"
             placeholder="Title, location, slug…"
             class="form-input w-full">
    </div>

    <div>
      <label class="block text-sm text-slate mb-1">Country</label>
      <select name="country" class="form-input">
        <option value="">All countries</option>
        {% for c in countries %}
        <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>

    <div>
      <label class="block text-sm text-slate mb-1">Venue type</label>
      <select name="venue_type" class="form-input">
        <option value="">All types</option>
        {% for v in venue_types %}
        <option value="{{ v }}" {% if v == current_venue_type %}selected{% endif %}>{{ v | capitalize }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="flex gap-2 items-center">
      <button type="button" class="btn-outline"
              onclick="this.closest('form').reset(); htmx.trigger(this.closest('form'), 'change')">Clear</button>
      <svg id="scenario-loading" class="htmx-indicator search-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="#CBD5E1" stroke-width="3"/>
        <path d="M12 2a10 10 0 0 1 10 10" stroke="#0EA5E9" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </div>
  </form>

  <div class="card">
    <div id="scenario-results">
      {% include "admin/partials/scenario_results.html" %}
    </div>
  </div>
{% endblock %}
