{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Reseller Subaccounts" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Reseller Subaccounts" %}</h1>
            <div class="eenos-page-subtitle">{% blocktranslate with reseller_name=reseller %}Hosting accounts owned by {{ reseller_name }}.{% endblocktranslate %}</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 "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'listreseller' %}">{% translate "Resellers" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'reselleraccounts' %}">{% translate "View Sub Accounts" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{{ reseller }}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card mb-4">
        <div class="mb-4"><div class="eenos-panel-title">{% translate "Reseller Details" %}</div><div class="eenos-panel-subtitle">{% translate "Account information for the reseller that owns the hosting accounts below." %}</div></div>
        <div class="row g-3">
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="user-round"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Reseller" %}</div><div class="eenos-modal-info-value" id="resellerUsername">{{ reseller }}</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Main Domain" %}</div><div class="eenos-modal-info-value" id="resellerDomain">—</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="user-round-check"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Owner" %}</div><div class="eenos-modal-info-value" id="resellerOwner">—</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="package"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Hosting Plan" %}</div><div class="eenos-modal-info-value" id="resellerPackage">—</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="network"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Reseller IPv4" %}</div><div class="eenos-modal-info-value" id="resellerIpv4">—</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="network"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Reseller IPv6" %}</div><div class="eenos-modal-info-value" id="resellerIpv6">—</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="users"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Owned Accounts" %}</div><div class="eenos-modal-info-value" id="resellerAccountCount">0</div></div></div></div>
            <div class="col-12 col-md-6 col-xl-3"><div class="eenos-modal-info h-100"><div class="eenos-modal-info-icon"><i data-lucide="activity"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Status" %}</div><div class="eenos-modal-info-value" id="resellerStatus">—</div></div></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><div class="eenos-panel-title">{% translate "Owned Hosting Accounts" %}</div><div class="eenos-panel-subtitle">{% blocktranslate with reseller_name=reseller %}View the hosting accounts currently assigned to {{ reseller_name }}.{% endblocktranslate %}</div></div>
            <a href="{% url 'reselleraccounts' %}"
               class="btn btn-outline-secondary btn-sm"><i data-lucide="arrow-left"></i>{% translate "All Resellers" %}</a>
        </div>
        <table id="eenos-data-table"
               class="table table-sm table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>{% translate "User" %}</th>
                    <th>{% translate "Domain" %}</th>
                    <th>{% translate "Setup Time" %}</th>
                    <th>{% translate "Hosting Plan" %}</th>
                    <th>{% translate "Quota" %}</th>
                    <th>{% translate "IPv4" %}</th>
                    <th>{% translate "IPv6" %}</th>
                    <th>{% translate "Contact Email" %}</th>
                    <th>{% translate "Status" %}</th>
                </tr>
            </thead>
        </table>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function () {
  const esc = value => $("<div>").text(value == null ? "" : value).html();
  const showReseller = function (r) {
    r = r || {};
    $("#resellerUsername").text(r.username || "—");
    $("#resellerDomain").empty().append(r.domain ? $("<a>", {href: "https://" + r.domain, target: "_blank", rel: "noopener noreferrer", text: r.domain}) : document.createTextNode("—"));
    $("#resellerOwner").text(r.owner || "—");
    $("#resellerPackage").text(r.package || "—");
    $("#resellerIpv4").text(r.shared_ipv4 || "—");
    $("#resellerIpv6").text(r.shared_ipv6 || "—");
    $("#resellerAccountCount").text(r.account_count || 0);
    $("#resellerStatus").html(r.status === "suspended" ? '<span class="eenos-status text-warning"><i data-lucide="pause-circle"></i><span>{% translate "Suspended" %}</span></span>' : '<span class="eenos-status text-success"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>');
    if (typeof lucide !== "undefined") lucide.createIcons();
  };
  const table = $("#eenos-data-table").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 'hosting_reselleraccounts_sub_data' %}?reseller={{ reseller|urlencode }}",type:"GET",dataSrc:function(json){showReseller(json.reseller);return json.data||[];}},order:[[0,"asc"]],
    columns:[
      {data:"username",width:"180px",className:"text-nowrap",responsivePriority:1,render:(d,t)=>t==="display"?'<span class="fw-semibold">'+esc(d||"-")+'</span>':d},
      {data:"domain",width:"32%",responsivePriority:2,render:function(d,t){return t!=="display"?d:(d?'<a href="https://'+esc(d)+'" target="_blank" rel="noopener noreferrer">'+esc(d)+'</a>':'-');}},
      {data:"setup_time",className:"text-nowrap",responsivePriority:6,render:(d,t)=>t==="display"?esc(d||"-"):d},
      {data:"package",responsivePriority:4,render:(d,t)=>t==="display"?'<span class="badge eenos-badge-neutral">'+esc(d||"-")+'</span>':d},
      {data:"quota",responsivePriority:5,render:function(d,t){if(t!=="display")return d;if(!d)return "-";return String(d).toLowerCase()==="unlimited"?"{% translate 'Unlimited' %}":esc(d)+" MB";}},
      {data:"ipv4_address",className:"text-nowrap",responsivePriority:7,render:(d,t)=>t==="display"?esc(d||"-"):d},
      {data:"ipv6_address",className:"text-nowrap",responsivePriority:8,render:(d,t)=>t==="display"?esc(d||"-"):d},
      {data:"contact_email",className:"text-nowrap",responsivePriority:9,render:(d,t)=>t==="display"?esc(d||"-"):d},
      {data:"status",width:"120px",responsivePriority:3,render:function(d,t){if(t!=="display")return d;return d==="suspended"?'<span class="eenos-status text-warning 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 d-inline-flex align-items-center gap-1"><i data-lucide="circle-check"></i><span>{% translate "Active" %}</span></span>';}}
    ],
    language:{processing:'{% translate "Loading..." %}',emptyTable:"{% translate 'This reseller does not own any hosting accounts.' %}",zeroRecords:"{% translate 'No matching hosting accounts found.' %}",search:"{% translate 'Search:' %}",lengthMenu:"{% translate 'Show' %} _MENU_",info:"{% translate 'Showing _START_ to _END_ of _TOTAL_ hosting accounts' %}"},
    drawCallback:()=>{if(typeof lucide!=="undefined")lucide.createIcons();}
  });
  table.on("responsive-display",()=>{if(typeof lucide!=="undefined")lucide.createIcons();});
});
    </script>
{% endblock %}