{% extends "base.html" %}
{% load i18n %}

{% block title %}{% translate "Create Distribution List" %} - Eenos{% endblock %}

{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Distribution List" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Deliver messages sent to one address to a group of recipients." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'email_distribution' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="mails"></i><span>{% translate "Distribution 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_distribution' %}">{% translate "Distribution Lists" %}</a>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current" aria-current="page">{% translate "Create" %}</span>
    </nav>

    {% include "includes/form_alerts.html" %}

    <div class="eenos-amber-notice mb-4">
        <div class="eenos-amber-notice-icon">
            <i data-lucide="info"></i>
        </div>
        <div class="eenos-amber-notice-content">
            <div class="eenos-amber-notice-title">{% translate "How distribution lists work" %}</div>
            <div class="eenos-amber-notice-text">{% translate "A distribution list is a virtual email address. Messages sent to it are delivered to every member and are not stored in a separate mailbox." %}</div>
        </div>
    </div>

    <form method="post"
          id="distributionCreateForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="create_distribution" value="yes">

        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <h2 class="eenos-card-title">{% translate "Distribution List Details" %}</h2>
                    <p class="eenos-card-subtitle">{% translate "Choose the list address and add its initial members." %}</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="distributionName">{% translate "Distribution Address" %}</label>
                    <div class="email-address-fields">
                        <div class="email-address-control">
                            <input type="text"
                                   id="distributionName"
                                   name="name"
                                   class="form-control text-end"
                                   value="{{ form.name.value|default:'' }}"
                                   autocomplete="off"
                                   placeholder="team"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter a distribution list name.' %}"
                                   data-parsley-pattern="^(?![._-])[A-Za-z0-9._%+-]{1,64}(?&lt;![._%+-])$"
                                   data-parsley-pattern-message="{% translate 'Please enter a valid distribution list name.' %}">
                        </div>
                        <span class="email-address-at" aria-hidden="true">@</span>
                        <select id="distributionDomain"
                                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 "Messages sent to this address will be delivered to every member below." %}</div>
                </div>

                <div class="col-12 col-lg-9 col-xl-8">
                    <label class="form-label" for="distributionMembers">{% translate "Member Email Addresses" %}</label>
                    <textarea id="distributionMembers"
                              name="memberlist"
                              class="form-control"
                              rows="7"
                              required
                              data-parsley-required-message="{% translate 'Please enter at least one member email address.' %}"
                              placeholder="member1@example.com&#10;member2@example.com">{{ form.memberlist.value|default:'' }}</textarea>
                    <div class="form-text">{% translate "Enter one email address per line, or separate multiple addresses with commas." %}</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"
                        class="btn btn-primary d-flex align-items-center justify-content-center gap-2 w-100"
                        id="openCreateDistribution">
                    <i data-lucide="circle-plus"></i><span>{% translate "Create Distribution List" %}</span>
                </button>
            </div>
            <div class="col-12 col-sm-auto">
                <a href="{% url 'email_distribution' %}"
                   class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2 w-100">
                    <i data-lucide="arrow-left"></i><span>{% translate "Go Back" %}</span>
                </a>
            </div>
        </div>
    </form>

    <div class="modal fade"
         id="createDistributionModal"
         tabindex="-1"
         aria-labelledby="createDistributionTitle"
         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="createDistributionTitle">
                            <i data-lucide="mails"></i>{% translate "Create Distribution List" %}
                        </h2>
                        <div class="small text-muted mt-1">{% translate "Confirm the distribution address before creating it." %}</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 "Distribution address" %}</div>
                            <div class="eenos-modal-info-value user-select-all" id="newDistributionAddress"></div>
                        </div>
                    </div>
                    <p class="small text-muted mb-0 mt-3">{% translate "Incoming messages will be forwarded to every member entered in the list." %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" id="confirmCreateDistribution" class="btn btn-primary d-flex align-items-center gap-2">
                        <i data-lucide="circle-plus"></i><span>{% translate "Create List" %}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
(function ($) {
  "use strict";
  $(function () {
    const $form = $("#distributionCreateForm");
    const modalElement = document.getElementById("createDistributionModal");
    const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

    $("#openCreateDistribution").on("click", function () {
      const validation = $form.parsley();
      validation.validate();
      if (!validation.isValid()) return;

      $("#newDistributionAddress").text(
        $("#distributionName").val() + "@" + $("#distributionDomain").val()
      );
      modal.show();
    });

    $("#confirmCreateDistribution").on("click", function () {
      modal.hide();
      document.getElementById("distributionCreateForm").submit();
    });
  });
})(jQuery);
    </script>
{% endblock %}