{#
  core/modules/notify/dialogs/channel/modal.html

  Variablen:
    channel          – bestehender Kanal-Dict (Edit) oder None (Create)
    channel_id       – ID des Kanals (Edit) oder None (Create)
    title            – Dialog-Titel
    submit_url       – POST-Ziel
    selected_backend – Backend-Key (ntfy, …)
#}
{% extends "dialog_form.html" %}
{% from "partials/components/ui_macros.html" import form_input %}

{% set is_edit = channel is not none %}
{% set v = channel or {} %}
{% set cur_backend = selected_backend or 'ntfy' %}

{% block dialog_width %}520{% endblock %}
{% block form_id %}ch-modal-form{% endblock %}
{% block form_action %}{{ submit_url }}{% endblock %}
{% block form_style %}display:flex; flex-direction:column; gap:16px;{% endblock %}
{% block form_attrs %}hx-on::before-request="if(!channelModalValidate(this)) event.preventDefault();"{% endblock %}

{% block dialog_body %}
  {%- set _oninput -%}
  oninput="this.classList.remove('is-invalid'); var _e=document.getElementById(this.id+'-error'); if(_e)_e.style.display='none';"
  {%- endset -%}
  <input type="hidden" name="backend" value="{{ cur_backend }}">

  <div class="form-group">
    <label class="form-label">Name <span class="required-mark">*</span></label>
    {{ form_input('label', v.get('label', ''), placeholder='z. B. Mein ntfy-Server',
                  attrs='id="ch-label" ' ~ _oninput) }}
    <span id="ch-label-error" class="form-error" style="display:none;">Bitte einen Namen eingeben.</span>
  </div>

  {% if cur_backend == 'ntfy' %}
  <div style="display:flex; flex-direction:column; gap:12px; margin-top:4px;">
    <div class="form-group">
      <label class="form-label">Server-URL <span class="required-mark">*</span></label>
      {{ form_input('ntfy_url', v.get('ntfy_url') or 'https://ntfy.sh', type='url',
                    placeholder='https://ntfy.sh', attrs='id="ch-ntfy-url" ' ~ _oninput) }}
      <span id="ch-ntfy-url-error" class="form-error" style="display:none;">Bitte eine gültige URL eingeben.</span>
    </div>
    <div class="form-group">
      <label class="form-label">Thema <span class="required-mark">*</span></label>
      {{ form_input('ntfy_topic', v.get('ntfy_topic', ''), placeholder='mein-thema',
                    attrs='id="ch-ntfy-topic" ' ~ _oninput) }}
      <span id="ch-ntfy-topic-error" class="form-error" style="display:none;">Bitte ein Thema eingeben.</span>
    </div>
    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
      <input type="checkbox" name="ntfy_verify_ssl"
             style="width:14px; height:14px; accent-color:var(--accent);"
             {{ 'checked' if v.get('ntfy_verify_ssl', True) else '' }}>
      <span style="font-size:13px; color:var(--text-2);">SSL-Zertifikat prüfen</span>
      <span style="font-size:11px; color:var(--text-3);">(deaktivieren bei selbst-signierten Zertifikaten)</span>
    </label>
  </div>
  {% endif %}

  {% if cur_backend == 'email' %}
  <div style="display:flex; flex-direction:column; gap:12px; margin-top:4px;">
    <div style="display:grid; grid-template-columns:2fr 1fr; gap:12px;">
      <div class="form-group" style="margin:0;">
        <label class="form-label">SMTP-Server <span class="required-mark">*</span></label>
        {{ form_input('mail_smtp_host', v.get('mail_smtp_host', ''), placeholder='smtp.gmail.com',
                      attrs='id="ch-smtp-host" ' ~ _oninput) }}
        <span id="ch-smtp-host-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
      <div class="form-group" style="margin:0;">
        <label class="form-label">Port <span class="required-mark">*</span></label>
        {{ form_input('mail_smtp_port', v.get('mail_smtp_port') or 587, type='number',
                      placeholder='587', attrs='id="ch-smtp-port" min="1" max="65535" ' ~ _oninput) }}
        <span id="ch-smtp-port-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
      <div class="form-group" style="margin:0;">
        <label class="form-label">Benutzername <span class="required-mark">*</span></label>
        {{ form_input('mail_smtp_user', v.get('mail_smtp_user', ''), placeholder='user@example.com',
                      attrs='id="ch-smtp-user" autocomplete="username" ' ~ _oninput) }}
        <span id="ch-smtp-user-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
      <div class="form-group" style="margin:0;">
        <label class="form-label">Passwort <span class="required-mark">*</span></label>
        {%- set _pw_attrs -%}
        id="ch-smtp-pass" autocomplete="new-password" value="{{ v.get('mail_smtp_password', '') }}" {{ _oninput }}
        {%- endset -%}
        {{ form_input('mail_smtp_password', type='password', placeholder='••••••••', attrs=_pw_attrs) }}
        <span id="ch-smtp-pass-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
      <div class="form-group" style="margin:0;">
        <label class="form-label">Von <span class="required-mark">*</span></label>
        {{ form_input('mail_from', v.get('mail_from', ''), type='email',
                      placeholder='app@example.com', attrs='id="ch-mail-from" ' ~ _oninput) }}
        <span id="ch-mail-from-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
      <div class="form-group" style="margin:0;">
        <label class="form-label">An <span class="required-mark">*</span></label>
        {{ form_input('mail_to', v.get('mail_to', ''), type='email',
                      placeholder='admin@example.com', attrs='id="ch-mail-to" ' ~ _oninput) }}
        <span id="ch-mail-to-error" class="form-error" style="display:none;">Pflichtfeld.</span>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">Betreff-Präfix <span class="required-mark">*</span></label>
      {{ form_input('mail_subject_prefix', v.get('mail_subject_prefix') or '[Notify]',
                    placeholder='[Notify]', attrs='id="ch-subject-prefix" ' ~ _oninput) }}
      <span id="ch-subject-prefix-error" class="form-error" style="display:none;">Pflichtfeld.</span>
    </div>
    <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
      <input type="checkbox" name="mail_smtp_tls"
             style="width:14px; height:14px; accent-color:var(--accent);"
             {{ 'checked' if v.get('mail_smtp_tls', True) else '' }}>
      <span style="font-size:13px; color:var(--text-2);">STARTTLS verwenden</span>
      <span style="font-size:11px; color:var(--text-3);">(empfohlen für Port 587)</span>
    </label>
  </div>
  {% endif %}
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer">
  <label class="toggle-field">
    <input type="hidden" name="enabled" value="0">
    <input type="checkbox" name="enabled" value="1" id="channel-enabled"
           style="display:none;" {{ 'checked' if v.get('enabled', True) else '' }}>
    <button type="button"
            class="toggle-switch {{ 'toggle-on' if v.get('enabled', True) else 'toggle-off' }}"
            onclick="var cb=document.getElementById('channel-enabled');cb.checked=!cb.checked;this.classList.toggle('toggle-on',cb.checked);this.classList.toggle('toggle-off',!cb.checked);this.nextElementSibling.textContent=cb.checked?'Aktiviert':'Deaktiviert';">
      <span class="toggle-knob"></span>
    </button>
    <span class="toggle-field-label">{{ 'Aktiviert' if v.get('enabled', True) else 'Deaktiviert' }}</span>
  </label>
  <div class="modal-actions">
    <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
    <button type="submit" class="btn btn-sm btn-primary">{{ 'Speichern' if is_edit else 'Erstellen' }}</button>
  </div>
</div>
{% endblock %}

{% block dialog_scripts %}
<script>
function channelModalValidate(form) {
  var ids = ['ch-label'
    {% if cur_backend == 'ntfy' %}, 'ch-ntfy-url', 'ch-ntfy-topic'{% endif %}
    {% if cur_backend == 'email' %}, 'ch-smtp-host', 'ch-smtp-port', 'ch-smtp-user', 'ch-smtp-pass', 'ch-mail-from', 'ch-mail-to', 'ch-subject-prefix'{% endif %}
  ];
  var ok = true;
  ids.forEach(function(id) {
    var el  = document.getElementById(id);
    var err = document.getElementById(id + '-error');
    if (!el) return;
    var valid = el.value.trim() !== '';
    el.classList.toggle('is-invalid', !valid);
    if (err) err.style.display = valid ? 'none' : 'block';
    if (!valid) ok = false;
  });
  return ok;
}
</script>
{% endblock %}