{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Addon Domains" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Addon Domains" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Host additional websites under your account." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'listall_domains' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="list"></i>
                <span>{% translate "All Domains" %}</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 "Domains" %}</span>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current">{% translate "Addon Domains" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if haveaddon %}
        <form method="post" id="addonDomainForm" class="eenos-form eenos-card mb-4">
            {% csrf_token %}
            <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
                <div>
                    <h2 class="eenos-panel-title mb-1">{% translate "Add a Website" %}</h2>
                    <div class="small text-muted">{% translate "Connect another domain and choose the directory that will serve its website files." %}</div>
                </div>
                <i data-lucide="circle-plus" class="eenos-card-action-icon"></i>
            </div>
            <div class="row g-3">
                <div class="col-12 col-lg-6">
                    <label class="form-label" for="addonDomain">{% translate "Domain Name" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="globe-2"></i></span>
                        <input type="text"
                               id="addonDomain"
                               class="form-control"
                               name="domain"
                               value="{{ form.domain.value|default:'' }}"
                               placeholder="example.com"
                               required
                               data-parsley-required-message="{% translate 'Please enter a domain name.' %}"
                               data-parsley-pattern="^(([a-zA-Z0-9]|\*\.[a-zA-Z0-9])|[a-zA-Z0-9_][a-zA-Z0-9-]){0,254}[a-zA-Z0-9](?:\.[a-zA-Z0-9]{2,})+$"
                               data-parsley-pattern-message="{% translate 'Please enter a valid domain name.' %}">
                    </div>
                    <div class="form-text">{% translate "Enter the domain without http://, https://, or a path." %}</div>
                </div>
                <div class="col-12 col-lg-6">
                    <label class="form-label" for="addonRoot">{% translate "Document Root" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="home"></i><span class="ms-1">/</span></span>
                        <input type="text"
                               id="addonRoot"
                               class="form-control"
                               name="docroot"
                               value="{{ form.docroot.value|default:'' }}"
                               placeholder="example.com"
                               required
                               data-parsley-required-message="{% translate 'Please enter a document root.' %}"
                               data-parsley-pattern="^(?![\/.])[\w.\/-]{1,253}(?<![.\/])$"
                               data-parsley-pattern-message="{% translate 'Please enter a valid document root.' %}">
                    </div>
                    <div class="form-text">{% translate "Enter a path relative to your account home directory." %}</div>
                </div>
            </div>
            <div class="d-flex justify-content-start mt-4">
                <button type="submit"
                        class="btn btn-primary d-inline-flex align-items-center gap-2"
                        name="create_addon"
                        value="yes">
                    <i data-lucide="circle-plus"></i>
                    <span>{% translate "Add Website" %}</span>
                </button>
            </div>
        </form>
    {% else %}
        <div class="eenos-notice eenos-notice-warning mb-4">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "Addon domain limit reached" %}</div>
                <div class="eenos-notice-text">{% translate "Your hosting plan does not allow another addon domain. Remove an unused domain or contact your hosting provider about increasing the limit." %}</div>
            </div>
        </div>
    {% endif %}
    <div class="eenos-card">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
                <h2 class="eenos-panel-title mb-1">{% translate "Hosted Addon Domains" %}</h2>
                <div class="small text-muted">{% translate "Manage document roots, URL redirections, and addon domain removal." %}</div>
            </div>
            <i data-lucide="layers" class="eenos-card-action-icon"></i>
        </div>
        <div class="table-responsive">
            <table id="domainsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Document Root" %}</th>
                        <th>{% translate "Redirection URL" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {% include "includes/domain_actions.html" %}
{% endblock %}
{% block extra_js %}
    {% include "includes/domain_actions_js.html" %}
    <script>
$(function () {
    initDomainActions({
        docrootMarker: "addon_changeroot",
        deleteMarker: "addon_delete"
    });

    const table = $("#domainsTable").DataTable({
        processing: true,ajax: {
            url: "{% url 'addon_domains_data' %}",
            dataSrc: "data"
        },
        pageLength: 25,
        language: {lengthMenu: "{% translate "_MENU_ Rows per page" %}", loadingRecords: "&nbsp;", processing: "{% translate "Loading..." %}", emptyTable: "{% translate "No domains have been configured." %}", zeroRecords: "{% translate "No matching domains found." %}"},
        responsive: {
            details: {
                renderer: DataTable.Responsive.renderer.listHiddenNodes()
            }
        },
        order: [[0, "asc"]],
        columns: [
            {
                data: "domain",
                width: "26%",
                className: "text-nowrap",
                responsivePriority: 1,
                render: (domain, type, row) => type === "display"
                    ? '<a class="d-inline-flex align-items-center gap-1 text-decoration-none" href="' + domainEscape(row.site_url) + '" target="_blank" rel="noopener noreferrer"><i data-lucide="external-link"></i><span>' + domainEscape(domain) + '</span></a>'
                    : domain
            },
            {
                data: "document_root",
                responsivePriority: 2,
                render: (root, type, row) => {
                    if (type !== "display") return root;
                    const action = domainButton("folder-pen", "{% translate 'Change document root' %}", "docroot", row, "secondary");
                    return '<div class="d-inline-flex align-items-center gap-2"><span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/' + domainEscape(root) + '</span></span><div class="eenos-dt-actions">' + action + '</div></div>';
                }
            },
            {
                data: "redirect_url",
                className: "text-nowrap",
                responsivePriority: 3,
                render: (url, type, row) => {
                    if (type !== "display") return url;
                    const status = row.redirect_enabled
                        ? '<a class="d-inline-flex align-items-center gap-1" href="' + domainEscape(url) + '" target="_blank" rel="noopener noreferrer"><span>' + domainEscape(url) + '</span><i data-lucide="external-link"></i></a>'
                        : '<span class="badge eenos-badge-neutral">{% translate "Not redirected" %}</span>';
                    const edit = domainButton("pencil", "{% translate 'Manage URL redirection' %}", "redirect", row, "success");
                    const remove = row.redirect_enabled
                        ? domainButton("unlink", "{% translate 'Remove URL redirection' %}", "delete_redirect", row, "danger")
                        : "";
                    return '<div class="d-inline-flex align-items-center gap-2">' + status + '<div class="eenos-dt-actions">' + edit + remove + '</div></div>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                width: "70px",
                className: "text-end text-nowrap",
                responsivePriority: 1,
                render: (data, type, row) => type === "display"
                    ? '<div class="eenos-dt-actions justify-content-end">' + domainButton("trash-2", "{% translate 'Delete addon domain' %}", "delete", row, "danger") + '</div>'
                    : ""
            }
        ],
        drawCallback: () => {
            if (typeof lucide !== "undefined") lucide.createIcons();
        }
    });

    table.on("responsive-display", () => {
        if (typeof lucide !== "undefined") lucide.createIcons();
    });

    const addonDomain = $("#addonDomain");
    const addonRoot = $("#addonRoot");
    let syncDocumentRoot = !addonRoot.val() || addonRoot.val() === addonDomain.val();

    addonDomain.on("input", function () {
        if (syncDocumentRoot) addonRoot.val(this.value);
    });

    addonRoot.on("input", function () {
        syncDocumentRoot = this.value === addonDomain.val();
    });
});
    </script>
{% endblock %}