{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Bandwidth Usage" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Bandwidth Usage" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Monitor monthly data transfer across all hosting accounts." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Resources" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Bandwidth Manager" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Bandwidth Usage" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Account Bandwidth Usage" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Compare each account's current monthly usage with its configured bandwidth limit." %}</div>
        </div>
        <table id="bandwidthUsageTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "User" %}</th>
                    <th>{% translate "Domain" %}</th>
                    <th>{% translate "Hosting Package" %}</th>
                    <th>{% translate "Bandwidth Limit" %}</th>
                    <th>{% translate "Current Usage" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
      $(function () {
        const escapeHtml = value => $("<div>").text(value == null ? "" : value).html();
        const numberValue = value => Number(value) || 0;
        const formatBandwidth = value => {
          const amount = numberValue(value);
          if (amount >= 1000000) return (amount / 1000000).toFixed(2).replace(/\.00$/, "") + " TB";
          if (amount >= 1000) return (amount / 1000).toFixed(2).replace(/\.00$/, "") + " GB";
          return amount.toLocaleString() + " MB";
        };
        const formatLimit = value => String(value || "").toLowerCase() === "unlimited"
          ? "{% translate 'Unlimited' %}"
          : formatBandwidth(value);

        const table = $("#bandwidthUsageTable").DataTable({
          responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } },
          processing: true,
          pageLength: 25,
          lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "{% translate 'All' %}"]],
          ajax: { url: "{% url 'bandwidth_usage_data' %}", type: "GET", dataSrc: "data" },
          order: [[0, "asc"]],
          columns: [
            { data: "username", responsivePriority: 1, render: (data, type) => type === "display" ? '<span class="fw-semibold">' + escapeHtml(data || "-") + '</span>' : data },
            { data: "domain", responsivePriority: 2, render: (data, type) => type === "display" && data ? '<a href="' + escapeHtml("https://" + encodeURI(String(data))) + '" target="_blank" rel="noopener noreferrer">' + escapeHtml(data) + '</a>' : (data || "-") },
            { data: "package", responsivePriority: 6, render: (data, type) => type === "display" ? '<span class="badge eenos-badge-neutral">' + escapeHtml(data || "-") + '</span>' : data },
            { data: "bandwidth_limit", className: "text-nowrap", responsivePriority: 4, render: function (data, type) { const unlimited = String(data || "").toLowerCase() === "unlimited"; if (type !== "display") return unlimited ? Number.MAX_SAFE_INTEGER : numberValue(data); if (unlimited) return '<span class="badge eenos-badge-primary d-inline-flex align-items-center gap-1"><i data-lucide="infinity" style="width:12px;height:12px"></i><span>{% translate "Unlimited" %}</span></span>'; return '<span class="badge eenos-badge-neutral">' + escapeHtml(formatLimit(data)) + '</span>'; } },
            { data: "bandwidth_usage", className: "text-nowrap", responsivePriority: 3, render: (data, type) => type === "display" ? '<span class="fw-semibold">' + escapeHtml(formatBandwidth(data)) + '</span>' : numberValue(data) },
            { data: "status", width: "140px", className: "text-nowrap", responsivePriority: 3, render: function (data, type) { if (type !== "display") return data; return data === "suspended" ? '<span class="eenos-status text-warning text-nowrap d-inline-flex align-items-center gap-1"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>' : '<span class="eenos-status text-success text-nowrap d-inline-flex align-items-center gap-1"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>'; } },
            { data: "usage_url", orderable: false, searchable: false, className: "text-end", width: "70px", responsivePriority: 1, render: (data, type) => type === "display" ? '<div class="eenos-dt-actions d-flex justify-content-end"><a href="' + escapeHtml(data) + '" class="btn btn-sm btn-outline-primary" title="{% translate "View Usage" %}" aria-label="{% translate "View Usage" %}"><i data-lucide="chart-no-axes-combined"></i></a></div>' : data }
          ],
          language: { processing: '{% translate "Loading..." %}', emptyTable: "{% translate 'No hosting accounts are available.' %}", zeroRecords: "{% translate 'No matching accounts found.' %}", search: "{% translate 'Search:' %}", lengthMenu: "{% translate 'Show' %} _MENU_", info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ accounts' %}" },
          drawCallback: function () { if (typeof lucide !== "undefined") lucide.createIcons(); }
        });
        table.on("responsive-display", function () { if (typeof lucide !== "undefined") lucide.createIcons(); });
      });
    </script>
{% endblock %}