mtg_python_deckbuilder/code/web/templates/build/_alternatives.html

{# Alternatives panel partial.
  Expects: name (seed display), require_owned (bool), items = [
    { 'name': display_name, 'name_lower': lower, 'owned': bool, 'tags': list[str] }
  ]
#}
<div class="alts" style="margin-top:.35rem; padding:.5rem; border:1px solid var(--border); border-radius:8px; background:#0f1115;" data-skeleton data-skeleton-label="Pulling alternatives…" data-skeleton-delay="450">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem; gap:.5rem; flex-wrap:wrap;">
    <div style="display:flex;align-items:center;gap:.5rem;">
      <strong>Alternatives</strong>
      <button type="button" onclick="this.closest('.alts').remove()" title="Close alternatives panel" aria-label="Close alternatives" style="background:transparent;border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:14px;line-height:1;padding:2px 6px;cursor:pointer;">✕</button>
    </div>
    {% set toggle_q = '0' if require_owned else '1' %}
    {% set toggle_label = 'Owned only: On' if require_owned else 'Owned only: Off' %}
    <div style="display:flex; gap:.35rem; flex-wrap:wrap;">
      <button class="btn" hx-get="/build/alternatives?name={{ name|urlencode }}&owned_only={{ toggle_q }}"
        hx-target="closest .alts" hx-swap="outerHTML"
        data-hx-cache="1" data-hx-cache-key="alts:{{ name|lower }}:owned:{{ toggle_q }}" data-hx-cache-ttl="20000">{{ toggle_label }}</button>
      <button class="btn" hx-get="/build/alternatives?name={{ name|urlencode }}&owned_only={{ 1 if require_owned else 0 }}&refresh=1"
              hx-target="closest .alts" hx-swap="outerHTML" title="Request a fresh pool of alternatives">New pool</button>
    </div>
  </div>
  {% if not items or items|length == 0 %}
    <div class="muted">No alternatives found{{ ' (owned only)' if require_owned else '' }}.</div>
  {% else %}
  <ul class="alt-list">
      {% for it in items %}
        {% set tags = (it.tags or []) %}
        <li>
          <button class="btn alt-option" data-card-name="{{ it.name }}"
                  {% if it.role %}data-role="{{ it.role }}"{% endif %}
                  {% if it.mana %}data-mana="{{ it.mana }}"{% endif %}
                  {% if it.rarity %}data-rarity="{{ it.rarity }}"{% endif %}
                  {% if it.hover_simple %}data-hover-simple="1"{% endif %}
                  {% if it.owned %}data-owned="1"{% endif %}
                  data-tags="{{ tags|join(', ') }}" hx-post="/build/replace"
                  hx-vals='{"old":"{{ name }}", "new":"{{ it.name }}", "owned_only":"{{ 1 if require_owned else 0 }}"}'
                  hx-target="closest .alts" hx-swap="outerHTML" title="Lock this alternative and unlock the current pick">
            Replace with {{ it.name }}
          </button>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>