{# steward/templates/settings/notifications.html #}
{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}Settings — Notifications — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Notifications", "")]) }}{% endblock %}
{% block content %}
{% set active_tab = "notifications" %}
{% include "settings/_tabs.html" %}

<form method="post" action="/settings/notifications/">{{ csrf_field() }}
<div style="display:grid;gap:1.25rem;max-width:640px;">

  {# ── SMTP ──────────────────────────────────────────────────────────────── #}
  <div class="card">
    <h2 class="section-title" style="margin-bottom:1.25rem;">Email (SMTP)</h2>

    <div class="form-group">
      <label>SMTP host</label>
      <input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}"
             placeholder="mail.example.com">
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
      <div class="form-group">
        <label>Port</label>
        <input type="number" name="smtp.port" value="{{ settings['smtp.port'] }}">
      </div>
      <div class="form-group" style="display:flex;align-items:center;gap:0.5rem;padding-top:1.5rem;">
        <input type="checkbox" name="smtp.tls" id="smtp-tls"
               {% if settings['smtp.tls'] %}checked{% endif %}>
        <label for="smtp-tls" style="margin:0;">Use STARTTLS</label>
      </div>
    </div>
    <p style="font-size:0.75rem;color:var(--text-muted);margin:-0.5rem 0 1rem;">
      Port 465 always connects with implicit TLS; on other ports the box upgrades the connection with STARTTLS.</p>

    <div class="form-group">
      <label>Username</label>
      <input type="text" name="smtp.username" value="{{ settings['smtp.username'] }}"
             autocomplete="off">
    </div>

    <div class="form-group">
      <label>Password <span style="color:var(--text-muted);font-size:0.8rem;">(leave blank to keep current)</span></label>
      <input type="password" name="smtp.password" placeholder="••••••••" autocomplete="new-password">
    </div>

    <div class="form-group">
      <label>From address <span style="color:var(--text-muted);font-size:0.8rem;">(blank uses the username)</span></label>
      <input type="text" name="smtp.from" value="{{ settings['smtp.from'] }}"
             placeholder="steward@example.com">
    </div>

    <div class="form-group">
      <label>Recipients <span style="color:var(--text-muted);font-size:0.8rem;">(comma-separated)</span></label>
      <input type="text" name="smtp.recipients"
             value="{{ settings['smtp.recipients'] | join(', ') }}"
             placeholder="admin@example.com, ops@example.com">
    </div>

    <button type="button" class="btn btn-ghost" hx-post="/settings/notifications/test-email"
            hx-include="closest form" hx-target="#email-test-result" hx-swap="innerHTML">
      Send a test email</button>
    <div id="email-test-result"></div>
  </div>

  {# ── Webhook ───────────────────────────────────────────────────────────── #}
  <div class="card">
    <h2 class="section-title" style="margin-bottom:1.25rem;">Webhook</h2>

    <div class="form-group">
      <label>URL {% if webhook_host %}<span style="color:var(--text-muted);font-size:0.8rem;">(saved for {{ webhook_host }}; leave blank to keep it)</span>{% endif %}</label>
      <input type="password" name="webhook.url" autocomplete="off"
             placeholder="{% if webhook_host %}enter a new URL to replace{% else %}https://discord.com/api/webhooks/...{% endif %}">
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
        Stored encrypted and never shown again: a webhook URL usually holds its own token.</p>
    </div>
    {% if webhook_host %}
    <div class="form-group" style="display:flex;align-items:center;gap:0.5rem;">
      <input type="checkbox" name="webhook.remove" id="webhook-remove">
      <label for="webhook-remove" style="margin:0;">Remove the webhook</label>
    </div>
    {% endif %}

    <div class="form-group">
      <label>Payload template <span style="color:var(--text-muted);font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
      <textarea name="webhook.template" rows="4"
                style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
        <code>{{ '{{ alert.rule_name }}' }}</code> is escaped to sit inside a JSON string, so quotes or
        line breaks in a name can't break the body; a missing value reads "no data".
        For a bare JSON value use <code>{{ '{{ raw.value | tojson }}' }}</code> (a number, or null).
        Fields: state, rule_name, resource, metric, value, threshold, source_module, note, timestamp.</p>
    </div>

    <button type="button" class="btn btn-ghost" hx-post="/settings/notifications/test-webhook"
            hx-include="closest form" hx-target="#webhook-test-result" hx-swap="innerHTML">
      Send a test webhook</button>
    <div id="webhook-test-result"></div>
  </div>

</div>
<div style="margin-top:1rem;">
  <button type="submit" class="btn">Save</button>
</div>
</form>
{% endblock %}