{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create Forwarder" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Forwarder" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Route messages received by one address to another destination." %}</div>
        </div>
        <div class="col-12 col-sm-auto"><a href="{% url 'email_forwarder' %}"
   class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="forward"></i><span>{% translate "Forwarders" %}</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_forwarder' %}">{% translate "Forwarders" %}</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 email forwarding works" %}</div>
            <div class="eenos-amber-notice-text">{% translate "A forwarder is a virtual email address. It sends incoming messages to the selected destination without storing them in a mailbox." %}</div>
        </div>
    </div>
    <form method="post"
          id="routeCreateForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="create_forwarder" value="yes">
        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <h2 class="eenos-card-title">{% translate "Forwarder Details" %}</h2>
                    <p class="eenos-card-subtitle">{% translate "Choose the receiving address and what should happen to its incoming messages." %}</p>
                </div>
                <div class="eenos-card-action-icon">
                    <i data-lucide="forward"></i>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-xl-9">
                    <label class="form-label" for="routeName">{% translate "Address to Forward" %}</label>
                    <div class="email-address-fields">
                        <div class="email-address-control">
                            <input type="text"
                                   id="routeName"
                                   name="name"
                                   class="form-control text-end"
                                   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="routeDomain"
                                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 follow the destination rule below." %}</div>
                </div>
                <div class="col-12">
                    <fieldset>
                        <legend class="form-label mb-3">{% translate "Forwarding Destination" %}</legend>
                        <div class="row g-3">
                            <div class="col-12 col-xl-8">
                                <div class="border rounded p-3">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input route-destination"
                                               type="radio"
                                               name="destination"
                                               id="destinationAddress"
                                               value="toaddress"
                                               {% if not form.destination.value or form.destination.value == 'toaddress' %}checked{% endif %}>
                                        <label class="form-check-label fw-semibold" for="destinationAddress">{% translate "Forward to another email address" %}</label>
                                        <div class="form-text">{% translate "Deliver every incoming message to an external or hosted email address." %}</div>
                                    </div>
                                    <input id="forwardEmail"
                                           type="email"
                                           name="email"
                                           class="form-control"
                                           value="{{ form.email.value|default:'' }}"
                                           autocomplete="email"
                                           placeholder="destination@example.com"
                                           data-parsley-required-message="{% translate 'Please enter the forwarding email address.' %}"
                                           data-parsley-type-message="{% translate 'Please enter a valid forwarding email address.' %}">
                                </div>
                            </div>
                            <div class="col-12 col-xl-8">
                                <div class="border rounded p-3">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input route-destination"
                                               type="radio"
                                               name="destination"
                                               id="destinationFailure"
                                               value="tofail"
                                               {% if form.destination.value == 'tofail' %}checked{% endif %}>
                                        <label class="form-check-label fw-semibold" for="destinationFailure">{% translate "Reject with an error message" %}</label>
                                        <div class="form-text">{% translate "Reject the message and return the explanation below to the sender." %}</div>
                                    </div>
                                    <input id="failureMessage"
                                           type="text"
                                           name="failmsg"
                                           class="form-control"
                                           value="{{ form.failmsg.value|default:'No Such person at this address.' }}"
                                           data-parsley-pattern='^((?![:"|/<>]).)*$'
                                           data-parsley-required-message="{% translate 'Please enter a rejection message.' %}"
                                           data-parsley-pattern-message="{% translate 'The rejection message contains unsupported characters.' %}">
                                </div>
                            </div>
                            <div class="col-12 col-xl-8"><div class="border rounded p-3"><div class="form-check mb-0"><input class="form-check-input route-destination"
       type="radio"
       name="destination"
       id="destinationAccount"
       value="tome"
       {% if form.destination.value == 'tome' %}checked{% endif %}><label class="form-check-label fw-semibold" for="destinationAccount">{% translate "Forward to my system account" %}</label><div class="form-text">{% blocktranslate with username=request.session.user %}Deliver messages to the system account {{ username }}.{% endblocktranslate %}</div></div></div></div>
                            <div class="col-12 col-xl-8">
                                <div class="border border-danger-subtle rounded p-3">
                                    <div class="form-check mb-0">
                                        <input class="form-check-input route-destination"
                                               type="radio"
                                               name="destination"
                                               id="destinationDiscard"
                                               value="tobalckhole"
                                               {% if form.destination.value == 'tobalckhole' %}checked{% endif %}>
                                        <label class="form-check-label fw-semibold" for="destinationDiscard">{% translate "Discard without a response" %}</label>
                                        <div class="form-text text-danger">{% translate "Incoming messages will be permanently discarded without notifying the sender." %}</div>
                                    </div>
                                </div>
                            </div>
                        </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"
                        class="btn btn-primary open-confirm d-flex align-items-center justify-content-center gap-2 w-100"><i data-lucide="circle-plus"></i><span>{% translate "Create Forwarder" %}</span></button>
            </div>
            <div class="col-12 col-sm-auto">
                <a href="{% url 'email_forwarder' %}"
                   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>
    {% include "includes/create_mail_route_modal.html" with route_title="Create Forwarder" route_text="The new forwarding rule will apply to messages received for this address." %}
{% endblock %}
{% block extra_js %}
    {% include "includes/create_mail_route_js.html" %}
    <script>
(function ($) {
  "use strict";
  $(function () {
    const $destination = $(".route-destination");
    const $forwardEmail = $("#forwardEmail");
    const $failureMessage = $("#failureMessage");
    function syncDestinationFields() {
      const destination = $destination.filter(":checked").val();
      const useAddress = destination === "toaddress";
      const useFailure = destination === "tofail";
      $forwardEmail.prop("disabled", !useAddress).prop("required", useAddress);
      $failureMessage.prop("disabled", !useFailure).prop("required", useFailure);
      if (!useAddress) $forwardEmail.parsley().reset();
      if (!useFailure) $failureMessage.parsley().reset();
    }
    $destination.on("change", syncDestinationFields);
    syncDestinationFields();
  });
})(jQuery);
    </script>
{% endblock %}