{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Modify Hosting Account" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Modify Hosting Account" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Select an active hosting account to update its resources, services, and account settings." %}</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>
        <span>{% translate "User Accounts" %}</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 "Modify Account" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <div class="eenos-panel-title">{% translate "Hosting Accounts" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Suspended accounts must be unsuspended before their settings can be modified." %}</div>
            </div>
            <i data-lucide="users" class="eenos-card-action-icon"></i>
        </div>
        <table id="eenos-data-table"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "User" %}</th>
                    <th>{% translate "Domain" %}</th>
                    <th>{% translate "Hosting Plan" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
      $(function () {
        const escapeHtml = function (value) {
          return $("<div>").text(value == null ? "" : value).html();
        };
        const editUrlTemplate = "{% url 'edit' user_name='__username__' %}";

        $("#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_users_data' %}",
            type: "GET",
            dataSrc: "data"
          },
          order: [[0, "asc"]],
          columns: [
            {
              data: "username",
              className: "text-nowrap",
              responsivePriority: 2,
              render: function (data, type) {
                return type === "display" ? `<span class="fw-semibold">${escapeHtml(data || "-")}</span>` : data;
              }
            },
            {
              data: "domain",
              responsivePriority: 3,
              render: function (data, type) {
                if (type !== "display") return data;
                if (!data) return '<span class="text-muted">-</span>';
                const domain = escapeHtml(data);
                return `<a href="https://${domain}" class="text-decoration-none" target="_blank" rel="noopener noreferrer">${domain}</a>`;
              }
            },
            {
              data: "package",
              className: "text-nowrap",
              responsivePriority: 5,
              render: function (data, type) {
                return type === "display" ? `<span class="badge eenos-badge-neutral">${escapeHtml(data || "-")}</span>` : data;
              }
            },
            {
              data: "status",
              className: "text-nowrap",
              responsivePriority: 4,
              render: function (data, type) {
                if (type !== "display") return data;
                return data === "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>';
              }
            },
            {
              data: null,
              orderable: false,
              searchable: false,
              width: "90px",
              responsivePriority: 1,
              render: function (data, type, row) {
                if (type !== "display") return "";
                if (row.status === "suspended") {
                  return `<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-secondary" title="{% translate 'Suspended accounts cannot be modified' %}" aria-label="{% translate 'Suspended accounts cannot be modified' %}" disabled><i data-lucide="pencil"></i></button></div>`;
                }
                const url = editUrlTemplate.replace("__username__", encodeURIComponent(row.username));
                return `<div class="eenos-dt-actions"><a href="${url}" class="btn btn-sm btn-outline-primary" title="{% translate 'Modify Account' %}" aria-label="{% translate 'Modify Account' %}"><i data-lucide="pencil"></i></a></div>`;
              }
            }
          ],
          language: {
            loadingRecords: "&nbsp;",
            processing: '{% translate "Loading..." %}',
            emptyTable: "{% translate 'No hosting accounts have been configured.' %}",
            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: function () {
            if (typeof lucide !== "undefined") lucide.createIcons();
          }
        }).on("responsive-display", function () {
          if (typeof lucide !== "undefined") lucide.createIcons();
        });
      });
    </script>
{% endblock extra_js %}