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

{% block title %}Affiliate Products - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl">Affiliate Products</h1>
    <a href="{{ url_for('admin.affiliate_new') }}" class="btn btn-sm">+ New Product</a>
  </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.affiliate_results') }}"
          hx-target="#aff-results"
          hx-trigger="change, input delay:300ms"
          hx-indicator="#aff-loading">

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Search</label>
        <input type="text" name="q" value="{{ q }}" placeholder="Name or brand..."
               class="form-input" style="min-width:200px">
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Category</label>
        <select name="category" class="form-input" style="min-width:120px">
          <option value="">All</option>
          {% for cat in categories %}
          <option value="{{ cat }}" {% if cat == category %}selected{% endif %}>{{ cat | capitalize }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Retailer</label>
        <select name="retailer" class="form-input" style="min-width:140px">
          <option value="">All</option>
          {% for r in retailers %}
          <option value="{{ r }}" {% if r == retailer_filter %}selected{% endif %}>{{ r }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Status</label>
        <select name="status" class="form-input" style="min-width:110px">
          <option value="">All</option>
          {% for s in statuses %}
          <option value="{{ s }}" {% if s == status_filter %}selected{% endif %}>{{ s | capitalize }}</option>
          {% endfor %}
        </select>
      </div>

      <svg id="aff-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="aff-results">
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Brand</th>
          <th>Retailer</th>
          <th>Category</th>
          <th>Price</th>
          <th>Status</th>
          <th class="text-right">Clicks</th>
          <th class="text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% include "admin/partials/affiliate_results.html" %}
      </tbody>
    </table>
  </div>
{% endblock %}
