{#
  Channel create/edit form.

  Used for both:
    - /settings/channels/new (channel is None)
    - /settings/channels/{id}/edit (channel is a Channel row; secrets
      are masked by the route before it hits this template).

  Context:
    channel       — Channel or None (None = create).
    form          — dict with keys name, driver, config_json. May be
                    pre-populated from a failed POST so the user doesn't
                    lose their input.
    errors        — dict[field_name -> str]; rendered beside each field.
    drivers       — list[str], registered driver names for the <select>.
#}
{% extends "settings/_base.html" %}

{% set is_edit = channel is not none %}

{% block section_header %}
  <header class="settings-header">
    <h1 class="settings-header__title">
      {% if is_edit %}Edit channel{% else %}New channel{% endif %}
    </h1>
    <p class="settings-header__subtitle">
      Paste driver config as a JSON object. The shape is driver-specific —
      see <code>.env.example</code> for per-driver schemas.
      {% if is_edit %}
        Sensitive fields (tokens, passwords) are shown as <code>••••••••</code>
        — leave them unchanged to keep the existing value, or re-type to
        replace it.
      {% endif %}
    </p>
  </header>
{% endblock %}

{% block settings_content %}
  <form method="post"
        action="{% if is_edit %}/settings/channels/{{ channel.id }}{% else %}/settings/channels{% endif %}"
        autocomplete="off"
        novalidate>
    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />

    {% if is_edit %}
      {# Signals to the POST handler that the secret-preserving merge
         should run. Without this flag the handler treats the submitted
         JSON as the full config, which would wipe any secret the user
         left masked. #}
      <input type="hidden" name="has_existing_config" value="1" />
    {% endif %}

    <div class="form-field">
      <label class="form-field__label" for="channel-name">Name</label>
      <input class="form-field__input"
             id="channel-name"
             name="name"
             type="text"
             value="{{ form.name }}"
             placeholder="e.g. phone-pushover"
             maxlength="80"
             required />
      <p class="form-field__hint">
        1–80 characters. Letters, digits, hyphens, underscores, or spaces.
        Must be unique.
      </p>
      {% if errors.name %}
        <p class="form-field__error">{{ errors.name }}</p>
      {% endif %}
    </div>

    <div class="form-field">
      <label class="form-field__label" for="channel-driver">Driver</label>
      <select class="form-field__select" id="channel-driver" name="driver" required>
        {% for d in drivers %}
          <option value="{{ d }}" {% if form.driver == d %}selected{% endif %}>{{ d }}</option>
        {% endfor %}
      </select>
      <p class="form-field__hint">
        Registered drivers: {{ drivers|join(", ") }}.
      </p>
      {% if errors.driver %}
        <p class="form-field__error">{{ errors.driver }}</p>
      {% endif %}
    </div>

    <div class="form-field">
      <label class="form-field__label" for="channel-config">Config (JSON)</label>
      <textarea class="form-field__textarea channel-config-textarea"
                id="channel-config"
                name="config_json"
                spellcheck="false"
                rows="10">{{ form.config_json }}</textarea>
      <p class="form-field__hint">
        Paste a JSON object matching the driver's expected schema. See
        <code>.env.example</code> for the shape of each driver's config.
        {% if is_edit %}
          Secrets are masked as <code>••••••••</code>; any field you leave
          at that value is preserved from the stored config.
        {% endif %}
      </p>
      {% if errors.config_json %}
        <p class="form-field__error">{{ errors.config_json }}</p>
      {% endif %}
    </div>

    <div class="btn-row">
      <button class="btn btn--primary" type="submit">
        {% if is_edit %}Save changes{% else %}Create channel{% endif %}
      </button>
      <a class="btn btn--ghost" href="/settings/channels">Cancel</a>
    </div>
  </form>

  <style>
    body.settings .channel-config-textarea {
      min-height: 180px;
    }
  </style>
{% endblock %}