{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "All Domains" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "All Domains" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Review and manage every domain attached to your hosting account." %}</div>
        </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 "All Domains" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row g-3 mb-4" aria-live="polite">
        {% if request.session.feature.addondomains == "on" %}
            <div class="col-12 col-sm-6 col-xl">
                <div class="eenos-card eenos-metric-card h-100"
                     data-domain-metric="addon"
                     data-limit="{{ domain_limits.addon }}">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "Addon Domains" %}</div>
                        <i data-lucide="layers" class="eenos-card-action-icon"></i>
                    </div>
                    <div class="eenos-metric-value">
                        <span id="addonDomainCount">{{ domain_metrics.addon.used }}</span>
                        <span class="text-muted fs-6 fw-normal"> /
                            {% if domain_metrics.addon.unlimited %}<i data-lucide="infinity"></i>{% else %}{{ domain_metrics.addon.limit }}{% endif %}
                        </span>
                    </div>
                    <div class="progress mt-3"
                         role="progressbar"
                         aria-label="{% translate 'Addon domain usage' %}"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div id="addonProgress"
                             class="progress-bar bg-success"
                             style="width:{{ domain_metrics.addon.percent }}%"></div>
                    </div>
                    <div class="d-flex justify-content-between gap-3 mt-2 small">
                        <span id="addonAvailable" class="text-muted">{% if domain_metrics.addon.unlimited %}{% translate "Unlimited available" %}{% else %}{{ domain_metrics.addon.available }} {% translate "Available" %}{% endif %}</span>
                        <span id="addonPercent" class="fw-semibold">{% if not domain_metrics.addon.unlimited %}{{ domain_metrics.addon.percent }}%{% endif %}</span>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if request.session.feature.subdomains == "on" %}
            <div class="col-12 col-sm-6 col-xl">
                <div class="eenos-card eenos-metric-card h-100"
                     data-domain-metric="subdomain"
                     data-limit="{{ domain_limits.subdomain }}">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "Subdomains" %}</div>
                        <i data-lucide="git-branch" class="eenos-card-action-icon"></i>
                    </div>
                    <div class="eenos-metric-value">
                        <span id="subdomainCount">{{ domain_metrics.subdomain.used }}</span>
                        <span class="text-muted fs-6 fw-normal"> /
                            {% if domain_metrics.subdomain.unlimited %}<i data-lucide="infinity"></i>{% else %}{{ domain_metrics.subdomain.limit }}{% endif %}
                        </span>
                    </div>
                    <div class="progress mt-3"
                         role="progressbar"
                         aria-label="{% translate 'Subdomain usage' %}"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div id="subdomainProgress"
                             class="progress-bar bg-success"
                             style="width:{{ domain_metrics.subdomain.percent }}%"></div>
                    </div>
                    <div class="d-flex justify-content-between gap-3 mt-2 small">
                        <span id="subdomainAvailable" class="text-muted">{% if domain_metrics.subdomain.unlimited %}{% translate "Unlimited available" %}{% else %}{{ domain_metrics.subdomain.available }} {% translate "Available" %}{% endif %}</span>
                        <span id="subdomainPercent" class="fw-semibold">{% if not domain_metrics.subdomain.unlimited %}{{ domain_metrics.subdomain.percent }}%{% endif %}</span>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if request.session.feature.parkeddomains == "on" %}
            <div class="col-12 col-sm-6 col-xl">
                <div class="eenos-card eenos-metric-card h-100"
                     data-domain-metric="alias"
                     data-limit="{{ domain_limits.alias }}">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="eenos-metric-label">{% translate "Aliases" %}</div>
                        <i data-lucide="copy" class="eenos-card-action-icon"></i>
                    </div>
                    <div class="eenos-metric-value">
                        <span id="aliasDomainCount">{{ domain_metrics.alias.used }}</span>
                        <span class="text-muted fs-6 fw-normal"> /
                            {% if domain_metrics.alias.unlimited %}<i data-lucide="infinity"></i>{% else %}{{ domain_metrics.alias.limit }}{% endif %}
                        </span>
                    </div>
                    <div class="progress mt-3"
                         role="progressbar"
                         aria-label="{% translate 'Alias usage' %}"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <div id="aliasProgress"
                             class="progress-bar bg-success"
                             style="width:{{ domain_metrics.alias.percent }}%"></div>
                    </div>
                    <div class="d-flex justify-content-between gap-3 mt-2 small">
                        <span id="aliasAvailable" class="text-muted">{% if domain_metrics.alias.unlimited %}{% translate "Unlimited available" %}{% else %}{{ domain_metrics.alias.available }} {% translate "Available" %}{% endif %}</span>
                        <span id="aliasPercent" class="fw-semibold">{% if not domain_metrics.alias.unlimited %}{{ domain_metrics.alias.percent }}%{% endif %}</span>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="col-12 col-sm-6 col-xl">
            <div class="eenos-card eenos-metric-card h-100">
                <div class="d-flex align-items-center justify-content-between gap-3">
                    <div class="eenos-metric-label">{% translate "Disk Usage" %}</div>
                    <a href="{% url 'disk_usage' %}"
                       title="{% translate 'View disk usage' %}"
                       aria-label="{% translate 'View disk usage' %}">
                        <i data-lucide="hard-drive" class="eenos-card-action-icon"></i>
                    </a>
                </div>
                <div class="eenos-metric-value">
                    {{ resource_metrics.disk.usage }}
                    <span class="text-muted fs-6 fw-normal"> /
                        {% if resource_metrics.disk.unlimited %}<i data-lucide="infinity"></i>{% else %}{{ resource_metrics.disk.limit }}{% endif %}
                    </span>
                </div>
                <div class="progress mt-3"
                     role="progressbar"
                     aria-label="{% translate 'Disk usage' %}"
                     aria-valuemin="0"
                     aria-valuemax="100"
                     aria-valuenow="{{ resource_metrics.disk.utilization_bar }}">
                    <div class="progress-bar bg-success"
                         style="width:{{ resource_metrics.disk.utilization_bar }}%"></div>
                </div>
                <div class="d-flex justify-content-between gap-3 mt-2 small">
                    <span class="text-muted">
                        {% if resource_metrics.disk.unlimited %}{% translate "Unlimited available" %}{% else %}{{ resource_metrics.disk.available }} {% translate "Available" %}{% endif %}
                    </span>
                    <span class="fw-semibold">{% if not resource_metrics.disk.unlimited %}{{ resource_metrics.disk.utilization }}%{% endif %}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl">
            <div class="eenos-card eenos-metric-card h-100">
                <div class="d-flex align-items-center justify-content-between gap-3">
                    <div class="eenos-metric-label">{% translate "Bandwidth Usage" %}</div>
                    <a href="{% url 'bandwidth_usage' %}"
                       title="{% translate 'View bandwidth usage' %}"
                       aria-label="{% translate 'View bandwidth usage' %}">
                        <i data-lucide="activity" class="eenos-card-action-icon"></i>
                    </a>
                </div>
                <div class="eenos-metric-value">
                    {{ resource_metrics.bandwidth.usage }}
                    <span class="text-muted fs-6 fw-normal"> /
                        {% if resource_metrics.bandwidth.unlimited %}<i data-lucide="infinity"></i>{% else %}{{ resource_metrics.bandwidth.limit }}{% endif %}
                    </span>
                </div>
                <div class="progress mt-3"
                     role="progressbar"
                     aria-label="{% translate 'Bandwidth usage' %}"
                     aria-valuemin="0"
                     aria-valuemax="100"
                     aria-valuenow="{{ resource_metrics.bandwidth.utilization_bar }}">
                    <div class="progress-bar bg-success"
                         style="width:{{ resource_metrics.bandwidth.utilization_bar }}%"></div>
                </div>
                <div class="d-flex justify-content-between gap-3 mt-2 small">
                    <span class="text-muted">
                        {% if resource_metrics.bandwidth.unlimited %}{% translate "Unlimited available" %}{% else %}{{ resource_metrics.bandwidth.available }} {% translate "Available" %}{% endif %}
                    </span>
                    <span class="fw-semibold">{% if not resource_metrics.bandwidth.unlimited %}{{ resource_metrics.bandwidth.utilization }}%{% endif %}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
            <div>
                <h2 class="eenos-panel-title mb-1">{% translate "Hosted Domains" %}</h2>
                <div class="small text-muted">{% translate "Domains and website routing configured for this account." %}</div>
            </div>
            <div class="d-flex align-items-center flex-wrap gap-3">
                {% if request.session.feature.addondomains == "on" or request.session.feature.subdomains == "on" or request.session.feature.parkeddomains == "on" %}
                    <div class="d-flex flex-wrap gap-2">
                        {% if request.session.feature.addondomains == "on" %}
                            <a href="{% url 'addon_domains' %}"
                               class="btn btn-sm btn-primary d-inline-flex align-items-center gap-2">
                                <i data-lucide="circle-plus"></i><span>{% translate "Add Website" %}</span>
                            </a>
                        {% endif %}
                        {% if request.session.feature.subdomains == "on" %}
                            <a href="{% url 'sub_domains' %}"
                               class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-2">
                                <i data-lucide="git-branch"></i><span>{% translate "Create Subdomain" %}</span>
                            </a>
                        {% endif %}
                        {% if request.session.feature.parkeddomains == "on" %}
                            <a href="{% url 'alias_domains' %}"
                               class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-2">
                                <i data-lucide="tags"></i><span>{% translate "Park a Domain" %}</span>
                            </a>
                        {% endif %}
                    </div>
                {% endif %}
                <i data-lucide="list" class="eenos-card-action-icon"></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 "Type" %}</th>
                        <th>{% translate "Application" %}</th>
                        <th>{% translate "SSL Redirect" %}</th>
                        <th>{% translate "WWW Redirection" %}</th>
                        <th>{% translate "Redirection URL" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {% include "includes/domain_actions.html" %}
{% endblock %}
{% block extra_js %}
    {% include "includes/domain_actions_js.html" %}
    <script>
$(function () {
    initDomainActions();

    const typeBadges = {
        main: ["{% translate 'Primary' %}", "eenos-badge-primary"],
        addon_domain: ["{% translate 'Addon' %}", "eenos-badge-success"],
        alias_domain: ["{% translate 'Alias' %}", "eenos-badge-info"],
        sub_domain: ["{% translate 'Subdomain' %}", "eenos-badge-neutral"]
    };
    const wwwLabels = {
        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 updateDomainMetric = (name, used) => {
        const metric = document.querySelector('[data-domain-metric="' + name + '"]');
        if (!metric) return;
        const rawLimit = metric.dataset.limit;
        const progress = document.getElementById(name + "Progress");
        const available = document.getElementById(name + "Available");
        const percent = document.getElementById(name + "Percent");

        if (rawLimit === "unlimited") {
            progress.style.width = "0%";
            progress.parentElement.setAttribute("aria-valuenow", "0");
            available.textContent = "{% translate 'Unlimited available' %}";
            percent.textContent = "";
            return;
        }

        const limit = Number.parseInt(rawLimit, 10) || 0;
        const usagePercent = limit > 0 ? Math.min(Math.round((used / limit) * 100), 100) : 0;
        progress.style.width = usagePercent + "%";
        progress.parentElement.setAttribute("aria-valuenow", String(usagePercent));
        available.textContent = Math.max(limit - used, 0) + " {% translate 'Available' %}";
        percent.textContent = usagePercent + "%";
    };

    const table = $("#domainsTable").DataTable({
        processing: true,
        ajax: {
            url: "{% url 'all_domains_data' %}",
            dataSrc: (response) => {
                const domains = Array.isArray(response.data) ? response.data : [];
                const totals = domains.reduce((counts, domain) => {
                    if (Object.hasOwn(counts, domain.type)) counts[domain.type] += 1;
                    return counts;
                }, {
                    addon_domain: 0,
                    sub_domain: 0,
                    alias_domain: 0
                });

                $("#addonDomainCount").text(totals.addon_domain);
                $("#subdomainCount").text(totals.sub_domain);
                $("#aliasDomainCount").text(totals.alias_domain);
                updateDomainMetric("addon", totals.addon_domain);
                updateDomainMetric("subdomain", totals.sub_domain);
                updateDomainMetric("alias", totals.alias_domain);
                return domains;
            }
        },
        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: "24%",
                className: "text-nowrap",
                responsivePriority: 1,
                render: (domain, type, row) => type === "display"
                    ? '<a class="d-inline-flex align-items-center align-middle 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",
                className: "text-nowrap",
                responsivePriority: 3,
                render: (root, type, row) => {
                    if (type !== "display") return root;
                    const fileStudioUrl = "{% url 'workspace-filestudio' %}?path=" + encodeURIComponent(root);
                    const managesOwnFiles = row.type !== "alias_domain" && row.type !== "parked_domain";
                    const manageFiles = managesOwnFiles
                        ? '<a class="btn btn-sm btn-outline-primary" href="' + fileStudioUrl + '" target="_blank" rel="noopener noreferrer" title="{% translate 'Manage files' %}" aria-label="{% translate 'Manage files' %}"><i data-lucide="folder-open"></i></a>'
                        : "";
                    const changeRoot = row.actions.change_document_root
                        ? 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 d-inline-flex gap-1">' + manageFiles + changeRoot + '</div></div>';
                }
            },
            {
                data: "type",
                responsivePriority: 4,
                render: (value, type) => {
                    const badge = typeBadges[value] || [value, "eenos-badge-neutral"];
                    return type === "display" ? '<span class="badge ' + badge[1] + '">' + domainEscape(badge[0]) + '</span>' : badge[0];
                }
            },
            {
                data: "app_info",
                defaultContent: "-",
                responsivePriority: 7
            },
            {
                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: 5,
                render: (value, type, row) => {
                    if (type !== "display") return value;
                    const state = wwwLabels[value] || wwwLabels.none;
                    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: 6,
                render: (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: () => {
            if (typeof lucide !== "undefined") lucide.createIcons();
        }
    });

    table.on("responsive-display", () => {
        if (typeof lucide !== "undefined") 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 %}