{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create Email Account" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Email Account" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create a mailbox for one of the domains hosted by this account." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'email_accounts' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="mail"></i><span>{% translate "Email Accounts" %}</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 "Create Email Account" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if havemail %}
        <form method="post"
              id="emailCreateForm"
              class="eenos-form"
              data-parsley-validate>
            {% csrf_token %}
            <input type="hidden" name="create_email" value="yes">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <h2 class="eenos-card-title">{% translate "Mailbox Details" %}</h2>
                        <p class="eenos-card-subtitle">{% translate "Choose the address, password, and storage allowance for the new mailbox." %}</p>
                    </div>
                    <div class="eenos-card-action-icon">
                        <i data-lucide="mail-plus"></i>
                    </div>
                </div>
                <div class="row g-4 align-items-start">
                    <div class="col-12 col-xl-9">
                        <label class="form-label" for="emailName">{% translate "Email Name" %}</label>
                        <div class="email-address-fields">
                            <div class="email-address-control">
                                <input type="text"
                                       id="emailName"
                                       class="form-control text-end"
                                       name="name"
                                       value="{{ form.name.value|default:'' }}"
                                       autocomplete="off"
                                       placeholder="contact"
                                       required
                                       data-parsley-required-message="{% translate 'Please enter an email account name.' %}"
                                       data-parsley-pattern="^(?![._-])[A-Za-z0-9._-]{1,64}(?<![._-])$"
                                       data-parsley-pattern-message="{% translate 'Please enter a valid email account name.' %}">
                            </div>
                            <span class="email-address-at" aria-hidden="true">@</span>
                            <select id="emailDomain"
                                    class="form-select eenos-select-search"
                                    name="domain"
                                    required
                                    data-parsley-required-message="{% translate 'Please select a domain name.' %}">
                                <option value="">{% translate "Select domain" %}</option>
                                <optgroup label="{% translate 'Primary Domain' %}"><option value="{{ main_domain }}"
        {% if form.domain.value == main_domain %}selected{% endif %}>{{ main_domain }}</option></optgroup>
                                {% if addon_domains %}<optgroup label="{% translate 'Addon Domains' %}">{% for domain in addon_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                                {% if parked_domains %}<optgroup label="{% translate 'Alias Domains' %}">{% for domain in parked_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                                {% if sub_domains %}<optgroup label="{% translate 'Subdomains' %}">{% for domain in sub_domains %}<option value="{{ domain }}"
        {% if form.domain.value == domain %}selected{% endif %}>{{ domain }}</option>{% endfor %}</optgroup>{% endif %}
                            </select>
                        </div>
                        <div class="form-text">{% translate "The name and selected domain form the complete email address." %}</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="emailQuota">{% translate "Mailbox Quota" %}</label>
                        <div class="eenos-quota-row">
                            <div class="input-group eenos-quota-input">
                                <span class="input-group-text"><i data-lucide="hard-drive"></i></span>
                                <input type="number"
                                       id="emailQuota"
                                       class="form-control"
                                       name="quota"
                                       min="1"
                                       value="{{ form.quota.value|default:'1024' }}"
                                       required
                                       data-parsley-required-message="{% translate 'Please enter a mailbox quota or select Unlimited.' %}"
                                       data-parsley-min-message="{% translate 'Mailbox quota must be at least 1 MB.' %}">
                                <span class="input-group-text">MB</span>
                            </div>
                            <div class="form-check mb-0 flex-shrink-0">
                                <input type="checkbox"
                                       id="unlimitedQuota"
                                       class="form-check-input"
                                       name="quota"
                                       value="0"
                                       {% if form.quota.value|stringformat:'s' == '0' %}checked{% endif %}>
                                <label class="form-check-label" for="unlimitedQuota">{% translate "Unlimited quota" %}</label>
                            </div>
                        </div>
                    </div>
                    <div class="w-100"></div>
                    <div class="col-12 col-lg-8 col-xl-6">
                        <label class="form-label" for="emailPassword">{% translate "Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group">
                                <div class="eenos-password-control">
                                    <input type="password"
                                           id="emailPassword"
                                           class="form-control eenos-password-input"
                                           name="password"
                                           required
                                           minlength="8"
                                           autocomplete="new-password"
                                           placeholder="{% translate 'Enter a password' %}"
                                           data-parsley-required-message="{% translate 'Please enter a password for the email account.' %}"
                                           data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}">
                                </div>
                                <button type="button"
                                        class="btn 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-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"></small>
                            </div>
                        </div>
                        <div class="form-text">{% translate "Use a strong, unique password for this mailbox." %}</div>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column flex-sm-row justify-content-start gap-2 mt-3">
                <div class="col-12 col-sm-auto">
                    <button type="button"
                            id="openCreateEmailModal"
                            class="btn btn-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></button>
                </div>
            </div>
        </form>
    {% else %}
        <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">{% translate "Email account limit reached" %}</div>
                <div class="eenos-notice-text">{% translate "Remove an unused mailbox or contact your hosting provider to increase the account limit." %}</div>
            </div>
        </div>
    {% endif %}
    <div class="modal fade"
         id="createEmailModal"
         tabindex="-1"
         aria-labelledby="createEmailModalTitle"
         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="createEmailModalTitle"><i data-lucide="mail-plus"></i>{% translate "Create Email Account" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Confirm the new mailbox details." %}</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 address" %}</div>
                            <div class="eenos-modal-info-value" id="newEmailAddress"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-info mb-0">
                        <i data-lucide="info"></i>
                        <div>{% translate "The mailbox will be created with the selected quota and can be used immediately after provisioning completes." %}</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="confirmCreateEmail" class="btn btn-primary"><i data-lucide="check"></i>{% translate "Create Account" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
(function ($) {
    "use strict";
    $(function () {
        const $form = $("#emailCreateForm");
        const $quota = $("#emailQuota");
        const $unlimited = $("#unlimitedQuota");
        function syncQuota() {
            const unlimited = $unlimited.is(":checked");
            $quota.prop("disabled", unlimited).prop("required", !unlimited);
        }
        $unlimited.on("change", syncQuota);
        syncQuota();
        $("#openCreateEmailModal").on("click", function () {
            const parsley = $form.parsley();
            parsley.validate();
            if (!parsley.isValid()) return;
            $("#newEmailAddress").text($("#emailName").val().trim() + "@" + $("#emailDomain").val());
            bootstrap.Modal.getOrCreateInstance(document.getElementById("createEmailModal")).show();
        });
        $("#confirmCreateEmail").on("click", function () {
            document.getElementById("emailCreateForm").submit();
        });
    });
})(jQuery);
    </script>
{% endblock %}