{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Create Email Pipe" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Create Email Pipe" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Route messages received by an email address to a program or script." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'email_pipe' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="workflow"></i><span>{% translate "Email Pipes" %}</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_pipe' %}">{% translate "Email Pipes" %}</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 pipes work" %}</div>
            <div class="eenos-amber-notice-text">{% translate "An email pipe passes each incoming message to the configured program or script. It does not store messages in a mailbox." %}</div>
        </div>
    </div>
    <form method="post"
          id="routeCreateForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="create_pipe" value="yes">
        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <h2 class="eenos-card-title">{% translate "Pipe Details" %}</h2>
                    <p class="eenos-card-subtitle">{% translate "Choose the receiving address and enter the full command that will process its messages." %}</p>
                </div>
                <div class="eenos-card-action-icon">
                    <i data-lucide="workflow"></i>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-xl-9">
                    <label class="form-label" for="routeName">{% translate "Address to Pipe" %}</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="processor"
                                   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 virtual address will be passed to the command below." %}</div>
                </div>
                <div class="col-12 col-lg-9 col-xl-8">
                    <label class="form-label" for="pipeCommand">{% translate "Program or Script Command" %}</label>
                    <input type="text"
                           id="pipeCommand"
                           name="pipe"
                           class="form-control font-monospace"
                           value="{{ form.pipe.value|default:'' }}"
                           autocomplete="off"
                           placeholder="/home/user/scripts/process-mail.sh"
                           required
                           data-parsley-required-message="{% translate 'Please enter the full command used to process incoming messages.' %}"
                           data-parsley-pattern='^((?![:"|\\<>]).)*$'
                           data-parsley-pattern-message="{% translate 'The command contains unsupported characters.' %}">
                    <div class="form-text">{% translate "Enter the complete command or absolute script path that should receive each message." %}</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 open-confirm d-flex align-items-center justify-content-center gap-2 w-100">
                    <i data-lucide="circle-plus"></i><span>{% translate "Create Email Pipe" %}</span>
                </button>
            </div>
            <div class="col-12 col-sm-auto">
                <a href="{% url 'email_pipe' %}"
                   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 Email Pipe" route_text="The email pipe will route incoming messages to the configured program or script." %}
{% endblock %}
{% block extra_js %}
    {% include "includes/create_mail_route_js.html" %}
{% endblock %}