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

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

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-2xl">Articles</h1>
      {% include "admin/partials/article_stats.html" %}
    </div>
    <div class="flex gap-2">
      <a href="{{ url_for('admin.article_new') }}" class="btn btn-sm">New Article</a>
      <form method="post" action="{{ url_for('admin.rebuild_all') }}" class="m-0" style="display:inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="button" class="btn-outline btn-sm" onclick="confirmAction('Rebuild all articles? This will re-render every article from its template.', this.closest('form'))">Rebuild All</button>
      </form>
    </div>
  </header>

  {# Filters #}
  <div class="card mb-6" style="padding:1rem 1.25rem">
    <form class="flex flex-wrap gap-3 items-end"
          hx-get="{{ url_for('admin.article_results') }}"
          hx-target="#article-results"
          hx-trigger="change, input delay:300ms"
          hx-indicator="#articles-loading">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Search</label>
        <input type="text" name="search" value="{{ current_search }}" placeholder="Title..."
               class="form-input" style="min-width:180px">
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Status</label>
        <select name="status" class="form-input" style="min-width:120px">
          <option value="">All</option>
          <option value="live" {% if current_status == 'live' %}selected{% endif %}>Live</option>
          <option value="scheduled" {% if current_status == 'scheduled' %}selected{% endif %}>Scheduled</option>
          <option value="draft" {% if current_status == 'draft' %}selected{% endif %}>Draft</option>
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Template</label>
        <select name="template" class="form-input" style="min-width:140px">
          <option value="">All</option>
          {% for t in template_slugs %}
          <option value="{{ t }}" {% if t == current_template %}selected{% endif %}>{{ t }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Language</label>
        <select name="language" class="form-input" style="min-width:80px">
          <option value="">All</option>
          <option value="en" {% if current_language == 'en' %}selected{% endif %}>EN</option>
          <option value="de" {% if current_language == 'de' %}selected{% endif %}>DE</option>
        </select>
      </div>

      <svg id="articles-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>
    </form>
  </div>

  {# Results #}
  <div id="article-results">
    {% include "admin/partials/article_results.html" %}
  </div>
{% endblock %}
