{% extends "base.html" %}
{% block content %}
<section class="commander-page">
  <header class="commander-hero">
    <h2>Commanders</h2>
    <p class="muted">Browse the catalog and jump straight into a build with your chosen leader.</p>
  </header>

  <form
    id="commander-filter-form"
    class="commander-filters"
    action="/commanders"
    method="get"
    hx-get="/commanders"
    hx-target="#commander-results"
    hx-trigger="submit, change from:#commander-color, keyup changed delay:300ms from:#commander-search"
    hx-include="#commander-filter-form"
    hx-push-url="true"
    hx-indicator="#commander-loading"
    novalidate
  >
    <label>
      <span class="filter-label">Search</span>
      <input type="search" id="commander-search" name="q" value="{{ query }}" placeholder="Search commanders, themes, or text..." autocomplete="off" />
    </label>
    <label>
      <span class="filter-label">Color identity</span>
      <select id="commander-color" name="color">
        <option value="">All colors</option>
        {% for code, label in color_options %}
          <option value="{{ code }}" {% if color == code %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <input type="hidden" name="page" value="{{ page }}" />
    <button type="submit" class="btn filter-submit">Apply</button>
  </form>

  <div id="commander-loading" class="commander-loading" role="status" aria-live="polite">
    <span class="sr-only">Loading commanders…</span>
    <div class="commander-skeleton-list" aria-hidden="true">
      {% for i in range(3) %}
      <article class="commander-skeleton">
        <div class="skeleton-thumb shimmer"></div>
        <div class="skeleton-main">
          <div class="skeleton-line skeleton-title shimmer"></div>
          <div class="skeleton-line skeleton-meta shimmer"></div>
          <div class="skeleton-chip-row">
            <span class="skeleton-chip shimmer"></span>
            <span class="skeleton-chip shimmer"></span>
            <span class="skeleton-chip shimmer"></span>
          </div>
          <div class="skeleton-line skeleton-text shimmer"></div>
        </div>
        <div class="skeleton-cta shimmer"></div>
      </article>
      {% endfor %}
    </div>
  </div>

  <div id="commander-results">
    {% include "commanders/list_fragment.html" %}
  </div>
</section>

<style>
  .commander-page { display:flex; flex-direction:column; gap:1.25rem; }
  .commander-hero h2 { margin:0; font-size:1.75rem; }
  .commander-hero p { margin:0; max-width:60ch; }
  .commander-filters { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; }
  .commander-filters label { display:flex; flex-direction:column; gap:.35rem; min-width:220px; }
  .filter-label { font-size:.85rem; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
  .commander-filters input,
  .commander-filters select { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.45rem .6rem; min-height:2.4rem; }
  .commander-filters input:focus,
  .commander-filters select:focus { outline:2px solid var(--ring); outline-offset:2px; }
  .filter-submit { height:2.4rem; align-self:flex-end; }

  .commander-summary { font-size:.9rem; }
  .commander-error { padding:.75rem .9rem; border:1px solid #f87171; background:rgba(248,113,113,.12); border-radius:10px; color:#fca5a5; }
  .commander-empty { margin:1rem 0 0; }
  .commander-list { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; }

  .commander-row { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
  .commander-thumb { width:160px; flex:0 0 auto; }
  .commander-thumb img { width:160px; height:auto; border-radius:10px; border:1px solid var(--border); background:#0b0d12; display:block; }
  .commander-main { flex:1 1 auto; display:flex; flex-direction:column; gap:.6rem; min-width:0; }
  .commander-header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
  .commander-name { margin:0; font-size:1.25rem; }
  .color-identity { display:flex; align-items:center; gap:.35rem; }
  .commander-context { margin:0; font-size:.95rem; }
  .commander-themes { display:flex; flex-wrap:wrap; gap:.4rem; }
  .commander-themes-empty { font-size:.85rem; }
  .commander-theme-chip { display:inline-flex; align-items:center; gap:.25rem; padding:4px 10px; border-radius:9999px; border:1px solid var(--border); background:rgba(148,163,184,.15); font-size:.75rem; letter-spacing:.03em; color:inherit; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease; appearance:none; font:inherit; }
  .commander-theme-chip:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
  .commander-theme-chip:hover { background:rgba(148,163,184,.25); border-color:rgba(148,163,184,.45); transform:translateY(-1px); }
  .commander-partners { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; }
  .commander-partner-sep { opacity:.6; }
  .commander-cta { margin-left:auto; display:flex; align-items:center; }
  .commander-cta .btn { white-space:nowrap; }
  .commander-pagination { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
  .commander-summary + .commander-pagination { margin-top:.75rem; }
  .commander-pagination .pagination-group { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .commander-pagination .commander-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:96px; }
  .commander-pagination .commander-page-btn[disabled],
  .commander-pagination .commander-page-btn.disabled { opacity:.55; cursor:default; pointer-events:none; }
  .commander-pagination-status { font-size:.85rem; color:var(--muted); }

  .commander-loading { display:none; margin-top:1rem; }
  .commander-loading.htmx-request { display:block; }
  .commander-skeleton-list { display:flex; flex-direction:column; gap:1rem; }
  .commander-skeleton { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
  .skeleton-thumb { width:160px; height:220px; border-radius:10px; }
  .skeleton-main { flex:1 1 auto; display:flex; flex-direction:column; gap:.6rem; }
  .skeleton-line { height:16px; border-radius:9999px; }
  .skeleton-title { width:45%; height:22px; }
  .skeleton-meta { width:30%; }
  .skeleton-text { width:65%; }
  .skeleton-chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }
  .skeleton-chip { width:90px; height:22px; border-radius:9999px; display:inline-block; }
  .skeleton-cta { width:120px; height:42px; border-radius:9999px; }
  .shimmer { background:linear-gradient(90deg, rgba(148,163,184,0.25) 25%, rgba(148,163,184,0.15) 37%, rgba(148,163,184,0.25) 63%); background-size:400% 100%; animation:commander-shimmer 1.4s ease-in-out infinite; }
  @keyframes commander-shimmer {
    0% { background-position:100% 0; }
    100% { background-position:-100% 0; }
  }

  @media (max-width: 900px) {
    .commander-row { flex-direction:column; }
    .commander-thumb img { width:100%; max-width:280px; }
    .commander-cta { margin-left:0; }
    .commander-cta .btn { width:100%; justify-content:center; text-align:center; }
  }
  @media (max-width: 640px) {
    .commander-filters { align-items:stretch; }
    .filter-submit { width:100%; }
    .commander-filters label { flex:1 1 100%; min-width:0; }
    .commander-thumb { width:min(70vw, 220px); align-self:center; }
    .commander-thumb img { width:100%; }
    .skeleton-thumb { width:min(70vw, 220px); height:calc(min(70vw, 220px) * 1.4); }
  }
</style>
<script>
  (function(){
    const form = document.getElementById('commander-filter-form');
    if (!form) return;
    const pageInput = form.querySelector('input[name="page"]');
    if (!pageInput) return;

    const resetPage = () => { pageInput.value = '1'; };
    const searchField = document.getElementById('commander-search');
    const colorField = document.getElementById('commander-color');
    if (searchField) searchField.addEventListener('input', resetPage);
    if (colorField) colorField.addEventListener('change', resetPage);

    const updatePageFromResults = (container) => {
      if (!container) return;
      const marker = container.querySelector('[data-current-page]');
      if (marker) {
        const current = marker.getAttribute('data-current-page');
        if (current) pageInput.value = current;
      }
    };

    document.body.addEventListener('htmx:afterSwap', (event) => {
      const target = event.detail && event.detail.target;
      if (!target || target.id !== 'commander-results') return;
      updatePageFromResults(target);
      // Intelligent scroll-to-top: only when triggered from bottom controls or when the summary/top controls are off-screen
      const container = document.getElementById('commander-results');
      const searchEl = document.getElementById('commander-search');
      if (!container) return;
      const invoker = event.detail && event.detail.elt ? event.detail.elt : null;
      const fromBottom = invoker && invoker.closest && invoker.closest('[data-bottom-controls]');
      // If not from bottom, check whether the top of the results is already within view; if so, skip scroll
      const rect = container.getBoundingClientRect();
      const topInView = rect.top >= 0 && rect.top <= (window.innerHeight * 0.25);
      // If we're below the top controls (content's top is above viewport) or the click came from the bottom controls,
      // jump directly to the search input (no smooth animation) for fastest navigation.
      if (fromBottom || rect.top < 0) {
        requestAnimationFrame(() => {
          if (searchEl) {
            searchEl.scrollIntoView({ behavior: 'auto', block: 'start' });
            try { searchEl.focus({ preventScroll: true }); } catch(_) { /* no-op */ }
          } else {
            window.scrollTo({ top: 0, behavior: 'auto' });
          }
        });
        return;
      }
      if (!topInView) {
        requestAnimationFrame(() => {
          container.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      }
    });

    updatePageFromResults(document.getElementById('commander-results'));
  })();
</script>
{% endblock %}