{#
  Routing rules page — Settings › Routing.

  Combined list + create form: one template, one URL. Reorder controls
  are plain POST forms (no HTMX) per the brief; progressive enhancement
  can be layered on without changing the action URLs.

  Context:
    rules             — list[RoutingRule], sorted order asc / created_at asc.
    channels          — list[Channel], sorted by name; drives the create <select>
                        AND the "channel missing for this rule" fallback.
    priority_choices  — tuple of valid priority pattern values.
    default_priority  — default for the priority <select> on fresh form.
    default_order     — integer default when order input is blank.
    form              — dict with keys source_pattern, priority_pattern,
                        channel_id, order. Pre-populated on validation error.
    errors            — dict[field -> str]; rendered beside each field.
    notice            — one of "created" / "deleted" / "not-found".
#}
{% extends "settings/_base.html" %}
{% from "_macros.html" import confirm_dialog %}

{% block section_header %}
  <header class="settings-header">
    <h1 class="settings-header__title">Routing rules</h1>
    <p class="settings-header__subtitle">
      <em>Match source and priority to a channel. Specific rules win over wildcards.</em>
    </p>
  </header>
{% endblock %}

{% block settings_content %}
  {# Flash messages. Denylist allowed values to stop attacker-injected
     query params from reaching the template. #}
  {% if notice == "created" %}
    <div class="flash flash--success" role="status">Rule created.</div>
  {% elif notice == "deleted" %}
    <div class="flash flash--success" role="status">Rule deleted.</div>
  {% elif notice == "not-found" %}
    <div class="flash flash--error" role="status">Rule not found.</div>
  {% endif %}

  {# --------------------------------------------------------------
     Rule table (or empty state).
  --------------------------------------------------------------- #}
  {% if rules %}
    <div class="data-table-wrap">
      <table class="data-table routing-table">
        <thead>
          <tr>
            <th scope="col">Order</th>
            <th scope="col">Source</th>
            <th scope="col">Priority</th>
            <th scope="col">Channel</th>
            <th scope="col"><span class="sr-only">Actions</span></th>
          </tr>
        </thead>
        <tbody>
          {% for r in rules %}
            {% set is_first = loop.first %}
            {% set is_last = loop.last %}
            <tr>
              <td class="routing-order">
                <span class="routing-order__index mono">{{ loop.index }}</span>
                <div class="routing-order__buttons">
                  <form method="post" action="/settings/routing/{{ r.id }}/move-up">
                    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
                    <button class="btn btn--ghost routing-order__btn"
                            type="submit"
                            aria-label="Move rule up"
                            {% if is_first %}disabled{% endif %}>↑</button>
                  </form>
                  <form method="post" action="/settings/routing/{{ r.id }}/move-down">
                    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
                    <button class="btn btn--ghost routing-order__btn"
                            type="submit"
                            aria-label="Move rule down"
                            {% if is_last %}disabled{% endif %}>↓</button>
                  </form>
                </div>
              </td>
              <td class="mono">{{ r.source_pattern }}</td>
              <td class="mono">{{ r.priority_pattern }}</td>
              <td>
                {% set matched_channel = None %}
                {% for c in channels %}
                  {% if c.id == r.channel_id %}{% set matched_channel = c %}{% endif %}
                {% endfor %}
                {% if matched_channel %}
                  {{ matched_channel.name }}
                {% else %}
                  <span class="routing-channel-missing mono">(deleted)</span>
                {% endif %}
              </td>
              <td class="routing-actions">
                <form method="post"
                      action="/settings/routing/{{ r.id }}/delete"
                      id="delete-routing-{{ r.id }}">
                  <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
                  <button class="btn btn--ghost btn--danger" type="submit">Delete</button>
                </form>
                {{ confirm_dialog(
                  form_id="delete-routing-" ~ r.id,
                  title="Delete routing rule?",
                  message="This rule will stop matching new drops. Existing drops are unaffected.",
                  confirm_text="Delete rule",
                  danger=True,
                ) }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="empty-state">
      <div>No routing rules yet.</div>
      <p class="empty-state__sub">
        Add one below. Without any rules, drops fall back to the default
        channel.
      </p>
    </div>
  {% endif %}

  {# --------------------------------------------------------------
     Create form (inline) — or the "no channels" empty state.

     If no channels exist, the form can't be submitted usefully (the
     <select> has nothing to pick), so we swap it out for a direct CTA
     to the channel-create page instead. This matches the brief's
     "Create a channel first" copy.
  --------------------------------------------------------------- #}
  <section class="routing-new">
    <h2 class="routing-new__title">+ Add rule</h2>

    {% if channels %}
      <form class="routing-new__form"
            method="post"
            action="/settings/routing"
            autocomplete="off"
            novalidate>
        <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />

        <div class="form-field">
          <label class="form-field__label" for="routing-source">Source</label>
          <input class="form-field__input"
                 id="routing-source"
                 name="source_pattern"
                 type="text"
                 value="{{ form.source_pattern }}"
                 placeholder="source-id or *"
                 maxlength="64"
                 required />
          <p class="form-field__hint">
            Use <code>*</code> to match any source.
          </p>
          {% if errors.source_pattern %}
            <p class="form-field__error">{{ errors.source_pattern }}</p>
          {% endif %}
        </div>

        <div class="form-field">
          <label class="form-field__label" for="routing-priority">Priority</label>
          <select class="form-field__select"
                  id="routing-priority"
                  name="priority_pattern"
                  required>
            {% for p in priority_choices %}
              <option value="{{ p }}"
                      {% if form.priority_pattern == p %}selected{% endif %}>
                {{ p }}
              </option>
            {% endfor %}
          </select>
          {% if errors.priority_pattern %}
            <p class="form-field__error">{{ errors.priority_pattern }}</p>
          {% endif %}
        </div>

        <div class="form-field">
          <label class="form-field__label" for="routing-channel">Channel</label>
          <select class="form-field__select"
                  id="routing-channel"
                  name="channel_id"
                  required>
            <option value="" {% if not form.channel_id %}selected{% endif %}>
              Pick a channel…
            </option>
            {% for c in channels %}
              <option value="{{ c.id }}"
                      {% if form.channel_id == c.id %}selected{% endif %}>
                {{ c.name }} ({{ c.driver }})
              </option>
            {% endfor %}
          </select>
          {% if errors.channel_id %}
            <p class="form-field__error">{{ errors.channel_id }}</p>
          {% endif %}
        </div>

        <div class="form-field">
          <label class="form-field__label" for="routing-order">Order</label>
          <input class="form-field__input routing-new__order-input"
                 id="routing-order"
                 name="order"
                 type="number"
                 value="{{ form.order }}"
                 step="1" />
          <p class="form-field__hint">
            Lower order = higher precedence. Default <code>{{ default_order }}</code>.
          </p>
          {% if errors.order %}
            <p class="form-field__error">{{ errors.order }}</p>
          {% endif %}
        </div>

        <div class="btn-row">
          <button class="btn btn--primary" type="submit">Create rule</button>
        </div>
      </form>
    {% else %}
      <div class="card routing-no-channels">
        <p class="routing-no-channels__text">
          Create a channel first.
        </p>
        <p class="routing-no-channels__sub">
          Routing rules point at channels — you need at least one channel
          before you can build a rule.
        </p>
        <div class="btn-row">
          <a class="btn btn--primary" href="/settings/channels/new">+ New channel</a>
        </div>
      </div>
    {% endif %}
  </section>

  <style>
    body.settings .routing-order {
      white-space: nowrap;
      min-width: 86px;
    }

    body.settings .routing-order__index {
      display: inline-block;
      width: 22px;
      text-align: right;
      color: var(--color-ink-mute);
      font-size: 12px;
      margin-right: 6px;
    }

    body.settings .routing-order__buttons {
      display: inline-flex;
      gap: 2px;
      vertical-align: middle;
    }

    body.settings .routing-order__buttons form {
      display: inline;
      margin: 0;
    }

    body.settings .routing-order__btn {
      padding: 2px 8px;
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1;
    }

    body.settings .routing-order__btn[disabled] {
      opacity: 0.35;
      cursor: not-allowed;
    }

    body.settings .routing-channel-missing {
      color: var(--color-ink-mute);
    }

    body.settings .routing-actions form {
      display: inline;
      margin: 0;
    }

    body.settings .routing-new {
      margin-top: 28px;
    }

    body.settings .routing-new__title {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink);
      margin: 0 0 12px;
    }

    body.settings .routing-new__order-input {
      max-width: 120px;
    }

    body.settings .routing-no-channels__text {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-ink);
      margin: 0 0 6px;
    }

    body.settings .routing-no-channels__sub {
      font-family: var(--font-sans);
      font-size: 13px;
      color: var(--color-ink-soft);
      margin: 0 0 12px;
    }
  </style>
{% endblock %}