{% extends "base.html" %}
{% block title %}Roster{% endblock %}
{% block content %}
<h2>Roster</h2>

<div class="card">
  <h3>Add a locomotive</h3>

  {# ----- Decoder picker (OUTSIDE the form) -----
     The picker is UI-only: its selects use ``name="mfg"`` /
     ``name="family"`` / ``name="model"`` so the htmx ``hx-include``
     forwards the RIGHT query-param names to ``/programmer/decoders``.
     If it were inside the form, ``name="mfg"`` would collide with the
     loco-manufacturer text field on submit. When the user picks a
     model (via manual selection or the Identify flow), the JS at the
     bottom of this page mirrors the values into hidden
     ``decoderFamily`` / ``decoderModel`` inputs inside the form so
     the real submission carries them.

     Identify's returned fragment seeds the same #mfg-select /
     #families / #models IDs — this section is deliberately shaped
     to look like the Programmer page's picker for that reason. #}
  {% if catalog_loaded %}
  <div class="row browse-picker" style="margin-bottom:0.4rem">
    <div class="col">
      <div class="pick-label">Decoder manufacturer</div>
      <select id="mfg-select"
              hx-get="/programmer/decoders" hx-target="#families"
              hx-swap="innerHTML" hx-trigger="change"
              hx-include="this" name="mfg">
        <option value="">— pick —</option>
        {% for m in manufacturers %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
      </select>
    </div>
    <div id="families" class="col"></div>
    <div id="models" class="col"></div>
  </div>
  <div class="row" style="margin-bottom:0.4rem">
    <button type="button" hx-post="/programmer/identify"
            hx-target="#identify-result" hx-swap="innerHTML">
      Identify decoder on program track
    </button>
    <span id="decoder-status" class="muted small" style="align-self:center">
      No decoder picked yet.
    </span>
  </div>
  <div id="identify-result" style="margin-bottom:0.5rem"></div>
  {% else %}
  <p class="muted small">
    Load the decoder catalog on the <a href="/programmer">Programmer page</a>
    (or set <code>JMRI_DECODER_XML_ROOT</code> for auto-load at startup) to
    enable the manufacturer / family / model picker + Identify. Free-text
    fields below still work if you know the family / model names.
  </p>
  {% endif %}

  <form hx-post="/roster/create" hx-target="#roster-table" hx-swap="outerHTML"
        id="roster-create-form">
    <div class="row">
      <label>ID
        <input type="text" name="id" required pattern="[A-Za-z0-9_.-]+"
               placeholder="UP_3601" />
      </label>
      <label>DCC address
        <input type="text" name="dccAddress" value="3" required />
      </label>
      <label>Long address
        <input type="checkbox" name="longAddress" value="1" />
      </label>
      <label>Max speed %
        <input type="number" name="maxSpeedPct" value="100" min="0" max="100"
               style="width:6em" />
      </label>
    </div>
    <div class="row">
      <label>Road name
        <input type="text" name="roadName" placeholder="Union Pacific" />
      </label>
      <label>Road number
        <input type="text" name="roadNumber" placeholder="3601" />
      </label>
      <label>Owner
        <input type="text" name="owner" placeholder="you" />
      </label>
    </div>
    <div class="row">
      <label>Loco manufacturer
        <input type="text" name="mfg" placeholder="Athearn / Kato / ..." />
      </label>
      <label>Loco model
        <input type="text" name="model" placeholder="Genesis SD70ACe / ..." />
      </label>
    </div>

    {# Decoder family / model — hidden when the catalog is loaded (the
       picker above populates them via JS). Visible free-text fallback
       when there's no catalog so users can still hand-enter values. #}
    {% if catalog_loaded %}
    <input type="hidden" name="decoderFamily" id="decoder-family-input" />
    <input type="hidden" name="decoderModel" id="decoder-model-input" />
    <div class="row">
      <button type="submit">Save</button>
    </div>
    {% else %}
    <div class="row">
      <label>Decoder family
        <input type="text" name="decoderFamily" id="decoder-family-input"
               placeholder="ESU LokSound v5" />
      </label>
      <label>Decoder model
        <input type="text" name="decoderModel" id="decoder-model-input"
               placeholder="LokSound 5" />
      </label>
      <button type="submit">Save</button>
    </div>
    {% endif %}
  </form>
</div>

<div class="card">
  {% include "_roster_table.html" %}
</div>

{# Mirror the picker selections into the hidden decoder inputs so a
   Save submits the family + model the user actually picked. Also
   updates a small status line so the user has feedback that the
   picker has taken effect. #}
<script>
document.addEventListener("DOMContentLoaded", function () {
  const famInput = document.getElementById("decoder-family-input");
  const modInput = document.getElementById("decoder-model-input");
  const status = document.getElementById("decoder-status");

  function currentPickerValues() {
    const famSel = document.querySelector('#families select[name="family"]');
    const modSel = document.querySelector('#models select[name="model"]');
    return {
      family: famSel && famSel.value ? famSel.value : "",
      model: modSel && modSel.value ? modSel.value : "",
    };
  }

  function sync() {
    if (!famInput || !modInput) return;
    const picked = currentPickerValues();
    famInput.value = picked.family;
    modInput.value = picked.model;
    if (status) {
      if (picked.family && picked.model) {
        status.textContent = "Picked: " + picked.family + " / " + picked.model;
        status.classList.remove("muted");
      } else if (picked.family) {
        status.textContent = "Family " + picked.family +
          " — pick a model to lock it in.";
      } else {
        status.textContent = "No decoder picked yet.";
        status.classList.add("muted");
      }
    }
  }

  document.addEventListener("htmx:afterSwap", function (e) {
    if (e.target.id === "families" || e.target.id === "models") {
      // Bind change on the freshly-swapped selects so any subsequent
      // pick fires sync().
      e.target.querySelectorAll("select").forEach(function (sel) {
        sel.addEventListener("change", sync);
      });
      // Identify-driven swap may have pre-selected values — mirror now.
      sync();
    }
  });
});
</script>
{% endblock %}