{# roundtable/templates/settings/notifications.html #}
{% extends "base.html" %}
{% block title %}Settings — Notifications — Fabled Scryer{% endblock %}
{% block content %}
{% set active_tab = "notifications" %}
{% include "settings/_tabs.html" %}

<form method="post" action="/settings/notifications/">
<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 TLS</label>
      </div>
    </div>

    <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>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>
  </div>

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

    <div class="form-group">
      <label>URL <span style="color:var(--text-muted);font-size:0.8rem;">(leave blank to disable)</span></label>
      <input type="text" name="webhook.url" value="{{ settings['webhook.url'] }}"
             placeholder="https://discord.com/api/webhooks/...">
    </div>

    <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>
    </div>
  </div>

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