{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Email Accounts" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Email Accounts" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage mailboxes, storage quotas, passwords, and mail-client access." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_create' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="mail-plus"></i><span>{% translate "Create Email Account" %}</span></a></div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Hosting" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Email" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Email Accounts" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row g-3 mb-4"
         id="emailSummary"
         aria-label="{% translate 'Email summary' %}">
        <div class="col-6 col-xl-3">
            <div class="eenos-card eenos-summary-card h-100">
                <div class="eenos-summary-card-icon">
                    <i data-lucide="mail"></i>
                </div>
                <div class="eenos-summary-card-content">
                    <div class="eenos-summary-card-value">{{ email_summary.accounts|default:0 }}</div>
                    <div class="eenos-summary-card-label">{% translate "Accounts" %}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="eenos-card eenos-summary-card h-100">
                <div class="eenos-summary-card-icon">
                    <i data-lucide="forward"></i>
                </div>
                <div class="eenos-summary-card-content">
                    <div class="eenos-summary-card-value">{{ email_summary.forwarders|default:0 }}</div>
                    <div class="eenos-summary-card-label">{% translate "Forwarders" %}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="eenos-card eenos-summary-card h-100">
                <div class="eenos-summary-card-icon">
                    <i data-lucide="users"></i>
                </div>
                <div class="eenos-summary-card-content">
                    <div class="eenos-summary-card-value">{{ email_summary.distributions|default:0 }}</div>
                    <div class="eenos-summary-card-label">{% translate "Distribution Lists" %}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="eenos-card eenos-summary-card h-100">
                <div class="eenos-summary-card-icon">
                    <i data-lucide="terminal"></i>
                </div>
                <div class="eenos-summary-card-content">
                    <div class="eenos-summary-card-value">{{ email_summary.pipes|default:0 }}</div>
                    <div class="eenos-summary-card-label">{% translate "Email Pipes" %}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Mailboxes" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Review mailbox status and usage, or open account management actions." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="mail"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="emailAccountsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Email Address" %}</th>
                        <th>{% translate "Status" %}</th>
                        <th>{% translate "Storage Usage" %}</th>
                        <th>{% translate "Tools" %}</th>
                        <th>{% translate "Access" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="emailActionForm" class="eenos-form" data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" id="emailActionMarker" value="yes"><input type="hidden" name="muser" id="actionUser"><input type="hidden" name="mdomain" id="actionDomain"><input type="hidden" name="action" id="actionStatus"><input type="hidden" name="password" id="actionPassword"><input type="hidden" name="quota" id="actionQuota">
    <div class="modal fade"
         id="emailActionModal"
         tabindex="-1"
         aria-labelledby="emailActionTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                            id="emailActionTitle">
                            <i id="emailActionIcon" data-lucide="settings"></i><span id="emailActionTitleText"></span>
                        </h2>
                        <div class="small text-muted mt-1" id="emailActionSubtitle"></div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="mail"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Email account" %}</div>
                            <div class="eenos-modal-info-value" id="emailActionAddress"></div>
                        </div>
                    </div>
                    <div id="passwordFields" class="d-none">
                        <label class="form-label" for="newEmailPassword">{% translate "New Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group email-password-input-group">
                                <div class="eenos-password-control">
                                    <input type="password"
                                           id="newEmailPassword"
                                           class="form-control form-control-sm eenos-password-input"
                                           required
                                           minlength="8"
                                           autocomplete="new-password"
                                           placeholder="{% translate 'Enter a new password' %}"
                                           data-parsley-required-message="{% translate 'Please enter a new email password.' %}"
                                           data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}">
                                </div>
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary eenos-password-toggle"
                                        title="{% translate 'Show password' %}"
                                        aria-label="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-sm 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%"></div>
                                </div>
                                <small class="eenos-password-strength-text text-muted"></small>
                            </div>
                        </div>
                    </div>
                    <div id="quotaFields" class="d-none"><label class="form-label" for="newEmailQuota">{% translate "New Mailbox Quota" %}</label><div class="input-group"><input type="number"
       id="newEmailQuota"
       class="form-control"
       min="1"
       required><span class="input-group-text">MB</span></div><div class="form-check mt-2"><input type="checkbox" id="newQuotaUnlimited" class="form-check-input"><label for="newQuotaUnlimited" class="form-check-label">{% translate "Unlimited quota" %}</label></div><div id="quotaUnchanged" class="form-text text-danger d-none">{% translate "Choose a quota different from the current value." %}</div></div>
                    <div id="actionNotice" class="eenos-notice eenos-notice-warning mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong id="actionNoticeTitle"></strong>
                            <div id="actionNoticeText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" id="confirmEmailAction" class="btn btn-primary"><i data-lucide="check"></i><span id="confirmEmailActionText">{% translate "Confirm" %}</span></button>
                </div>
            </div>
        </div>
    </div>
    </form>
    <div class="modal fade"
         id="connectDeviceModal"
         tabindex="-1"
         aria-labelledby="connectDeviceTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                            id="connectDeviceTitle"><i data-lucide="smartphone"></i>{% translate "Connect a Mail Client" %}</h2>
                        <div class="small text-muted mt-1" id="connectEmail"></div>
                    </div>
                    <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-info mb-4">
                        <i data-lucide="info"></i>
                        <div>{% translate "Use the full email address as the username and the same mailbox password for incoming and outgoing mail. SSL/TLS connections are recommended." %}</div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="eenos-card h-100">
                                <h3 class="h6">{% translate "Incoming Mail" %}</h3>
                                <dl class="row mb-0">
                                    <dt class="col-5">{% translate "Server" %}</dt>
                                    <dd class="col-7 connectServer">
                                    </dd>
                                    <dt class="col-5">{% translate "Username" %}</dt>
                                    <dd class="col-7 connectUsername font-monospace text-break">
                                    </dd>
                                    <dt class="col-5">{% translate "Password" %}</dt>
                                    <dd class="col-7">
                                        {% translate "Mailbox password" %}
                                    </dd>
                                    <dt class="col-5">IMAP SSL/TLS</dt>
                                    <dd class="col-7">
                                        993
                                    </dd>
                                    <dt class="col-5">POP3 SSL/TLS</dt>
                                    <dd class="col-7">
                                        995
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="eenos-card h-100">
                                <h3 class="h6">{% translate "Outgoing Mail" %}</h3>
                                <dl class="row mb-0">
                                    <dt class="col-5">{% translate "Server" %}</dt>
                                    <dd class="col-7 connectServer">
                                    </dd>
                                    <dt class="col-5">{% translate "Username" %}</dt>
                                    <dd class="col-7 connectUsername font-monospace text-break">
                                    </dd>
                                    <dt class="col-5">{% translate "Password" %}</dt>
                                    <dd class="col-7">
                                        {% translate "Mailbox password" %}
                                    </dd>
                                    <dt class="col-5">SMTP SSL/TLS</dt>
                                    <dd class="col-7">
                                        465
                                    </dd>
                                    <dt class="col-5">SMTP STARTTLS</dt>
                                    <dd class="col-7">
                                        587
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Close" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
(function ($) {
"use strict";
$(function () {
    let selected = null;
    let selectedAction = "";
    let currentQuotaMb = 0;
    const actionModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("emailActionModal"));
    const connectModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("connectDeviceModal"));
    const esc = value => $("<div>").text(value == null ? "" : value).html();
    const button = (icon, title, action, row, color) => '<button type="button" class="btn btn-sm btn-outline-' + color + ' email-action" data-action="' + action + '" data-row="' + encodeURIComponent(JSON.stringify(row)) + '" title="' + esc(title) + '" aria-label="' + esc(title) + '"><i data-lucide="' + icon + '"></i></button>';
    const table = $("#emailAccountsTable").DataTable({
        processing: true,
        ajax: {url: "{% url 'email_accounts_data' %}", dataSrc: "data"}, pageLength: 25, order: [[0, "asc"]], language: {lengthMenu: "{% translate '_MENU_ Rows per page' %}", loadingRecords: "&nbsp;", processing: "{% translate 'Loading...' %}", emptyTable: "{% translate 'No email accounts have been configured.' %}", zeroRecords: "{% translate 'No matching email accounts found.' %}"}, responsive: {details: {renderer: DataTable.Responsive.renderer.listHiddenNodes()}},
        columns: [
            {data: "email", responsivePriority: 1, className: "text-nowrap", render: (email, type) => type === "display" ? '<a href="mailto:' + esc(email) + '" class="d-inline-flex align-items-center gap-1"><i data-lucide="mail"></i><span>' + esc(email) + '</span></a>' : email},
            {data: "status", responsivePriority: 2, className: "text-nowrap", render: (status, type, row) => {if(type !== "display") return status; const badge = row.is_suspended ? '<span class="badge eenos-badge-warning">{% translate "Suspended" %}</span>' : '<span class="badge eenos-badge-success">{% translate "Active" %}</span>'; const action = row.is_suspended ? button("play", "{% translate 'Unsuspend email account' %}", "unsuspend", row, "success") : button("pause", "{% translate 'Suspend email account' %}", "suspend", row, "warning"); return '<div class="d-inline-flex align-items-center gap-2">' + badge + '<div class="eenos-dt-actions">' + action + '</div></div>'; }},
            {data: "quota_usage", responsivePriority: 3, render: (usage, type, row) => {if(type !== "display") return usage; const color = usage >= 95 ? "danger" : usage >= 80 ? "warning" : usage >= 50 ? "info" : "success"; return '<div style="min-width:12rem"><div class="small mb-1">' + esc(row.disk_usage) + ' / ' + esc(row.quota) + ' (' + usage + '%)</div><div class="progress" style="height:6px"><div class="progress-bar bg-' + color + '" style="width:' + usage + '%" role="progressbar" aria-valuenow="' + usage + '" aria-valuemin="0" aria-valuemax="100"></div></div></div>'; }},
            {data: null, orderable: false, searchable: false, responsivePriority: 4, className: "text-nowrap", render: (data, type, row) => type === "display" ? '<div class="eenos-dt-actions">' + button("key-round", "{% translate 'Change password' %}", "password", row, "primary") + button("hard-drive", "{% translate 'Change quota' %}", "quota", row, "secondary") + button("trash-2", "{% translate 'Delete email account' %}", "delete", row, "danger") + '</div>' : ""},
            {data: null, orderable: false, searchable: false, responsivePriority: 5, width: "250px", className: "text-nowrap", render: (data, type, row) => type === "display" ? '<div class="eenos-dt-actions justify-content-start flex-nowrap"><a class="btn btn-sm btn-outline-primary text-nowrap" href="' + esc(row.webmail_url) + '" target="_blank" rel="noopener" title="{% translate 'Open Webmail' %}"><i data-lucide="mail-open"></i><span>{% translate 'Open Webmail' %}</span></a><button type="button" class="btn btn-sm btn-outline-secondary text-nowrap email-action" data-action="connect" data-row="' + encodeURIComponent(JSON.stringify(row)) + '" title="{% translate 'Connect Device' %}"><i data-lucide="smartphone"></i><span>{% translate 'Connect Device' %}</span></button></div>' : ""}
        ], drawCallback: () => lucide.createIcons()
    });
    table.on("responsive-display", () => lucide.createIcons());
    $(document).on("click", ".email-action", function () {
        selected = JSON.parse(decodeURIComponent(this.dataset.row)); selectedAction = this.dataset.action;
        if (selectedAction === "connect") {$("#connectEmail,.connectUsername").text(selected.email); $(".connectServer").text("mail." + selected.domain + " / " + selected.domain); connectModal.show(); return;}
        $("#passwordFields,#quotaFields").addClass("d-none"); $("#newEmailPassword").parsley().reset(); $("#actionNotice").removeClass("eenos-notice-danger eenos-notice-info").addClass("eenos-notice-warning"); $("#emailActionAddress").text(selected.email); $("#newEmailPassword").val("");
        const settings = {
            suspend: ["{% translate 'Suspend Email Account' %}", "{% translate 'Suspend' %}", "{% translate 'Incoming authentication for this mailbox will be disabled until it is unsuspended.' %}"],
            unsuspend: ["{% translate 'Unsuspend Email Account' %}", "{% translate 'Unsuspend' %}", "{% translate 'Mailbox authentication will be restored.' %}"],
            password: ["{% translate 'Change Email Password' %}", "{% translate 'Save Password' %}", "{% translate 'Existing mail clients must be updated with the new password.' %}"],
            quota: ["{% translate 'Change Mailbox Quota' %}", "{% translate 'Save Quota' %}", "{% translate 'Set the maximum storage available to this mailbox.' %}"],
            delete: ["{% translate 'Delete Email Account' %}", "{% translate 'Delete Account' %}", "{% translate 'This permanently removes the mailbox and its stored email messages.' %}"]
        }[selectedAction];
        $("#emailActionTitleText").text(settings[0]); $("#confirmEmailActionText").text(settings[1]); $("#actionNoticeTitle").text(settings[0]); $("#actionNoticeText").text(settings[2]);
        $("#confirmEmailAction").removeClass("btn-primary btn-warning btn-danger btn-success").addClass(selectedAction === "delete" ? "btn-danger" : selectedAction === "suspend" ? "btn-warning" : selectedAction === "unsuspend" ? "btn-success" : "btn-primary");
        if(selectedAction === "password") $("#passwordFields").removeClass("d-none");
        if(selectedAction === "quota") {currentQuotaMb = selected.quota_bytes === 0 ? 0 : Math.round(selected.quota_bytes / 1048576); $("#newQuotaUnlimited").prop("checked", currentQuotaMb === 0); $("#newEmailQuota").val(currentQuotaMb || 1024); syncQuota(); $("#quotaFields").removeClass("d-none");}
        if(selectedAction === "delete") $("#actionNotice").removeClass("eenos-notice-warning").addClass("eenos-notice-danger");
        actionModal.show(); lucide.createIcons();
    });
    function syncQuota(){const unlimited=$("#newQuotaUnlimited").is(":checked"); $("#newEmailQuota").prop("disabled",unlimited).prop("required",!unlimited);}
    $("#newQuotaUnlimited").on("change", syncQuota);
    $("#confirmEmailAction").on("click", function () {
        const form=document.getElementById("emailActionForm"); $("#emailActionMarker").removeAttr("name"); $("#actionStatus,#actionPassword,#actionQuota").val("");
        $("#actionUser").val(selected.username); $("#actionDomain").val(selected.domain);
        if(selectedAction === "password") {const parsley=$("#newEmailPassword").parsley(); parsley.validate(); if(!parsley.isValid()) return; $("#emailActionMarker").attr("name","change_password"); $("#actionPassword").val($("#newEmailPassword").val());}
        else if(selectedAction === "quota") {const quota=$("#newQuotaUnlimited").is(":checked") ? 0 : Number($("#newEmailQuota").val()); if(quota === currentQuotaMb){$("#quotaUnchanged").removeClass("d-none"); return;} $("#quotaUnchanged").addClass("d-none"); $("#emailActionMarker").attr("name","change_quota"); $("#actionQuota").val(quota);}
        else if(selectedAction === "delete") $("#emailActionMarker").attr("name","delete_email");
        else {$("#emailActionMarker").attr("name","suspend_unsuspend_email"); $("#actionStatus").val(selectedAction);}
        form.submit();
    });
});
})(jQuery);
    </script>
{% endblock %}