{% extends "admin/onboarding/base.html" %}
{% block title %}E-Mail{% endblock %}

{% block content %}
<h1>E-Mail-Benachrichtigungen <span style="color:var(--muted); font-size:14px;">(optional)</span></h1>
<p class="lead">
  TeamRally kann dich per E-Mail benachrichtigen wenn der Server abstürzt.
  Du kannst diesen Schritt auch überspringen und SMTP später in den Einstellungen einrichten.
</p>

<form method="post" id="smtp-form">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <label for="smtp_host">SMTP-Server</label>
  <input type="text" id="smtp_host" name="smtp_host" placeholder="smtp.gmail.com">

  <label for="smtp_port">Port</label>
  <input type="number" id="smtp_port" name="smtp_port" value="587" style="width:100px">

  <label for="smtp_user">Benutzername / E-Mail-Adresse</label>
  <input type="text" id="smtp_user" name="smtp_user" placeholder="dein@gmail.com">

  <label for="smtp_password">Passwort / App-Passwort</label>
  <input type="password" id="smtp_password" name="smtp_password">

  <label for="smtp_sender">Absender-Adresse</label>
  <input type="text" id="smtp_sender" name="smtp_sender" placeholder="teamrally@dein-verein.de">

  <label for="smtp_recipient">Empfänger (deine E-Mail)</label>
  <input type="text" id="smtp_recipient" name="smtp_recipient" placeholder="admin@dein-verein.de">

  <div class="checkbox-row" style="margin-top: 12px;">
    <input type="checkbox" id="smtp_tls" name="smtp_tls" value="1" checked>
    <label for="smtp_tls">STARTTLS verwenden (empfohlen)</label>
  </div>

  <div style="margin-top: 16px; display: flex; align-items: center; gap: 12px;">
    <button type="button" class="btn btn-ghost" onclick="testSmtp()">
      Test-Mail senden
    </button>
    <span id="smtp-result" style="font-size:13px;"></span>
  </div>

  <div class="btn-row">
    <a href="{{ url_for('onboarding.step_6') }}" class="btn btn-ghost">Überspringen</a>
    <button type="submit" class="btn btn-primary">Speichern &amp; Weiter &rarr;</button>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
async function testSmtp() {
  const result = document.getElementById('smtp-result');
  result.textContent = 'Sende …';

  const payload = {
    host:      document.getElementById('smtp_host').value,
    port:      document.getElementById('smtp_port').value,
    user:      document.getElementById('smtp_user').value,
    password:  document.getElementById('smtp_password').value,
    sender:    document.getElementById('smtp_sender').value,
    recipient: document.getElementById('smtp_recipient').value,
    use_tls:   document.getElementById('smtp_tls').checked,
  };

  try {
    const resp = await fetch('/onboarding/ajax/smtp_test', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload),
    });
    const data = await resp.json();
    if (data.ok) {
      result.style.color = 'var(--success)';
      result.textContent = '✓ ' + data.msg;
    } else {
      result.style.color = 'var(--danger)';
      result.textContent = '✗ ' + data.error;
    }
  } catch (e) {
    result.style.color = 'var(--danger)';
    result.textContent = 'Fehler: ' + e.message;
  }
}
</script>
{% endblock %}