{# One card per consist — the table shape doesn't work well for a
   variable-length member list, so we render each consist as its own
   inline card with an actions strip. Outer wrapper carries the id so
   htmx swaps replace the whole set. #}
<div id="consists-table">
  {% if create_error %}
  <div class="card" style="border-color:var(--err,#c33);margin-bottom:0.75rem">
    <strong style="color:var(--err,#c33)">Couldn't create consist:</strong>
    <span>{{ create_error }}</span>
  </div>
  {% endif %}
  {% if refresh_notice %}
  <div class="card" style="margin-bottom:0.75rem">
    <span>{{ refresh_notice }}</span>
  </div>
  {% endif %}
  {% if not consists %}
  <p class="muted">No consists defined yet.</p>
  {% else %}
  {% for c in consists %}
  <div class="card" style="margin-bottom:0.75rem">
    <div class="row" style="align-items:baseline">
      <h4 style="margin:0">
        <code class="mono">{{ c.address }}</code>
      </h4>
      <span class="badge">{{ c.kind }}</span>
      {% if c.comment %}<span class="muted">{{ c.comment }}</span>{% endif %}
      <span style="margin-left:auto"></span>
      <button class="danger"
              hx-post="/consists/{{ c.address }}/delete"
              hx-confirm="Delete consist {{ c.address }}?"
              hx-target="#consists-table" hx-swap="outerHTML">Delete</button>
    </div>

    <div class="row" style="margin-top:0.5rem">
      {# Members. Each row: address, direction flag, remove. #}
      <div class="col" style="flex:1">
        <strong>Members</strong>
        {% if not c.locos %}
        <p class="muted small">no members yet</p>
        {% else %}
        <table class="cv-variables" style="width:100%">
          <thead><tr><th>Pos</th><th>Address</th><th>Long</th><th>Orient</th><th></th></tr></thead>
          <tbody>
          {% for m in c.locos %}
          <tr>
            <td>{{ m.position }}{% if m.position == 0 %} <span class="badge">lead</span>{% endif %}</td>
            <td class="mono">{{ m.address }}</td>
            <td>{% if m.long_address %}yes{% else %}no{% endif %}</td>
            <td>{% if m.direction_normal %}forward{% else %}reversed{% endif %}</td>
            <td>
              <button class="danger"
                      hx-post="/consists/{{ c.address }}/remove-member"
                      hx-vals='{"member_address": {{ m.address }}}'
                      hx-target="#consists-table" hx-swap="outerHTML">Remove</button>
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% endif %}

        <form hx-post="/consists/{{ c.address }}/add-member"
              hx-target="#consists-table" hx-swap="outerHTML"
              style="margin-top:0.4rem" class="row">
          <label>Address
            <input type="number" name="member_address" required
                   min="1" max="10239" style="width:6em" />
          </label>
          <label class="row" style="gap:0.3rem">
            <input type="checkbox" name="long_address" value="1" />
            Long
          </label>
          {# Forward is the default orientation, so the box is only
             checked when a member is oriented backwards. The route
             translates a missing/absent value into direction_normal=True. #}
          <label class="row" style="gap:0.3rem">
            <input type="checkbox" name="reversed" value="1" />
            Reversed
          </label>
          <button type="submit">Add member</button>
        </form>
      </div>

      {# Fan-out controls: speed slider + direction toggle + e-stop.
         Speed slider dispatches on ``change`` (release) so we don't
         spam the CS during a drag. Slider position and the active
         direction button are driven from the manager's per-consist
         drive state (``c.speed`` / ``c.direction`` in the projection)
         so re-renders after a command don't wipe them out. #}
      <div class="col" style="flex:1">
        <strong>Drive</strong>
        {# Speed magnitude 0..1 to match the /throttle page — direction
           lives in the Forward/Reverse buttons below. A bipolar
           -1..+1 range would be dangerous UX: the natural "off"
           position is the middle, which reads as "stopped" visually
           but is ambiguous next to the direction buttons. #}
        <form hx-post="/consists/{{ c.address }}/set-speed"
              hx-target="#consists-table" hx-swap="outerHTML"
              hx-trigger="change" style="margin-top:0.4rem">
          <label>Speed
            <input type="range" name="speed" min="0" max="1" step="0.01"
                   value="{{ '%.2f' | format(c.speed or 0) }}" />
          </label>
        </form>
        <div class="row" style="margin-top:0.4rem;gap:0.4rem">
          <button class="{% if c.direction == 'forward' %}ok{% endif %}"
                  hx-post="/consists/{{ c.address }}/direction"
                  hx-vals='{"direction": "forward"}'
                  hx-target="#consists-table" hx-swap="outerHTML">Forward</button>
          <button class="{% if c.direction == 'reverse' %}ok{% endif %}"
                  hx-post="/consists/{{ c.address }}/direction"
                  hx-vals='{"direction": "reverse"}'
                  hx-target="#consists-table" hx-swap="outerHTML">Reverse</button>
          <button class="danger"
                  hx-post="/consists/{{ c.address }}/estop"
                  hx-target="#consists-table" hx-swap="outerHTML">E-Stop</button>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}
</div>