{% extends "base.html" %}
{% block title %}Mail configuration{% endblock %}
{% block content %}
<div class="section-head">
  <div>
    <span class="section-tag">// console › mail server</span>
    <h1>SMTP configuration</h1>
    <p class="lead">External mail server used to dispatch alert reminders. Edits take effect immediately.</p>
  </div>
</div>

<div style="display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;">
  <section class="panel">
    <header class="panel-header"><h3>Server settings</h3></header>
    <div class="panel-body">
      <form method="post" action="{{ url_for('backoffice.mail_config') }}" class="form" novalidate>
        {{ form.csrf_token }}
        <div class="form-grid-2">
          <div style="grid-column: span 2;">
            {{ form.smtp_host.label }}{{ form.smtp_host(placeholder="smtp.example.com") }}
            {% for err in form.smtp_host.errors %}<div class="error">{{ err }}</div>{% endfor %}
          </div>
          <div>
            {{ form.smtp_port.label }}{{ form.smtp_port() }}
            {% for err in form.smtp_port.errors %}<div class="error">{{ err }}</div>{% endfor %}
          </div>
          <div>
            {{ form.smtp_encryption.label }}{{ form.smtp_encryption() }}
            <div class="help">587 → STARTTLS · 465 → SSL/TLS · 25 → none</div>
          </div>
          <div>
            {{ form.smtp_username.label }}{{ form.smtp_username(autocomplete="off") }}
          </div>
          <div>
            {{ form.smtp_password.label }}{{ form.smtp_password(autocomplete="new-password") }}
            <div class="help">Leave blank to keep the current password.</div>
          </div>
          <div>
            {{ form.smtp_from_address.label }}{{ form.smtp_from_address() }}
          </div>
          <div>
            {{ form.smtp_from_name.label }}{{ form.smtp_from_name() }}
          </div>
        </div>
        {{ form.submit(class_="btn btn-primary") }}
      </form>
    </div>
  </section>

  <section class="panel">
    <header class="panel-header"><h3>Send test email</h3></header>
    <div class="panel-body">
      <p class="muted" style="font-size: .9rem;">Confirms credentials, port, and encryption are correct.</p>
      <form method="post" action="{{ url_for('backoffice.mail_test') }}" class="form" novalidate>
        {{ test_form.csrf_token }}
        <div>{{ test_form.test_recipient.label }}{{ test_form.test_recipient(placeholder="you@example.com") }}</div>
        {{ test_form.submit(class_="btn btn-ghost btn-block") }}
      </form>
    </div>
  </section>
</div>
<style>@media (max-width: 800px) { div[style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; } }</style>
{% endblock %}