{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Mailman Settings" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Mailman Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure list administration, request retention, authentication checks, and outbound mail delivery." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto d-sm-flex gap-2">
            <button type="button"
                    class="btn btn-outline-secondary btn-sm text-nowrap mm-command"
                    data-action="restart_ui"><i data-lucide="monitor"></i>{% translate "Restart Web UI" %}</button>
            <button type="button"
                    class="btn btn-outline-warning btn-sm text-nowrap mm-command"
                    data-action="restart"><i data-lucide="refresh-cw"></i>{% translate "Restart Mailman" %}</button>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Mail Services" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'mm_settings' %}">Mailman</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Settings" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post"
          id="mailmanSettingsForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="savesettings" value="yes">
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "List Administration" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Set the service identity, request retention periods, and sender-authentication policy." %}</div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-lg-6">
                    <label for="site_owner" class="form-label">{% translate "Site Owner Email" %}</label>
                    <input type="email"
                           class="form-control"
                           id="site_owner"
                           name="site_owner"
                           value="{{ settings.site_owner|default:'list@localhost.com' }}"
                           required
                           data-parsley-required-message="{% translate 'Enter the Mailman site owner email address.' %}"
                           data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
                    <div class="form-text">{% translate "Mailman uses this address as the sender for administrative messages." %}</div>
                </div>
                <div class="col-12 col-md-4 col-lg-2">
                    <label for="pending_request_life" class="form-label">{% translate "Pending Requests" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="pending_request_life"
                               name="pending_request_life"
                               value="{{ settings.pending_request_life|default:'3' }}"
                               min="1"
                               required
                               data-parsley-required-message="{% translate 'Enter the pending request lifetime.' %}"
                               data-parsley-min-message="{% translate 'The lifetime must be at least one day.' %}">
                        <span class="input-group-text">{% translate "days" %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-4 col-lg-2">
                    <label for="moderator_request_life" class="form-label">{% translate "Moderator Requests" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="moderator_request_life"
                               name="moderator_request_life"
                               value="{{ settings.moderator_request_life|default:'180' }}"
                               min="1"
                               required
                               data-parsley-required-message="{% translate 'Enter the moderator request lifetime.' %}"
                               data-parsley-min-message="{% translate 'The lifetime must be at least one day.' %}">
                        <span class="input-group-text">{% translate "days" %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-4 col-lg-2">
                    <label for="cache_life" class="form-label">{% translate "Cache Lifetime" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="cache_life"
                               name="cache_life"
                               value="{{ settings.cache_life|default:'7' }}"
                               min="1"
                               required
                               data-parsley-required-message="{% translate 'Enter the cache lifetime.' %}"
                               data-parsley-min-message="{% translate 'The lifetime must be at least one day.' %}">
                        <span class="input-group-text">{% translate "days" %}</span>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="border rounded p-3 h-100 d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <label for="dmarc_switch" class="form-label mb-1">{% translate "DMARC Verification" %}</label>
                            <span class="badge text-bg-success ms-2">{% translate "Recommended" %}</span>
                            <div class="form-text mt-0">{% translate "Verify the DMARC policy of message sender domains." %}</div>
                        </div>
                        <div class="form-check form-switch mt-1">
                            <input type="hidden"
                                   name="dmarc"
                                   id="dmarc"
                                   value="{% if settings.dmarc == 'no' %}no{% else %}yes{% endif %}"><input class="form-check-input mm-setting-switch"
       type="checkbox"
       role="switch"
       id="dmarc_switch"
       data-value-target="#dmarc"
       {% if settings.dmarc != 'no' %}checked{% endif %}>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="border rounded p-3 h-100 d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <label for="dkim_switch" class="form-label mb-1">{% translate "DKIM Verification" %}</label>
                            <span class="badge text-bg-success ms-2">{% translate "Recommended" %}</span>
                            <div class="form-text mt-0">{% translate "Verify DKIM signatures supplied by message senders." %}</div>
                        </div>
                        <div class="form-check form-switch mt-1">
                            <input type="hidden"
                                   name="dkim"
                                   id="dkim"
                                   value="{% if settings.dkim == 'no' %}no{% else %}yes{% endif %}"><input class="form-check-input mm-setting-switch"
       type="checkbox"
       role="switch"
       id="dkim_switch"
       data-value-target="#dkim"
       {% if settings.dkim != 'no' %}checked{% endif %}>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "Outbound SMTP" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Configure the mail transport agent Mailman uses to deliver list messages." %}</div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-md-8">
                    <label for="smtp_host" class="form-label">{% translate "SMTP Host" %}</label>
                    <input type="text"
                           class="form-control"
                           id="smtp_host"
                           name="smtp_host"
                           value="{{ settings.smtp_host|default:'localhost' }}"
                           required
                           data-parsley-required-message="{% translate 'Enter the SMTP server hostname or IP address.' %}">
                </div>
                <div class="col-12 col-md-4">
                    <label for="smtp_port" class="form-label">{% translate "SMTP Port" %}</label>
                    <input type="number"
                           class="form-control"
                           id="smtp_port"
                           name="smtp_port"
                           value="{{ settings.smtp_port|default:'25' }}"
                           min="25"
                           max="65535"
                           required
                           data-parsley-required-message="{% translate 'Enter the SMTP server port.' %}"
                           data-parsley-min-message="{% translate 'The SMTP port must be 25 or higher.' %}"
                           data-parsley-max-message="{% translate 'The SMTP port cannot exceed 65535.' %}">
                </div>
                <div class="col-12 col-md-6"><label for="smtp_user" class="form-label">{% translate "SMTP Username" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label><input type="text"
       class="form-control"
       id="smtp_user"
       name="smtp_user"
       value="{{ settings.smtp_user|default:'' }}"
       autocomplete="username"><div class="form-text">{% translate "Leave empty when the SMTP server does not require authentication." %}</div></div>
                <div class="col-12 col-md-6">
                    <label for="smtp_pass" class="form-label">{% translate "SMTP Password" %} <span class="text-muted fw-normal">({% translate "optional" %})</span></label>
                    <div class="eenos-password-generator">
                        <div class="input-group">
                            <input type="password"
                                   class="form-control eenos-password-input"
                                   id="smtp_pass"
                                   name="smtp_pass"
                                   value="{{ settings.smtp_pass|default:'' }}"
                                   autocomplete="new-password"><button class="btn btn-outline-secondary eenos-password-toggle"
        type="button"
        title="{% translate 'Show password' %}"
        aria-label="{% translate 'Show password' %}">
                                <i data-lucide="eye"></i>
                            </button>
                            <button type="button"
                                    class="btn btn-outline-primary eenos-password-generate"
                                    title="{% translate 'Generate secure password' %}"
                                    aria-label="{% translate 'Generate secure password' %}">
                                <i data-lucide="wand-sparkles"></i><span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                            </button>
                        </div>
                        <div class="eenos-password-strength mt-2">
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar eenos-password-strength-progress"
                                     role="progressbar"
                                     style="width: 0%"
                                     aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <small class="eenos-password-strength-text text-muted d-block mt-2"></small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <label for="max_recipients" class="form-label">{% translate "Maximum Recipients per Connection" %}</label>
                    <input type="number"
                           class="form-control"
                           id="max_recipients"
                           name="max_recipients"
                           value="{{ settings.max_recipients|default:'500' }}"
                           min="0"
                           required
                           data-parsley-required-message="{% translate 'Enter the maximum recipients per SMTP connection.' %}"
                           data-parsley-min-message="{% translate 'The recipient limit cannot be negative.' %}">
                    <div class="form-text">{% translate "Use 0 for no recipient limit." %}</div>
                </div>
            </div>
        </div>
        <div class="d-flex gap-2 mb-4">
            <button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Settings" %}</button><button type="button"
        class="btn btn-outline-secondary mm-command"
        data-action="reset"><i data-lucide="rotate-ccw"></i>{% translate "Reset to Default" %}</button>
        </div>
    </form>
    <form method="post" id="mailmanCommandForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="reset" id="mmReset" disabled><input type="hidden" name="restart" id="mmRestart" disabled><input type="hidden" name="restart_ui" id="mmRestartUi" disabled>
    </form>
    <div class="modal fade"
         id="mailmanConfirmModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="mmConfirmTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title" id="mmConfirmHeading"></div>
                            <div class="eenos-notice-text" id="mmConfirmText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-warning" id="confirmMailmanCommand"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).on("change", ".mm-setting-switch", function () {
                $($(this).data("value-target")).val(this.checked ? "yes" : "no");
            });

            const messages = {
                reset: { title: "{% translate 'Reset Mailman Settings' %}", heading: "{% translate 'Restore default configuration?' %}", text: "{% translate 'Your current Mailman settings will be replaced with the server defaults.' %}", button: "{% translate 'Reset Settings' %}" },
                restart: { title: "{% translate 'Restart Mailman' %}", heading: "{% translate 'Restart the Mailman service?' %}", text: "{% translate 'Mailing-list processing may be briefly interrupted while the service restarts.' %}", button: "{% translate 'Restart Mailman' %}" },
                restart_ui: { title: "{% translate 'Restart Mailman Web UI' %}", heading: "{% translate 'Restart the administration interface?' %}", text: "{% translate 'The Mailman web interface may be briefly unavailable during the restart.' %}", button: "{% translate 'Restart Web UI' %}" }
            };
            let action = null;
            const modalElement = document.getElementById("mailmanConfirmModal");
            const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

            $(document).on("click", ".mm-command", function () {
                action = $(this).data("action");
                const message = messages[action];
                $("#mmConfirmTitle").text(message.title);
                $("#mmConfirmHeading").text(message.heading);
                $("#mmConfirmText").text(message.text);
                $("#confirmMailmanCommand").text(message.button);
                modal.show();
            });
            $("#confirmMailmanCommand").on("click", function () {
                const fields = { reset: "#mmReset", restart: "#mmRestart", restart_ui: "#mmRestartUi" };
                $(fields[action]).prop("disabled", false).val("yes");
                document.getElementById("mailmanCommandForm").submit();
            });
        });
    </script>
{% endblock %}