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

  Variablen:
    job          – bestehender Job-Dict (Edit) oder None (Create)
    job_id       – ID des Jobs (Edit) oder None (Create)
    title        – Dialog-Titel
    submit_url   – POST-Ziel
    all_events   – Liste von (key, label, color) aus schema.py
    all_sources  – Dict {key: label} der registrierten Quellen
    all_channels – Dict {ch_id: ch_dict} der verfügbaren Kanäle
#}
{% extends "dialog_form.html" %}
{% from "partials/components/ui_macros.html" import form_select, form_input %}

{% set is_edit = job is not none %}
{% set v = job or {} %}
{% set sel_events  = v.get('events')  or ['error', 'warning'] %}
{% set sel_sources = v.get('sources') or [] %}
{% set cur_channel = v.get('channel_id', '') %}

{% block dialog_width %}540{% endblock %}
{% block form_id %}job-modal-form{% endblock %}
{% block form_action %}{{ submit_url }}{% endblock %}
{% block form_style %}display:flex; flex-direction:column; gap:16px;{% endblock %}
{% block form_attrs %}onsubmit="return jobModalValidate(this)"{% endblock %}

{% block dialog_body %}
  <div class="form-group">
    <label class="form-label">Name <span class="required-mark">*</span></label>
    {%- set _attrs -%}
    id="job-name" oninput="this.classList.remove('is-invalid'); var _e=document.getElementById(this.id+'-error'); if(_e)_e.style.display='none';"
    {%- endset -%}
    {{ form_input('label', v.get('label', ''), placeholder='z. B. Server-Fehler → ntfy', attrs=_attrs) }}
    <span id="job-name-error" class="form-error" style="display:none;">Bitte einen Namen eingeben.</span>
  </div>

  <div class="form-group">
    <label class="form-label">Kanal <span class="required-mark">*</span></label>
    {% if all_channels %}
      {% call form_select('channel_id', required=True,
                          attrs='id="job-channel" onchange="this.classList.remove(\'is-invalid\'); var _e=document.getElementById(this.id+\'-error\'); if(_e)_e.style.display=\'none\';"') %}
        <option value="" {{ 'selected' if not cur_channel else '' }}>– Kanal wählen –</option>
        {% for ch_id, ch in all_channels.items() %}
          <option value="{{ ch_id }}" {{ 'selected' if ch_id == cur_channel else '' }}>
            {{ ch.get('label') or ch_id }}
          </option>
        {% endfor %}
      {% endcall %}
      <span id="job-channel-error" class="form-error" style="display:none;">Bitte einen Kanal auswählen.</span>
    {% else %}
      <div style="padding:10px 14px; border-radius:var(--rad);
                  background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.35);
                  font-size:13px; color:#fbbf24;">
        Noch kein Kanal angelegt – bitte zuerst einen Kanal erstellen.
      </div>
    {% endif %}
  </div>

  <div class="form-group">
    <label class="form-label">Ereignisse <span class="required-mark">*</span></label>
    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;">
      {% for ev_key, ev_label, ev_color in all_events %}
      {% set active = ev_key in sel_events %}
      <label style="cursor:pointer; display:flex; align-items:center;">
        <input type="checkbox" name="events" value="{{ ev_key }}"
               style="display:none;"
               {{ 'checked' if active else '' }}
               onchange="var s=this.nextElementSibling;
                 s.style.background=this.checked?'{{ ev_color }}22':'var(--bg-2)';
                 s.style.color=this.checked?'{{ ev_color }}':'var(--text-3)';
                 s.style.borderColor=this.checked?'{{ ev_color }}88':'var(--border)';
                 document.getElementById('job-ev-error').style.display='none';">
        <span style="font-size:12px; font-weight:600; padding:4px 13px;
                     border-radius:99px; border:1px solid; user-select:none; transition:all .15s ease;
                     background:{{ ev_color + '22' if active else 'var(--bg-2)' }};
                     color:{{ ev_color if active else 'var(--text-3)' }};
                     border-color:{{ ev_color + '88' if active else 'var(--border)' }};">
          {{ ev_label }}
        </span>
      </label>
      {% endfor %}
    </div>
    <span id="job-ev-error" class="form-error" style="display:none;">Bitte mindestens ein Ereignis auswählen.</span>
  </div>

  {% set has_sources = all_sources or scheduler_sources %}
  {% if has_sources %}
  <div class="form-group">
    <label class="form-label">Quellen <span class="required-mark">*</span></label>

    {% if all_sources %}
    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;">
      {% for src_key, src_label in all_sources.items() %}
      {% set src_active = src_key in sel_sources %}
      <label style="cursor:pointer; display:flex; align-items:center;">
        <input type="checkbox" name="sources" value="{{ src_key }}"
               style="display:none;"
               {{ 'checked' if src_active else '' }}
               onchange="var s=this.nextElementSibling;
                 s.style.background=this.checked?'#60a5fa22':'var(--bg-2)';
                 s.style.color=this.checked?'#60a5fa':'var(--text-3)';
                 s.style.borderColor=this.checked?'#60a5fa88':'var(--border)';
                 document.getElementById('job-src-error').style.display='none';">
        <span style="font-size:12px; font-weight:600; padding:4px 13px;
                     border-radius:99px; border:1px solid; user-select:none; transition:all .15s ease;
                     background:{{ '#60a5fa22' if src_active else 'var(--bg-2)' }};
                     color:{{ '#60a5fa' if src_active else 'var(--text-3)' }};
                     border-color:{{ '#60a5fa88' if src_active else 'var(--border)' }};">
          {{ src_label }}
        </span>
      </label>
      {% endfor %}
    </div>
    {% endif %}

    {% if scheduler_sources %}
    <div style="margin-top:{{ '10px' if all_sources else '4px' }};">
      <div style="display:flex; align-items:center; gap:5px; margin-bottom:6px;">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none" style="color:var(--text-3); flex-shrink:0;"><use href="#icon-clock"></use></svg>
        <span style="font-size:11px; color:var(--text-3); font-weight:500; letter-spacing:.02em;">
          Scheduler-Jobs
        </span>
      </div>
      <div style="display:flex; flex-wrap:wrap; gap:8px;">
        {% for src_key, src_label in scheduler_sources.items() %}
        {% set src_active = src_key in sel_sources %}
        <label style="cursor:pointer; display:flex; align-items:center;">
          <input type="checkbox" name="sources" value="{{ src_key }}"
                 style="display:none;"
                 {{ 'checked' if src_active else '' }}
                 onchange="var s=this.nextElementSibling;
                   s.style.background=this.checked?'#a78bfa22':'var(--bg-2)';
                   s.style.color=this.checked?'#a78bfa':'var(--text-3)';
                   s.style.borderColor=this.checked?'#a78bfa88':'var(--border)';
                   document.getElementById('job-src-error').style.display='none';">
          <span style="font-size:12px; font-weight:600; padding:4px 13px;
                       border-radius:6px; border:1px solid; user-select:none; transition:all .15s ease;
                       background:{{ '#a78bfa22' if src_active else 'var(--bg-2)' }};
                       color:{{ '#a78bfa' if src_active else 'var(--text-3)' }};
                       border-color:{{ '#a78bfa88' if src_active else 'var(--border)' }};">
            {{ src_label }}
          </span>
        </label>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <span id="job-src-error" class="form-error" style="display:none;">Bitte mindestens eine Quelle auswählen.</span>
  </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="job-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('job-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" id="job-modal-save"
            {{ 'disabled' if not all_channels else '' }}>
      {{ 'Speichern' if is_edit else 'Erstellen' }}
    </button>
  </div>
</div>
{% endblock %}

{% block dialog_scripts %}
<script>
function jobModalValidate(form) {
  var nameEl    = document.getElementById('job-name');
  var channelEl = document.getElementById('job-channel');
  var nameOk    = !nameEl    || nameEl.value.trim() !== '';
  var channelOk = !channelEl || channelEl.value !== '';
  var evOk      = form.querySelectorAll('input[name="events"]:checked').length > 0;
  var srcInputs = form.querySelectorAll('input[name="sources"]');
  var srcOk     = srcInputs.length === 0 || form.querySelectorAll('input[name="sources"]:checked').length > 0;

  if (nameEl)    nameEl.classList.toggle('is-invalid', !nameOk);
  if (channelEl) channelEl.classList.toggle('is-invalid', !channelOk);
  var nameErr    = document.getElementById('job-name-error');
  var channelErr = document.getElementById('job-channel-error');
  var evErr      = document.getElementById('job-ev-error');
  var srcErr     = document.getElementById('job-src-error');
  if (nameErr)    nameErr.style.display    = nameOk    ? 'none' : 'block';
  if (channelErr) channelErr.style.display = channelOk ? 'none' : 'block';
  if (evErr)      evErr.style.display      = evOk      ? 'none' : 'block';
  if (srcErr)     srcErr.style.display     = srcOk     ? 'none' : 'block';

  return nameOk && channelOk && evOk && srcOk;
}
</script>
{% endblock %}