{#
  core/ui/templates/partials/notify_card.html
  Benachrichtigungs-Karte auf der Einstellungsseite.
  Zeigt Status, Konfigurationsübersicht, Test-Button und Einstellungs-Button.
  Wird eingebunden von settings/partials/tab.html wenn module_has_settings('notify').
#}

{# Aktuelle Einstellungswerte aus der Registry lesen #}
{% set notify_enabled = settings.get('module.notify.enabled', false) %}
{% set notify_backend = settings.get('module.notify.backend', 'ntfy') %}
{% set notify_topic   = settings.get('module.notify.ntfy_topic', '') %}
{% set notify_url     = settings.get('module.notify.ntfy_url', 'https://ntfy.sh') %}
{% set notify_events  = settings.get('module.notify.events', 'error,warning') %}

{% set events_labels = {
    'error':                  'Nur Fehler',
    'error,warning':          'Fehler & Warnungen',
    'error,warning,success':  'Fehler, Warnungen & Erfolge',
    'all':                    'Alle'
} %}

<div class="section-top-space">

  <div class="settings-section-label">
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
      <path d="M13.73 21a2 2 0 01-3.46 0"/>
    </svg>
    Benachrichtigungen
  </div>

  <div class="ds-card on">
    <div class="card-body" style="padding:14px 16px;">
      <div class="flex-between-wrap">

        {# ── Status + Konfigurationsübersicht ── #}
        <div class="inline-cluster-wrap">

          {# Aktiv/Inaktiv #}
          <div class="status-indicator {{ 'is-active' if notify_enabled else 'is-inactive' }}">
            {% if notify_enabled %}
            <span class="status-dot" style="background:#4ade80;"></span>
            <span>Aktiv</span>
            {% else %}
            <span class="status-dot" style="background:var(--text-3);"></span>
            <span>Deaktiviert</span>
            {% endif %}
          </div>

          {% if notify_enabled %}
          {# Backend + Topic #}
          <div class="mono-inline inline-cluster" style="gap:5px;">
            <span>{{ notify_backend }}</span>
            {% if notify_topic %}
            <span style="color:var(--text-3);">→</span>
            <span>{{ notify_url }}/{{ notify_topic }}</span>
            {% else %}
            <span style="color:var(--err); font-family:var(--font);">(kein Topic konfiguriert)</span>
            {% endif %}
          </div>

          {# Ereignisfilter #}
          <span class="badge-pill badge-muted">
            {{ events_labels.get(notify_events, notify_events) }}
          </span>
          {% endif %}
        </div>

        {# ── Aktions-Buttons ── #}
        <div class="inline-cluster" style="gap:8px;">

          {# Test-Ergebnis wird hier per HTMX eingeblendet #}
          <span id="notify-test-result"></span>

          {% if notify_enabled %}
          <button class="btn btn-ghost btn-sm"
                  hx-post="/ui/notify/test"
                  hx-target="#notify-test-result"
                  hx-swap="innerHTML"
                  title="Test-Benachrichtigung senden">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
              <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
              <path d="M13.73 21a2 2 0 01-3.46 0"/>
            </svg>
            Test senden
          </button>
          {% endif %}

          <button class="btn btn-ghost btn-sm"
                  hx-get="/ui/notify/settings"
                  hx-target="body"
                  hx-swap="beforeend"
                  title="Benachrichtigungen konfigurieren">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83
                       2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33
                       1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09
                       A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06
                       a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15
                       a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09
                       A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06
                       a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68
                       a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09
                       a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06
                       a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9
                       a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09
                       a1.65 1.65 0 00-1.51 1z"/>
            </svg>
            Konfigurieren
          </button>
        </div>
      </div>
    </div>
  </div>

</div>