{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create Mailing List" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Mailing List" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create a Mailman 3 list for group discussions and announcements." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_mailman' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="mails"></i><span>{% translate "Mailing Lists" %}</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><a href="{% url 'email_mailman' %}">{% translate "Mailing Lists" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Create" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if havmailman %}
        <form method="post"
              id="mailingListCreateForm"
              class="eenos-form"
              data-parsley-validate>
            {% csrf_token %}
            <input type="hidden" name="create_list" value="yes">
            <div class="eenos-card">
                <div class="eenos-card-header">
                    <div>
                        <h2 class="eenos-card-title">{% translate "Mailing List Details" %}</h2>
                        <p class="eenos-card-subtitle">{% translate "Configure the list address, administrator, visibility, and public description." %}</p>
                    </div>
                    <div class="eenos-card-action-icon">
                        <i data-lucide="mails"></i>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-12 col-xl-9">
                        <label class="form-label" for="mailingListAddress">{% translate "Mailing List Address" %}</label>
                        <div class="email-address-fields">
                            <div class="email-address-control">
                                <input type="text"
                                       id="mailingListAddress"
                                       name="list"
                                       class="form-control text-end"
                                       autocomplete="off"
                                       placeholder="community"
                                       required
                                       value="{{ form.list.value|default:'' }}"
                                       data-parsley-pattern="^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,62}[A-Za-z0-9])?$"
                                       data-parsley-required-message="{% translate 'Please enter a mailing list email name.' %}"
                                       data-parsley-pattern-message="{% translate 'Please enter a valid mailing list email name.' %}">
                            </div>
                            <span class="email-address-at" aria-hidden="true">@</span>
                            <select id="mailingListDomain"
                                    name="domain"
                                    class="form-select eenos-select-search"
                                    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 mailing list address." %}</div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <label class="form-label" for="mailingListName">{% translate "Mailing List Name" %}</label>
                        <input type="text"
                               id="mailingListName"
                               name="list_name"
                               class="form-control"
                               maxlength="64"
                               required
                               value="{{ form.list_name.value|default:'' }}"
                               data-parsley-required-message="{% translate 'Enter a name for the mailing list.' %}">
                    </div>
                    <div class="col-12 col-lg-6">
                        <label class="form-label" for="mailingListAdminName">{% translate "Administrator Name" %}</label>
                        <input type="text"
                               id="mailingListAdminName"
                               name="admin_name"
                               class="form-control"
                               maxlength="64"
                               required
                               value="{{ form.admin_name.value|default:'' }}"
                               data-parsley-required-message="{% translate 'Enter the mailing list administrator name.' %}">
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="mailingListDescription">{% translate "Description" %}</label>
                        <input type="text"
                               id="mailingListDescription"
                               name="list_description"
                               class="form-control"
                               maxlength="254"
                               required
                               value="{{ form.list_description.value|default:'' }}"
                               data-parsley-required-message="{% translate 'Enter a mailing list description.' %}">
                    </div>
                    <div class="col-12 col-lg-6">
                        <label class="form-label" for="mailingListAdmin">{% translate "Administrator Email" %}</label>
                        <input type="email"
                               id="mailingListAdmin"
                               name="admin"
                               class="form-control"
                               required
                               value="{{ form.admin.value|default:'' }}"
                               data-parsley-type="email"
                               data-parsley-required-message="{% translate 'Enter the mailing list administrator email.' %}"
                               data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
                    </div>
                    <div class="col-12 col-lg-6">
                        <label class="form-label" for="mailingListPassword">{% translate "Administrator Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group">
                                <div class="eenos-password-control">
                                    <input type="password"
                                           id="mailingListPassword"
                                           name="adminpass"
                                           class="form-control eenos-password-input"
                                           autocomplete="new-password"
                                           minlength="8"
                                           placeholder="{% translate 'Enter a secure password' %}"
                                           required
                                           data-parsley-required-message="{% translate 'Enter an administrator password.' %}"
                                           data-parsley-minlength-message="{% translate 'The password must contain at least 8 characters.' %}">
                                </div>
                                <button class="btn btn-outline-secondary eenos-password-toggle"
                                        type="button"
                                        aria-label="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button><button class="btn btn-outline-primary eenos-password-generate" type="button"><i data-lucide="wand-sparkles"></i>{% translate "Generate" %}</button>
                            </div>
                            <div class="eenos-password-strength mt-2">
                                <div class="progress">
                                    <div class="progress-bar eenos-password-strength-progress"></div>
                                </div>
                                <small class="eenos-password-strength-text text-muted"></small>
                            </div>
                        </div>
                        <div class="form-text">{% translate "If this administrator already exists, their current password will not be changed." %}</div>
                    </div>
                    <div class="col-12">
                        <fieldset>
                            <legend class="form-label">{% translate "List Visibility" %}</legend>
                            <div class="d-flex flex-column flex-sm-row gap-3">
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="advertised"
                                           value="public"
                                           required
                                           {% if form.advertised.value == 'public' %}checked{% endif %}>
                                    <span class="form-check-label">{% translate "Public mailing list" %}</span>
                                </label>
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="advertised"
                                           value="private"
                                           required
                                           {% if form.advertised.value != 'public' %}checked{% endif %}>
                                    <span class="form-check-label">{% translate "Private mailing list" %}</span>
                                </label>
                            </div>
                        </fieldset>
                    </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="openCreateMailingList"
                            class="btn btn-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="circle-plus"></i>{% translate "Create Mailing List" %}</button>
                </div>
            </div>
        </form>
    {% else %}
        <div class="eenos-notice eenos-notice-warning">
            <i data-lucide="circle-alert"></i>
            <div>
                <strong>{% translate "Mailing list limit reached" %}</strong>
                <div>{% translate "Your hosting plan does not allow another mailing list." %}</div>
            </div>
        </div>
    {% endif %}
    <div class="modal fade"
         id="createMailingListModal"
         tabindex="-1"
         aria-labelledby="createMailingListTitle"
         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="createMailingListTitle"><i data-lucide="mails"></i>{% translate "Create Mailing List" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Confirm the new Mailman mailing list." %}</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">
                        <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 "Mailing list address" %}</div>
                            <div class="eenos-modal-info-value" id="newMailingListAddress"></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"
        id="confirmCreateMailingList"
        class="btn btn-primary d-inline-flex align-items-center gap-2"><i data-lucide="circle-plus"></i>{% translate "Create List" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const form=$('#mailingListCreateForm');if(!form.length)return;const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('createMailingListModal'));$('#openCreateMailingList').on('click',function(){const validation=form.parsley();validation.validate();if(!validation.isValid())return;$('#newMailingListAddress').text($('#mailingListAddress').val()+'@'+$('#mailingListDomain').val());modal.show();});$('#confirmCreateMailingList').on('click',function(){document.getElementById('mailingListCreateForm').submit();});});})(jQuery);</script>{% endblock %}