{# Renders the LogixNG programs. One card per program, showing the
   enabled state, conditional count, and a summary of each
   conditional's action tree. Every action is fire-and-forget from the
   user's seat — the server awaits before responding. #}
<div id="logixng-list">
  {% 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:</strong>
    <span>{{ create_error }}</span>
  </div>
  {% endif %}
  {% if run_error %}
  <div class="card" style="border-color:var(--err,#c33);margin-bottom:0.75rem">
    <strong style="color:var(--err,#c33)">Run failed:</strong>
    <span>{{ run_error }}</span>
  </div>
  {% endif %}
  {% if not programs %}
  <p class="muted">No LogixNG programs defined yet. Create one above,
    or use the JSON API to upload a full tree.</p>
  {% else %}
  {% for p in programs %}
  <div class="card" style="margin-bottom:0.75rem">
    <div class="row" style="align-items:baseline">
      <h4 style="margin:0">
        <a href="/logixng/{{ p.name }}"><code class="mono">{{ p.name }}</code></a>
        {% if p.userName %}
        <span class="muted">-- {{ p.userName }}</span>
        {% endif %}
      </h4>
      {% if p.enabled %}
      <span class="badge ok">enabled</span>
      {% else %}
      <span class="badge">disabled</span>
      {% endif %}
      <span class="muted">{{ p.conditionals|length }} conditional{% if p.conditionals|length != 1 %}s{% endif %}</span>
      <span style="margin-left:auto"></span>
      {% if p.enabled %}
      <button hx-post="/logixng/{{ p.name }}/disable"
              hx-target="#logixng-list" hx-swap="outerHTML">Disable</button>
      {% else %}
      <button class="ok" hx-post="/logixng/{{ p.name }}/enable"
              hx-target="#logixng-list" hx-swap="outerHTML">Enable</button>
      {% endif %}
      <button hx-post="/logixng/{{ p.name }}/run"
              hx-target="#logixng-list" hx-swap="outerHTML"
              {% if not p.enabled %}disabled title="enable first"{% endif %}
              >Run all</button>
      <button class="danger"
              hx-post="/logixng/{{ p.name }}/delete"
              hx-confirm="Delete LogixNG {{ p.name }}?"
              hx-target="#logixng-list" hx-swap="outerHTML">Delete</button>
    </div>

    {% if p.conditionals %}
    <table class="cv-variables" style="width:100%;margin-top:0.5rem">
      <thead>
        <tr><th>Conditional</th><th>Enabled</th><th>Actions</th><th></th></tr>
      </thead>
      <tbody>
        {% for c in p.conditionals %}
        <tr>
          <td>
            {% if c.user_name %}{{ c.user_name }}<br/>{% endif %}
            <code class="mono muted small">{{ c.id }}</code>
          </td>
          <td>{% if c.enabled %}yes{% else %}no{% endif %}</td>
          <td>
            {% if c.actions %}
            <span class="muted small">
              {% for a in c.actions[:5] %}
              {{ a.type }}{% if not loop.last %} · {% endif %}
              {% endfor %}
              {% if c.actions|length > 5 %} · … ({{ c.actions|length - 5 }} more){% endif %}
            </span>
            {% else %}
            <span class="muted small">no actions</span>
            {% endif %}
          </td>
          <td>
            <form hx-post="/logixng/{{ p.name }}/run-conditional"
                  hx-target="#logixng-list" hx-swap="outerHTML"
                  style="margin:0">
              <input type="hidden" name="conditional_id" value="{{ c.id }}" />
              <button type="submit"
                      {% if not (p.enabled and c.enabled) %}
                      disabled title="both program and conditional must be enabled"
                      {% endif %}>Run</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  {% endfor %}
  {% endif %}
</div>