{% extends "programmer_base.html" %}
{% block title %}Programmer · {{ loco.id }}{% endblock %}
{% block content %}
<h2>
  {{ loco.id }}
  <span class="muted">{{ loco.roadName }} {{ loco.roadNumber }}</span>
</h2>

<p class="muted mono" style="margin-top:0.25rem">
  DCC {{ loco.dccAddress }}{% if loco.longAddress %} (long){% else %} (short){% endif %}
  {% if family %}· {{ family }} / {{ model }}{% endif %}
  · CV state file <code>roster/{{ loco.fileName or (loco.id + ".xml") }}</code>
</p>

{% if not tab_panes %}
  <div class="card">
    <p class="muted">
      This loco's decoder is unknown to the loaded catalog, so no
      programming panes can be shown. Pick a decoder family/model on
      the loco's roster entry, or load a fuller decoder catalog on the
      <a href="/programmer">programmer page</a>.
    </p>
  </div>
{% else %}
<div class="programming-mode-picker card"
     data-loco-address="{{ loco.dccAddress }}"
     data-long-address="{{ 1 if loco.longAddress else 0 }}">
  <strong>Programming mode</strong>
  <label class="row" style="gap:0.35rem">
    <input type="radio" name="programming-mode"
           value="service" checked>
    <span>Service (programming track)</span>
  </label>
  <label class="row" style="gap:0.35rem">
    <input type="radio" name="programming-mode" value="ops">
    <span>Ops mode / POM (main track)</span>
  </label>
  <p class="muted small" style="margin:0.25rem 0 0">
    Ops writes go to DCC address <code>{{ loco.dccAddress }}</code>
    ({{ "long" if loco.longAddress else "short" }}) without pausing the
    layout. On NCE, ops-mode CV <em>reads</em> are unavailable — use
    service mode on the programming track for verified reads.
  </p>
</div>

<nav class="pane-tabs" role="tablist">
  {% for tp in tab_panes %}
  <button type="button" role="tab"
          class="pane-tab {% if tp.slug == active_slug %}active{% endif %}"
          hx-get="/programmer/loco/{{ loco_id }}/pane/{{ tp.slug }}"
          hx-target="#pane-content" hx-swap="innerHTML"
          hx-push-url="true"
          data-slug="{{ tp.slug }}">
    {{ tp.name }}
    {% if tp.source == "decoder" %}<sup class="muted">*</sup>{% endif %}
  </button>
  {% endfor %}
</nav>

<div id="pane-content" class="pane-content">
  {% include "_programmer_pane_content.html" %}
</div>

<script>
(function () {
  // Highlight the current tab as the user swaps panes.
  document.addEventListener("htmx:afterRequest", (evt) => {
    const target = evt.detail?.requestConfig?.triggeringEvent?.target;
    if (!target || !target.classList?.contains("pane-tab")) return;
    document.querySelectorAll(".pane-tab").forEach(b => b.classList.remove("active"));
    target.classList.add("active");
  });
})();
</script>
<script src="/static/programmer_batch.js?v={{ static_v }}" defer></script>
{% endif %}
{% endblock %}