{# Rendered by /programmer/identify. Shows CV7 + CV8, and the catalog
   candidates whose NMRA manufacturer ID matches CV8. Each candidate has
   a "Use this decoder" button which populates the Manufacturer / Family /
   Model dropdowns at the top of the page so a subsequent single-CV
   read/write knows the decoder context — matches the "expert mode"
   workflow: identify, then poke CVs without opening the full pane view. #}
{% if error is defined and error %}
<div class="card">
  <span class="badge err">Identify failed: {{ error }}</span>
  {% if cv7 is defined %}
  <p class="muted small">CV7={{ cv7 }} CV8={{ cv8 }}</p>
  {% endif %}
</div>
{% else %}
<div class="card">
  <h4>Decoder identity</h4>
  <div class="row">
    <div class="col"><span class="muted">CV7 (version)</span><br/>
      <code class="mono">{{ cv7 }}</code></div>
    <div class="col"><span class="muted">CV8 (mfg ID)</span><br/>
      <code class="mono">{{ cv8 }}</code></div>
    {% if candidates %}
    <div class="col"><span class="muted">Manufacturer</span><br/>
      <span class="badge ok">{{ candidates[0].mfg }}</span></div>
    {% endif %}
    {% if product_id %}
    <div class="col"><span class="muted">Product ID</span><br/>
      <code class="mono">{{ product_id }}</code></div>
    {% endif %}
  </div>
  {% if product_id_error %}
  <p class="muted small">Product ID probe failed: {{ product_id_error }}
    — falling back to family list.</p>
  {% endif %}
  {% if candidates %}
  <h4>Matching decoder{% if total_models == 1 %}
    {% else %} families ({{ candidates|length }}
    {% if total_models and total_models != candidates|length %}
      · {{ total_models }} models
    {% endif %}){% endif %}</h4>
  {% if total_models == 1 %}
  <p class="muted small">Product ID narrowed to a single model.
    Click "Use" to lock in Manufacturer, Family, and Model above.</p>
  {% else %}
  <p class="muted small">Grouped by family — CV7 / CV8 alone rarely
    pinpoint a single model. Click "Use" to lock in Manufacturer and
    Family; then choose the specific model from the Model dropdown
    above.</p>
  {% endif %}
  <table>
    <thead><tr><th>Mfg</th><th>Family</th><th>Model{% if total_models != 1 %}s{% endif %}</th><th></th></tr></thead>
    <tbody>
      {% for c in candidates %}
      <tr>
        <td>{{ c.mfg }}</td>
        <td>{{ c.family }}</td>
        <td class="mono">
          {%- if c.model_count == 1 -%}{{ c.models[0] }}
          {%- else -%}{{ c.model_count }}{%- endif -%}
        </td>
        <td>
          <button type="button" class="identify-pick"
                  data-mfg="{{ c.mfg }}"
                  data-family="{{ c.family }}"
                  {% if c.model_count == 1 %}data-model="{{ c.models[0] }}"{% endif %}>Use</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">No matching decoder definitions in the loaded catalog.</p>
  {% endif %}
</div>

{# Wire the "Use" buttons. Two-stage cascade driven by direct
   ``htmx.ajax`` calls that each return a Promise — this avoids the
   racy dispatchEvent + htmx:afterSwap approach and preserves ordering
   even if the mfg selection was already set. Model isn't set here;
   the user picks it from the (now filtered) Model dropdown. #}
<script>
(function () {
  const btns = document.querySelectorAll(".identify-pick");
  btns.forEach(btn => {
    btn.addEventListener("click", async () => {
      const wantMfg = btn.dataset.mfg;
      const wantFamily = btn.dataset.family;
      const wantModel = btn.dataset.model || null;
      const mfgSel = document.getElementById("mfg-select");
      if (!mfgSel || !window.htmx) return;

      btn.disabled = true;
      const origText = btn.textContent;
      btn.textContent = "…";
      try {
        // Ensure the mfg dropdown has this option — the catalog-load
        // worker doesn't refresh the /programmer page after finishing,
        // so a page that was rendered before the load can have an
        // empty mfg <select>. Injecting the option here means "Use"
        // works regardless of catalog-load ordering.
        if (!mfgSel.querySelector(`option[value="${CSS.escape(wantMfg)}"]`)) {
          const opt = document.createElement("option");
          opt.value = wantMfg;
          opt.textContent = wantMfg;
          mfgSel.appendChild(opt);
        }
        mfgSel.value = wantMfg;
        await window.htmx.ajax("GET", "/programmer/decoders", {
          target: "#families", swap: "innerHTML",
          values: {mfg: wantMfg},
        });
        const famSel = document.querySelector('#families select[name="family"]');
        if (famSel) {
          famSel.value = wantFamily;
          // Load the model list for this family; the user picks the
          // specific model from the (now filtered) dropdown, unless
          // productID has already narrowed to exactly one.
          await window.htmx.ajax("GET", "/programmer/decoders", {
            target: "#models", swap: "innerHTML",
            values: {family: wantFamily},
          });
          if (wantModel) {
            const modSel = document.querySelector('#models select[name="model"]');
            if (modSel) {
              modSel.value = wantModel;
              modSel.dispatchEvent(new Event("change", {bubbles: true}));
            }
          }
        }
      } finally {
        btn.textContent = origText;
        btn.disabled = false;
      }
    });
  });
})();
</script>
{% endif %}