{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Domain Redirects" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Domain Redirects" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage HTTPS, WWW, and destination URL redirections for your domains." %}</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 "Redirects" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start gap-3">
                    <div class="eenos-card-action-icon">
                        <i data-lucide="shield-check"></i>
                    </div>
                    <div>
                        <h2 class="h6 mb-1">{% translate "HTTPS Redirection" %}</h2>
                        <p class="text-muted small mb-0">{% translate "Send visitors from insecure HTTP URLs to the secure HTTPS version of the same domain." %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start gap-3">
                    <div class="eenos-card-action-icon">
                        <i data-lucide="route"></i>
                    </div>
                    <div>
                        <h2 class="h6 mb-1">{% translate "WWW Redirection" %}</h2>
                        <p class="text-muted small mb-0">{% translate "Choose whether visitors use the WWW or non-WWW version of your domain." %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="eenos-card h-100">
                <div class="d-flex align-items-start gap-3">
                    <div class="eenos-card-action-icon">
                        <i data-lucide="external-link"></i>
                    </div>
                    <div>
                        <h2 class="h6 mb-1">{% translate "URL Redirection" %}</h2>
                        <p class="text-muted small mb-0">{% translate "Forward a domain to another website or a specific destination URL." %}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Website Redirections" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Review and update redirection settings for each hosted domain." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="route"></i>
            </div>
        </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 "HTTPS" %}</th>
                        <th>{% translate "WWW Redirect" %}</th>
                        <th>{% translate "URL Redirect" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {% include "includes/domain_actions.html" %}
{% endblock %}
{% block extra_js %}
    {% include "includes/domain_actions_js.html" %}
    <script>
        $(function () {
            initDomainActions({selectedLabel: "{% translate 'Selected domain' %}", redirectTitle: "{% translate 'Manage URL Redirection' %}"});
            const table = $("#domainsTable").DataTable({
                processing: true,ajax: {url: "{% url 'domain_redirections_data' %}", dataSrc: "data"},
                pageLength: 25,
                order: [[0, "asc"]],
                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: true,
                columns: [
                    {data: "domain", responsivePriority: 1, className: "text-nowrap", render: function (data, type, row) {
                        if (type !== "display") return data;
                        const url = row.site_url || ("https://" + data.replace(/^\*\./, ""));
                        return '<a href="' + domainEscape(url) + '" target="_blank" rel="noopener noreferrer" class="d-inline-flex align-items-center gap-1">' + domainEscape(data) + '<i data-lucide="external-link"></i></a>';
                    }},
                    {data: "document_root", responsivePriority: 5, className: "text-nowrap", render: function (data, type) {
                        if (type !== "display") return data || "";
                        const root = String(data || "").replace(/^\/+/, "");
                        return '<span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/' + domainEscape(root) + '</span></span>';
                    }},
                    {data: "force_ssl", width: "92px", className: "text-center text-nowrap", responsivePriority: 2, render: (enabled, type, row) => type !== "display" ? enabled : '<div class="form-check form-switch d-inline-flex m-0"><input type="checkbox" class="form-check-input eenos-switch-success domain-ssl-switch" role="switch" data-row="' + encodeURIComponent(JSON.stringify(row)) + '" title="' + (enabled ? "{% translate 'Disable SSL redirection' %}" : "{% translate 'Enable SSL redirection' %}") + '" aria-label="{% translate 'Change SSL redirection' %}" ' + (enabled ? "checked" : "") + '></div>'},
                    {data: "www_redirect", className: "text-nowrap", responsivePriority: 3, render: function (value, type, row) {
                        if (type !== "display") return value;
                        const states = {
                            towww: ["{% translate 'Redirect to WWW' %}", "eenos-badge-success"],
                            tononwww: ["{% translate 'Redirect to non-WWW' %}", "eenos-badge-info"],
                            none: ["{% translate 'No redirection' %}", "eenos-badge-neutral"],
                            off: ["{% translate 'No redirection' %}", "eenos-badge-neutral"]
                        };
                        const state = states[value] || states.none;
                        row.www_redirect = value === "off" ? "none" : value;
                        const badge = '<span class="badge ' + state[1] + '">' + domainEscape(state[0]) + '</span>';
                        const action = row.actions.change_www_redirect ? '<div class="eenos-dt-actions">' + domainButton("route", "{% translate 'Change WWW redirection' %}", "www", row, "secondary") + '</div>' : "";
                        return '<div class="d-inline-flex align-items-center gap-2">' + badge + action + '</div>';
                    }},
                    {data: "redirect_url", className: "text-nowrap", responsivePriority: 4, render: function (url, type, row) {
                        if (type !== "display") return url;
                        const value = 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="text-muted">{% translate "Not redirected" %}</span>';
                        const actions = domainButton("pencil", "{% translate 'Manage URL redirection' %}", "redirect", row, "success") + (row.redirect_enabled ? domainButton("unlink", "{% translate 'Remove URL redirection' %}", "delete_redirect", row, "danger") : "");
                        return '<div class="d-inline-flex align-items-center gap-2">' + value + '<div class="eenos-dt-actions d-inline-flex gap-1">' + actions + '</div></div>';
                    }}
                ],
                drawCallback: function () { lucide.createIcons(); }
            });
            table.on("responsive-display", function () { lucide.createIcons(); });
            $(document).on("change", ".domain-ssl-switch", function () {
                const row = JSON.parse(decodeURIComponent(this.dataset.row));
                this.checked = row.force_ssl;
                domainAction("ssl", row);
            });
        });
    </script>
{% endblock %}