{% extends "_base.html" %}
{% block title %}Email Settings{% endblock %}
{% block heading %}Email Notification Settings{% endblock %}
{% block extra_styles %}
<link rel="stylesheet" href="/static/css/admin.css" />
{% endblock %}
{% block content %}
<div class="form-section">
  <h2>SMTP Configuration</h2>
  <p>
    Adjust the SMTP server configuration and notification preferences used for
    contact form alerts and newsletter messaging. Values saved here override the
    environment defaults documented in <code>.env</code>.
  </p>

  <div id="message"></div>

  <form id="emailSettingsForm" class="email-settings-form">
    <div class="form-row">
      <div class="form-group">
        <label for="smtpHost">SMTP Host</label>
        <input type="text" id="smtpHost" name="smtp_host" autocomplete="off" required />
      </div>
      <div class="form-group">
        <label for="smtpPort">SMTP Port</label>
        <input type="number" id="smtpPort" name="smtp_port" min="1" max="65535" required />
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="smtpUsername">SMTP Username</label>
        <input type="text" id="smtpUsername" name="smtp_username" autocomplete="username" />
      </div>
      <div class="form-group">
        <label for="smtpPassword">SMTP Password</label>
        <input type="password" id="smtpPassword" name="smtp_password" autocomplete="current-password" />
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="smtpSender">Sender Address</label>
        <input type="email" id="smtpSender" name="smtp_sender" autocomplete="email" required />
      </div>
      <div class="form-group">
        <label for="smtpRecipients">Notification Recipients</label>
        <textarea id="smtpRecipients" name="smtp_recipients" rows="3" placeholder="comma-separated emails"></textarea>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group">
        <label class="checkbox-inline">
          <input type="checkbox" id="smtpUseTls" name="smtp_use_tls" />
          Use TLS when sending mail
        </label>
      </div>
      <div class="form-group">
        <label class="checkbox-inline">
          <input type="checkbox" id="notifyContactForm" name="notify_contact_form" />
          Email notifications for new contact submissions
        </label>
      </div>
      <div class="form-group">
        <label class="checkbox-inline">
          <input type="checkbox" id="notifyNewsletter" name="notify_newsletter_signups" />
          Confirmation emails for newsletter signups
        </label>
      </div>
    </div>

    <div class="form-group" style="margin-top: 20px;">
      <button type="submit" class="btn btn-primary">Save Email Settings</button>
    </div>
  </form>
</div>
{% endblock %}
{% block extra_scripts %}
<script src="/static/js/admin.js"></script>
{% endblock %}