{% if candidates and candidates|length %}
<ul style="list-style:none; padding:0; margin:.35rem 0; display:grid; gap:.25rem;" role="listbox" aria-label="Commander suggestions" tabindex="-1">
  {% for cand in candidates %}
  <li>
    <button type="button" id="cand-{{ loop.index0 }}" class="chip candidate-btn" role="option" data-idx="{{ loop.index0 }}" data-name="{{ cand.value|e }}" data-display="{{ cand.display|e }}"
      hx-get="/build/new/inspect?name={{ cand.display|urlencode }}"
            hx-target="#newdeck-tags-slot" hx-swap="innerHTML"
            data-hx-cache="1" data-hx-cache-key="newdeck:inspect:{{ cand.display|lower }}" data-hx-cache-ttl="45000"
            data-hx-prefetch="/build/new/inspect?name={{ cand.display|urlencode }}"
            hx-on="htmx:afterOnLoad: (function(){ try{ var preferred=this.getAttribute('data-name')||''; var displayed=this.getAttribute('data-display')||preferred; var ci = document.querySelector('input[name=commander]'); if(ci){ ci.value=preferred; try{ ci.selectionStart = ci.selectionEnd = ci.value.length; }catch(_){} try{ ci.dispatchEvent(new Event('input', { bubbles: true })); }catch(_){ } } var nm = document.querySelector('input[name=name]'); if(nm && (!nm.value || !nm.value.trim())){ nm.value=displayed; } }catch(_){ } }).call(this)">
      {{ cand.display }}
      {% if cand.warning %}
        <span aria-hidden="true" style="margin-left:.35rem; font-size:11px; color:#facc15;">⚠</span>
      {% endif %}
    </button>
    {% if cand.warning %}
      <div class="muted" style="font-size:11px; margin:.25rem 0 0 .5rem; color:#facc15;" role="note">⚠ {{ cand.warning }}</div>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
  {% if query %}
    <div class="muted">No matches for “{{ query }}”.</div>
  {% endif %}
{% endif %}
