{% extends 'base/layout.html' %}
{% load form_helpers %}
{% block title %}Expiration Alerts{% endblock %}
{% block page %}
<div class="container-fluid pt-3 pb-3">
  <div class="row g-4 align-items-start">
    <div class="col-xl-8">
      <form method="post" class="card">
        {% csrf_token %}
        <div class="card-header"><h2 class="mb-0">Expiration Alerts</h2></div>
        <div class="card-body p-4">
          {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}

          <section class="mb-4">
            <div class="text-uppercase text-secondary small fw-semibold mb-3">Alert Policy</div>
            {% render_field form.check_interval_minutes %}
            {% render_field form.alert_repeat_mode %}
            {% render_field form.alert_on_expired_certificates %}
          </section>

          <div class="card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between">
              <h3 class="mb-0"><i class="mdi mdi-email-outline me-1"></i> Email</h3>
              {% if config and config.email_last_test_at %}
                {% if config.email_last_test_success %}<span class="badge text-bg-success">Last test successful</span>{% else %}<span class="badge text-bg-danger">Last test failed</span>{% endif %}
              {% endif %}
            </div>
            <div class="card-body p-4">
              {% render_field form.email_enabled %}
              <div id="email-settings">
                <div class="text-uppercase text-secondary small fw-semibold mt-4 mb-3">SMTP Connection</div>
                {% render_field form.smtp_host %}
                {% render_field form.smtp_port %}
                {% render_field form.smtp_username %}
                {% render_field form.smtp_password %}

                <div class="text-uppercase text-secondary small fw-semibold mt-4 mb-3">SMTP Security</div>
                {% render_field form.smtp_use_tls %}
                {% render_field form.smtp_use_ssl %}

                <div class="text-uppercase text-secondary small fw-semibold mt-4 mb-3">Delivery</div>
                {% render_field form.email_from_address %}
                {% render_field form.email_recipients %}
                {% render_field form.include_superusers %}

                {% if config and config.email_last_test_at %}
                  <div class="small mt-3 {% if config.email_last_test_success %}text-success{% else %}text-danger{% endif %}">{{ config.email_last_test_at }} — {{ config.email_last_test_message }}</div>
                {% endif %}
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
              <h3 class="mb-0"><i class="mdi mdi-webhook me-1"></i> Webhook</h3>
              {% if config and config.webhook_last_test_at %}
                {% if config.webhook_last_test_success %}<span class="badge text-bg-success">Last test successful</span>{% else %}<span class="badge text-bg-danger">Last test failed</span>{% endif %}
              {% endif %}
            </div>
            <div class="card-body p-4">
              {% render_field form.webhook_enabled %}
              <div id="webhook-settings">
                <div class="text-uppercase text-secondary small fw-semibold mt-4 mb-3">Connection</div>
                {% render_field form.webhook_url %}
                {% render_field form.webhook_bearer_token %}

                <div class="text-uppercase text-secondary small fw-semibold mt-4 mb-3">Options</div>
                {% render_field form.webhook_allow_http %}
                {% render_field form.webhook_ignore_tls_verification %}

                {% if config and config.webhook_last_test_at %}
                  <div class="small mt-3 {% if config.webhook_last_test_success %}text-success{% else %}text-danger{% endif %}">{{ config.webhook_last_test_at }} — {{ config.webhook_last_test_message }}</div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>

        <div class="card-footer d-flex flex-wrap gap-2 justify-content-end">
          <button type="submit" name="_action" value="test_email" class="btn btn-outline-primary"><i class="mdi mdi-email-check-outline"></i> Test Email</button>
          <button type="submit" name="_action" value="test_webhook" class="btn btn-outline-primary"><i class="mdi mdi-webhook"></i> Test Webhook</button>
          <button type="submit" name="_action" value="save" class="btn btn-primary"><i class="mdi mdi-content-save-outline"></i> Save</button>
        </div>
      </form>
    </div>

    <div class="col-xl-4">
      <div class="card mb-4">
        <div class="card-header"><h3 class="mb-0">Worker Status</h3></div>
        <div class="card-body">
          {% if config and config.last_check_at %}
            <div class="d-flex align-items-center gap-2 mb-2">
              {% if config.last_check_success %}<span class="badge text-bg-success">OK</span>{% else %}<span class="badge text-bg-danger">Error</span>{% endif %}
              <span>{{ config.last_check_at }}</span>
            </div>
            <div class="small text-secondary">{{ config.last_check_message }}</div>
          {% else %}<span class="text-secondary">No worker check has run yet.</span>{% endif %}
        </div>
      </div>

      <div class="card">
        <div class="card-header"><h3 class="mb-0">Recent Deliveries</h3></div>
        <div class="table-responsive">
          <table class="table table-vcenter mb-0">
            <thead><tr><th>Certificate</th><th>Method</th><th>Result</th><th>Attempts</th></tr></thead>
            <tbody>
              {% for event in recent_events %}
                <tr>
                  <td><a href="{{ event.certificate.get_absolute_url }}">{{ event.certificate }}</a><div class="small text-secondary">{{ event.last_attempt_at }}</div></td>
                  <td>{{ event.get_method_display }}</td>
                  <td>{% if event.success %}<span class="badge text-bg-success">Sent</span>{% else %}<span class="badge text-bg-danger" title="{{ event.message }}">Failed</span>{% endif %}</td>
                  <td>{{ event.attempt_count }}</td>
                </tr>
              {% empty %}<tr><td colspan="4" class="text-center text-secondary py-4">No deliveries yet.</td></tr>{% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  function bindToggle(id, targetId) {
    const input = document.getElementById(id);
    const target = document.getElementById(targetId);
    if (!input || !target) return;
    function refresh() { target.style.display = input.checked ? '' : 'none'; }
    input.addEventListener('change', refresh);
    refresh();
  }
  bindToggle('id_email_enabled', 'email-settings');
  bindToggle('id_webhook_enabled', 'webhook-settings');
});
</script>
{% endblock %}