{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}
    {% translate "Hosting Accounts" %} - Eenos
{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Hosting Accounts" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "View and manage hosting accounts, account status, hosting plans, and server resources." %}
            </div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'createuser' %}"
               class="btn btn-primary btn-sm text-nowrap">
                <i data-lucide="plus"></i>
                {% translate "Create Account" %}
            </a>
        </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 class="eenos-breadcrumb-current" aria-current="page">{% translate "User Accounts" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <!-- Hosting accounts -->
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Available Hosting Accounts" %}</div>
            <div class="eenos-panel-subtitle">{% translate "View and manage all hosting accounts on this server." %}</div>
        </div>
        <!-- Accounts table -->
        <table id="eenos-data-table"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Domain" %}</th>
                    <th>{% translate "User" %}</th>
                    <th>{% translate "Reseller" %}</th>
                    <th>{% translate "Setup Date" %}</th>
                    <th>{% translate "Hosting Plan" %}</th>
                    <th>{% translate "Quota" %}</th>
                    <th>{% translate "IP" %}</th>
                    <th>{% translate "Contact Email" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th>{% translate "Eenos" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- Modify account modal -->
    <div class="modal fade"
         id="modifyAccountModal"
         tabindex="-1"
         aria-labelledby="modifyAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon eenos-modal-icon-primary">
                            <i data-lucide="settings-2"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="modifyAccountModalLabel">{% translate "Modify Account" %}</h5>
                            <div class="eenos-modal-subtitle">{% translate "Update the hosting account configuration and settings." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info mb-3">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Hosting Account" %}</div>
                            <div id="modifyAccountUser" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Modify Account Settings" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "You can modify the hosting account settings, resources, domain configuration, and other account options." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button"
                            class="btn btn-primary btn-sm"
                            id="modifyAccountConfirm">
                        <i data-lucide="settings-2"></i>
                        {% translate "Modify Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Terminate account modal -->
    <div class="modal fade"
         id="terminateAccountModal"
         tabindex="-1"
         aria-labelledby="terminateAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon eenos-modal-icon-danger">
                            <i data-lucide="trash-2"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="terminateAccountModalLabel">{% translate "Terminate Account" %}</h5>
                            <div class="text-muted small">{% translate "Permanently remove this hosting account." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div>
                            <div class="eenos-modal-label">{% translate "Account" %}</div>
                            <div id="terminateAccountUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="octagon-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Permanent Action" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "This action will permanently remove the hosting account and its associated data from the server. This action cannot be undone." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button"
                            class="btn btn-danger btn-sm"
                            id="terminateAccountConfirm">
                        <i data-lucide="trash-2"></i>
                        {% translate "Terminate Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Suspend account modal -->
    <div class="modal fade"
         id="suspendAccountModal"
         tabindex="-1"
         aria-labelledby="suspendAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="suspendAccountModalLabel">
                            <i data-lucide="user-lock"></i>
                            {% translate "Suspend Account" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Temporarily disable this hosting account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="suspendAccountUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mb-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Account Suspension" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "The account will be temporarily disabled until it is unsuspended." %}
                            </div>
                        </div>
                    </div>
                    <div class="mb-0">
                        <label for="suspendAccountReason" class="form-label fw-medium">{% translate "Reason for suspension" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i data-lucide="message-square"></i>
                            </span>
                            <input type="text"
                                   class="form-control"
                                   id="suspendAccountReason"
                                   autocomplete="off"
                                   placeholder="{% translate 'Enter the reason for suspension' %}">
                        </div>
                        <div class="form-text">{% translate "A reason is required before the account can be suspended." %}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-warning" id="suspendAccountConfirm">
                        <i data-lucide="user-lock"></i>
                        {% translate "Suspend Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Unsuspend account modal -->
    <div class="modal fade"
         id="unsuspendAccountModal"
         tabindex="-1"
         aria-labelledby="unsuspendAccountModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="unsuspendAccountModalLabel">
                            <i data-lucide="user-check"></i>
                            {% translate "Unsuspend Account" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Restore access to this hosting account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="unsuspendAccountUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-success">
                        <div class="eenos-notice-icon">
                            <i data-lucide="circle-check"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Restore Account Access" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Unsuspending this account will restore access to its hosting services and websites." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-success" id="unsuspendAccountConfirm">
                        <i data-lucide="user-check"></i>
                        {% translate "Unsuspend Account" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Change password modal -->
    <div class="modal fade"
         id="changePasswordModal"
         tabindex="-1"
         aria-labelledby="changePasswordModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center gap-3">
                        <div class="eenos-modal-icon">
                            <i data-lucide="key-round"></i>
                        </div>
                        <div>
                            <h5 class="modal-title mb-1" id="changePasswordModalLabel">{% translate "Change Password" %}</h5>
                            <div class="eenos-modal-subtitle">{% translate "Set a new password for this hosting account." %}</div>
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <!-- Account -->
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div>
                            <div class="eenos-modal-info-label">{% translate "Hosting Account" %}</div>
                            <div id="changePasswordUser" class="eenos-modal-info-value"></div>
                        </div>
                    </div>
                    <!-- Password -->
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">{% translate "New Password" %}</label>
                        <div class="eenos-password-generator">
                            <div class="input-group">
                                <input type="password"
                                       class="form-control form-control-sm eenos-password-input"
                                       id="newPassword"
                                       autocomplete="new-password"
                                       placeholder="{% translate 'Enter a new password' %}">
                                <button type="button"
                                        class="btn btn-outline-secondary eenos-password-toggle"
                                        aria-label="{% translate 'Show password' %}"
                                        title="{% translate 'Show password' %}">
                                    <i data-lucide="eye"></i>
                                </button>
                                <button type="button"
                                        class="btn btn-outline-primary eenos-password-generate"
                                        aria-label="{% translate 'Generate secure password' %}"
                                        title="{% translate 'Generate secure password' %}">
                                    <i data-lucide="wand-sparkles"></i>
                                    <span class="d-none d-sm-inline">{% translate "Generate" %}</span>
                                </button>
                            </div>
                            <!-- Password strength -->
                            <div class="eenos-password-strength mt-2">
                                <div class="progress" style="height: 5px;">
                                    <div class="progress-bar eenos-password-strength-progress"
                                         role="progressbar"
                                         style="width: 0%"
                                         aria-valuemin="0"
                                         aria-valuemax="100"></div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <small class="eenos-password-strength-text text-muted"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Security notice -->
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="shield-check"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Use a strong password" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Use a long password containing uppercase and lowercase letters, numbers, and special characters." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button"
                            class="btn btn-primary btn-sm"
                            id="changePasswordConfirm">
                        <i data-lucide="key-round"></i>
                        {% translate "Change Password" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Change contact email modal -->
    <div class="modal fade"
         id="changeEmailModal"
         tabindex="-1"
         aria-labelledby="changeEmailModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changeEmailModalLabel">
                            <i data-lucide="mail"></i>
                            {% translate "Change Contact Email" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Update the primary contact email for this hosting account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="changeEmailUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-modal-field mb-3">
                        <div class="form-label">{% translate "Current Email" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="mail"></i>
                            <span id="changeEmailCurrent"></span>
                        </div>
                    </div>
                    <div>
                        <label for="newContactEmail" class="form-label fw-medium">{% translate "New Email" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i data-lucide="mail-plus"></i>
                            </span>
                            <input type="email"
                                   class="form-control"
                                   id="newContactEmail"
                                   autocomplete="off"
                                   placeholder="{% translate 'Enter the new contact email' %}">
                        </div>
                        <div class="form-text">
                            {% translate "This email address will be used for account notifications and contact information." %}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="changeEmailConfirm">
                        <i data-lucide="mail-check"></i>
                        {% translate "Change Email" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Change hosting plan modal -->
    <div class="modal fade"
         id="changePlanModal"
         tabindex="-1"
         aria-labelledby="changePlanModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="changePlanModalLabel">
                        <i data-lucide="arrow-right-left"></i>
                        {% translate "Change Hosting Plan" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-description mb-4">
                        {% translate "Select a new hosting plan for this account. Its resource limits and enabled features will be updated immediately." %}
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <div class="eenos-modal-field h-100">
                                <div class="form-label">{% translate "Hosting Account" %}</div>
                                <div class="eenos-modal-value">
                                    <i data-lucide="user"></i>
                                    <span id="changePlanUser"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="eenos-modal-field h-100">
                                <div class="form-label">{% translate "Domain" %}</div>
                                <div class="eenos-modal-value">
                                    <i data-lucide="globe-2"></i>
                                    <span id="changePlanDomain"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-modal-field mb-4">
                        <div class="form-label">{% translate "Current Plan" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="package-open"></i>
                            <span id="changePlanCurrent"></span>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="newPlan" class="form-label d-flex align-items-center gap-2">
                            <i data-lucide="layers"></i>
                            <span>{% translate "New Hosting Plan" %}</span>
                        </label>
                        <select class="form-select eenos-select-search" id="newPlan">
                            <option value="">{% translate "Select Hosting Plan" %}</option>
                            {% for p in packages %}
                                <option value="{{ p }}">{{ p }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="eenos-notice eenos-notice-info">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Plan update" %}</div>
                            <div class="eenos-notice-text">{% translate "The account will adopt the selected plan's limits and features." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="changePlanConfirm">
                        <i data-lucide="arrow-right-left"></i>
                        {% translate "Change Plan" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Change IP address modal -->
    <div class="modal fade"
         id="changeIpModal"
         tabindex="-1"
         aria-labelledby="changeIpModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changeIpModalLabel">
                            <i data-lucide="network"></i>
                            {% translate "Change IP Address" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Assign a different IP address to this hosting account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="changeIpUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-plan-change mb-4">
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon">
                                <i data-lucide="globe"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "Current IP Address" %}</div>
                                <div id="changeIpCurrent" class="eenos-plan-name font-monospace"></div>
                            </div>
                        </div>
                        <div class="eenos-plan-arrow">
                            <i data-lucide="arrow-right"></i>
                        </div>
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon eenos-plan-icon-primary">
                                <i data-lucide="network"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "New IP Address" %}</div>
                                <div class="text-muted small">{% translate "Select below" %}</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label for="newIp" class="form-label fw-medium">{% translate "New IP Address" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i data-lucide="server"></i>
                            </span>
                            <select class="form-select eenos-select-search" id="newIp">
                                <option value="">{% translate "Select IP Address" %}</option>
                                {% for ip in freeips %}
                                    <option value="{{ ip }}">{{ ip }}{% if forloop.first %} ({% translate "Main Shared IP" %}){% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-text">{% translate "The selected IP address will be assigned to this hosting account." %}</div>
                    </div>
                    <div class="eenos-notice eenos-notice-info mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "IP Address Change" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Changing the IP address may affect DNS records and services associated with this account." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="changeIpConfirm">
                        <i data-lucide="network"></i>
                        {% translate "Change IP Address" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Change disk quota modal -->
    <div class="modal fade"
         id="changeQuotaModal"
         tabindex="-1"
         aria-labelledby="changeQuotaModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changeQuotaModalLabel">
                            <i data-lucide="hard-drive"></i>
                            {% translate "Change Disk Quota" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Set the disk storage limit for this hosting account." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-account mb-4">
                        <div class="eenos-modal-account-icon">
                            <i data-lucide="user"></i>
                        </div>
                        <div class="eenos-modal-account-info">
                            <div class="eenos-modal-label">{% translate "Hosting Account" %}</div>
                            <div id="changeQuotaUser" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <div class="eenos-modal-field mb-4">
                        <div class="form-label">{% translate "Current Disk Quota" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="hard-drive"></i>
                            <span id="changeQuotaCurrent"></span>
                        </div>
                    </div>
                    <div>
                        <div class="form-label fw-medium">{% translate "New Disk Quota" %}</div>
                        <div class="eenos-quota-options">
                            <label class="eenos-quota-option" for="quotaUnlimited">
                                <input type="radio"
                                       class="form-check-input"
                                       name="quotaType"
                                       id="quotaUnlimited"
                                       value="unlimited"
                                       checked>
                                <span class="eenos-quota-option-icon">
                                    <i data-lucide="infinity"></i>
                                </span>
                                <span class="eenos-quota-option-content">
                                    <span class="eenos-quota-option-title">{% translate "Unlimited" %}</span>
                                    <span class="eenos-quota-option-text">{% translate "No disk storage limit" %}</span>
                                </span>
                            </label>
                            <label class="eenos-quota-option" for="quotaCustom">
                                <input type="radio"
                                       class="form-check-input"
                                       name="quotaType"
                                       id="quotaCustom"
                                       value="custom">
                                <span class="eenos-quota-option-icon">
                                    <i data-lucide="hard-drive-download"></i>
                                </span>
                                <span class="eenos-quota-option-content">
                                    <span class="eenos-quota-option-title">{% translate "Custom Quota" %}</span>
                                    <span class="eenos-quota-option-text">{% translate "Set a specific storage limit" %}</span>
                                </span>
                            </label>
                        </div>
                        <div class="mt-3">
                            <label for="customQuota" class="form-label">{% translate "Storage Limit" %}</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i data-lucide="database"></i>
                                </span>
                                <input type="number"
                                       class="form-control"
                                       id="customQuota"
                                       value="10240"
                                       disabled
                                       min="1">
                                <span class="input-group-text">MB</span>
                            </div>
                            <div class="form-text">{% translate "Quota is specified in megabytes (MB)." %}</div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-info mt-4">
                        <div class="eenos-notice-icon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Disk Storage" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "The quota controls the maximum disk space available to this hosting account." %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">
                        <i data-lucide="x"></i>
                        {% translate "Cancel" %}
                    </button>
                    <button type="button" class="btn btn-primary" id="changeQuotaConfirm">
                        <i data-lucide="hard-drive"></i>
                        {% translate "Change Quota" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Hidden action forms -->
    <form method="POST" id="changePasswordForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="change_password" value="yes">
        <input type="hidden" name="password" id="formPassword">
        <input type="hidden" name="user" id="formPasswordUser">
    </form>
    <form method="POST" id="changeIpForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="change_ip" value="yes">
        <input type="hidden" name="ip" id="formIp">
        <input type="hidden" name="user" id="formIpUser">
    </form>
    <form method="POST" id="changeQuotaForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="change_quota" value="yes">
        <input type="hidden" name="quota" id="formQuota">
        <input type="hidden" name="user" id="formQuotaUser">
    </form>
    <form method="POST" id="changePlanForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="change_plan" value="yes">
        <input type="hidden" name="package" id="formPlan">
        <input type="hidden" name="user" id="formPlanUser">
    </form>
    <form method="POST" id="changeMailForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="change_mail" value="yes">
        <input type="hidden" name="email" id="formMail">
        <input type="hidden" name="user" id="formMailUser">
    </form>
    <form method="POST" id="suspendAccountForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="suspend_account" value="yes">
        <input type="hidden" name="reason" id="formSuspendReason">
        <input type="hidden" name="user" id="formSuspendUser">
    </form>
    <form method="POST" id="unsuspendAccountForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="unsuspend_account" value="yes">
        <input type="hidden" name="user" id="formUnsuspendUser">
    </form>
    <form method="POST" id="terminateAccountForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="terminate_account" value="yes">
        <input type="hidden" name="user" id="formTerminateUser">
    </form>
    <form method="POST"
          action="{% url 'edituser' %}"
          id="editAccountForm"
          class="d-none">
        {% csrf_token %}
        <input type="hidden" name="edit_account" value="yes">
        <input type="hidden" name="user" id="formEditUser">
    </form>
{% endblock %}
{% block extra_js %}
    <script>
  $(function () {

    const escapeHtml = function (value) {
      return $("<div>").text(value == null ? "" : value).html();
    };

    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_users_data' %}",
        type: "GET",
        dataSrc: "data"
      },

      order: [[0, "asc"]],

      columns: [
        {
          data: "domain",
          width: "24%",
          className: "text-nowrap",
          responsivePriority: 1,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return '<span class="text-muted">-</span>';
            }

            const domain = $("<div>")
              .text(data)
              .html();

            return `
              <a href="https://${domain}" class="d-inline-flex align-items-center align-middle gap-1 text-decoration-none" target="_blank" rel="noopener noreferrer">
                <i data-lucide="globe-2"></i>
                <span>${domain}</span>
              </a>
            `;
          }
        },

        {
          data: "username",
          width: "150px",
          className: "text-nowrap",
          responsivePriority: 2,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            const username = escapeHtml(data || "-");

            return `
              <span class="fw-semibold">
                ${username}
              </span>
            `;
          }
        },

        {
          data: "owner",
          className: "text-nowrap",
          responsivePriority: 6,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            const owner = escapeHtml(data || "-");

            return `
              <span class="text-muted">
                ${owner}
              </span>
            `;
          }
        },

        {
          data: "setup_time",
          className: "text-nowrap",
          responsivePriority: 7,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            return escapeHtml(data || "-");
          }
        },

        {
          data: "package",
          className: "text-nowrap",
          responsivePriority: 4,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return '<span class="text-muted">-</span>';
            }

            const packageName = escapeHtml(data);

            return `
              <span class="badge eenos-badge-neutral">
                ${packageName}
              </span>
            `;
          }
        },

        {
          data: "quota",
          className: "text-nowrap",
          responsivePriority: 5,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return '<span class="text-muted">-</span>';
            }

            if (
              String(data).toLowerCase() === "unlimited"
            ) {
              return `
                <span class="fw-medium">
                  {% translate "Unlimited" %}
                </span>
              `;
            }

            return `${escapeHtml(data)} MB`;
          }
        },

        {
          data: "ip_address",
          responsivePriority: 8,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            return data
              ? `<span class="font-monospace text-nowrap">${escapeHtml(data)}</span>`
              : '<span class="text-muted">-</span>';
          }
        },

        {
          data: "contact_email",
          className: "text-nowrap",
          responsivePriority: 9,

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            const email = escapeHtml(data);

            return data
              ? `<a href="mailto:${email}" class="d-inline-flex align-items-center gap-1 text-secondary text-decoration-none"><i data-lucide="mail"></i><span>${email}</span></a>`
              : '<span class="text-muted">-</span>';
          }
        },
        {
            data: "status",
            width: "120px",
            className: "text-nowrap",
            responsivePriority: 3,

            render: function (data, type) {

                if (type !== "display") {
                    return data;
                }

                if (data === "suspended") {
                    return `
                        <span class="eenos-status text-warning">
                            <i data-lucide="pause-circle"></i>
                            <span>{% translate "Suspended" %}</span>
                        </span>
                    `;
                }

                return `
                    <span class="eenos-status text-success">
                        <i data-lucide="circle-check"></i>
                        <span>{% translate "Active" %}</span>
                    </span>
                `;
            }
        },
        

        {
          data: "uapp_url",
          orderable: false,
          searchable: false,
          responsivePriority: 10,
          width: "70px",
          className: "text-start text-nowrap",

          render: function (data, type) {

            if (type !== "display") {
              return data;
            }

            if (!data) {
              return "";
            }

            return `
              <a href="${data}" target="_blank" rel="noopener noreferrer" title="{% translate 'Open Eenos user panel' %}" aria-label="{% translate 'Open Eenos user panel' %}">
                <img src="{% get_static_prefix %}{{theme}}/images/logos/eenos-logo-avatar.svg" alt="{% translate 'Eenos Login' %}" height="22">
              </a>
            `;
          }
        },

        {
          data: null,
          orderable: false,
          searchable: false,
          className: "none text-end",
          width: "110px",
          responsivePriority: 100,

          render: function (data, type, row) {

            const user = $("<div>")
              .text(row.username || "")
              .html();

            const ip = $("<div>")
              .text(row.ip_address || "")
              .html();

            const quota = $("<div>")
              .text(row.quota || "")
              .html();

            const packageName = $("<div>")
              .text(row.package || "")
              .html();

            const domain = $("<div>")
              .text(row.domain || "")
              .html();

            const email = $("<div>")
              .text(row.contact_email || "")
              .html();

            let actions = `
              <div class="eenos-dt-actions">

                <button type="button" class="btn btn-sm btn-outline-secondary action-change-password" data-user="${user}" title="{% translate 'Change Password' %}" aria-label="{% translate 'Change Password' %}">
                  <i data-lucide="key-round"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary action-change-ip" data-user="${user}" data-ip="${ip}" title="{% translate 'Change IP Address' %}" aria-label="{% translate 'Change IP Address' %}">
                  <i data-lucide="network"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary action-change-quota" data-user="${user}" data-quota="${quota}" title="{% translate 'Change Quota' %}" aria-label="{% translate 'Change Quota' %}">
                  <i data-lucide="hard-drive"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary action-change-plan" data-user="${user}" data-domain="${domain}" data-package="${packageName}" title="{% translate 'Change Plan' %}" aria-label="{% translate 'Change Plan' %}">
                  <i data-lucide="package"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary action-change-email" data-user="${user}" data-email="${email}" title="{% translate 'Change Contact Email' %}" aria-label="{% translate 'Change Contact Email' %}">
                  <i data-lucide="mail"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-primary action-modify" data-user="${user}" title="{% translate 'Modify Account' %}" aria-label="{% translate 'Modify Account' %}">
                  <i data-lucide="pencil"></i>
                </button>
            `;

            if (row.status === "suspended") {

              actions += `
                <button type="button" class="btn btn-sm btn-outline-success action-unsuspend" data-user="${user}" title="{% translate 'Unsuspend Account' %}" aria-label="{% translate 'Unsuspend Account' %}">
                  <i data-lucide="user-check"></i>
                </button>
              `;

            } else {

              actions += `
                <button type="button" class="btn btn-sm btn-outline-warning action-suspend" data-user="${user}" title="{% translate 'Suspend Account' %}" aria-label="{% translate 'Suspend Account' %}">
                  <i data-lucide="user-lock"></i>
                </button>
              `;
            }

            actions += `
                <button type="button" class="btn btn-sm btn-outline-danger action-terminate" data-user="${user}" title="{% translate 'Terminate Account' %}" aria-label="{% translate 'Terminate Account' %}">
                  <i data-lucide="trash-2"></i>
                </button>

              </div>
            `;

            return actions;
          }
        }

      ],

      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();
        }

      }

    });


    table.on("responsive-display", function () {

      if (typeof lucide !== "undefined") {
        lucide.createIcons();
      }

    });


    const modifyModalElement =
      document.getElementById("modifyAccountModal");

    const terminateModalElement =
      document.getElementById("terminateAccountModal");

    const suspendModalElement =
      document.getElementById("suspendAccountModal");

    const unsuspendModalElement =
      document.getElementById("unsuspendAccountModal");

    const changePasswordModalElement =
      document.getElementById("changePasswordModal");

    const changeEmailModalElement =
      document.getElementById("changeEmailModal");

    const changePlanModalElement =
      document.getElementById("changePlanModal");

    const changeIpModalElement =
      document.getElementById("changeIpModal");

    const changeQuotaModalElement =
      document.getElementById("changeQuotaModal");


    const modifyModal = modifyModalElement
      ? bootstrap.Modal.getOrCreateInstance(modifyModalElement)
      : null;

    const terminateModal = terminateModalElement
      ? bootstrap.Modal.getOrCreateInstance(terminateModalElement)
      : null;

    const suspendModal = suspendModalElement
      ? bootstrap.Modal.getOrCreateInstance(suspendModalElement)
      : null;

    const unsuspendModal = unsuspendModalElement
      ? bootstrap.Modal.getOrCreateInstance(unsuspendModalElement)
      : null;

    const changePasswordModal = changePasswordModalElement
      ? bootstrap.Modal.getOrCreateInstance(changePasswordModalElement)
      : null;

    const changeEmailModal = changeEmailModalElement
      ? bootstrap.Modal.getOrCreateInstance(changeEmailModalElement)
      : null;

    const changePlanModal = changePlanModalElement
      ? bootstrap.Modal.getOrCreateInstance(changePlanModalElement)
      : null;

    const changeIpModal = changeIpModalElement
      ? bootstrap.Modal.getOrCreateInstance(changeIpModalElement)
      : null;

    const changeQuotaModal = changeQuotaModalElement
      ? bootstrap.Modal.getOrCreateInstance(changeQuotaModalElement)
      : null;


    let selectedUser = "";


    $(document).on("click", ".action-modify", function () {

      selectedUser = $(this).data("user");

      $("#modifyAccountUser").text(selectedUser);

      if (modifyModal) {
        modifyModal.show();
      }

    });


    $("#modifyAccountConfirm").on("click", function () {

      $("#formEditUser").val(selectedUser);

      $("#editAccountForm").trigger("submit");

    });


    $(document).on("click", ".action-terminate", function () {

      selectedUser = $(this).data("user");

      $("#terminateAccountUser").text(selectedUser);

      if (terminateModal) {
        terminateModal.show();
      }

    });


    $("#terminateAccountConfirm").on("click", function () {

      $("#formTerminateUser").val(selectedUser);

      $("#terminateAccountForm").trigger("submit");

    });


    $(document).on("click", ".action-suspend", function () {

      selectedUser = $(this).data("user");

      $("#suspendAccountUser").text(selectedUser);

      $("#suspendAccountReason").val("");

      if (suspendModal) {
        suspendModal.show();
      }

    });


    $("#suspendAccountConfirm").on("click", function () {

      const reason =
        $("#suspendAccountReason").val().trim();

      if (!reason) {
        $("#suspendAccountReason").focus();
        return;
      }

      $("#formSuspendReason").val(reason);
      $("#formSuspendUser").val(selectedUser);

      $("#suspendAccountForm").trigger("submit");

    });


    $(document).on("click", ".action-unsuspend", function () {

      selectedUser = $(this).data("user");

      $("#unsuspendAccountUser").text(selectedUser);

      if (unsuspendModal) {
        unsuspendModal.show();
      }

    });


    $("#unsuspendAccountConfirm").on("click", function () {

      $("#formUnsuspendUser").val(selectedUser);

      $("#unsuspendAccountForm").trigger("submit");

    });


    $(document).on("click", ".action-change-password", function () {

      selectedUser = $(this).data("user");

      $("#changePasswordUser").text(selectedUser);

      $("#newPassword").val("");

      if (changePasswordModal) {
        changePasswordModal.show();
      }

    });


    $("#changePasswordConfirm").on("click", function () {

      const password =
        $("#newPassword").val().trim();

      if (!password) {
        $("#newPassword").focus();
        return;
      }

      $("#formPassword").val(password);
      $("#formPasswordUser").val(selectedUser);

      $("#changePasswordForm").trigger("submit");

    });


    $(document).on("click", ".action-change-email", function () {

      selectedUser = $(this).data("user");

      $("#changeEmailUser").text(selectedUser);

      $("#changeEmailCurrent").text(
        $(this).data("email") || ""
      );

      $("#newContactEmail").val("");

      if (changeEmailModal) {
        changeEmailModal.show();
      }

    });


    $("#changeEmailConfirm").on("click", function () {

      const email =
        $("#newContactEmail").val().trim();

      if (!email) {
        $("#newContactEmail").focus();
        return;
      }

      $("#formMail").val(email);
      $("#formMailUser").val(selectedUser);

      $("#changeMailForm").trigger("submit");

    });


    $(document).on("click", ".action-change-plan", function () {

      selectedUser = $(this).data("user");

      $("#changePlanUser").text(selectedUser);
      $("#changePlanDomain").text($(this).data("domain") || "");

      $("#changePlanCurrent").text(
        $(this).data("package") || ""
      );

      $("#newPlan").val("");

      if (changePlanModal) {
        changePlanModal.show();
      }

    });


    $("#changePlanConfirm").on("click", function () {

      const plan =
        $("#newPlan").val();

      if (!plan) {
        $("#newPlan").focus();
        return;
      }

      $("#formPlan").val(plan);
      $("#formPlanUser").val(selectedUser);

      $("#changePlanForm").trigger("submit");

    });


    $(document).on("click", ".action-change-ip", function () {

      selectedUser = $(this).data("user");

      $("#changeIpUser").text(selectedUser);

      $("#changeIpCurrent").text(
        $(this).data("ip") || ""
      );

      $("#newIp").val("");

      if (changeIpModal) {
        changeIpModal.show();
      }

    });


    $("#changeIpConfirm").on("click", function () {

      const ip =
        $("#newIp").val();

      if (!ip) {
        $("#newIp").focus();
        return;
      }

      $("#formIp").val(ip);
      $("#formIpUser").val(selectedUser);

      $("#changeIpForm").trigger("submit");

    });


    $(document).on("click", ".action-change-quota", function () {

        selectedUser = $(this).data("user");

        const quota =
            $(this).data("quota") || "";
        const quotaValue = String(quota).trim();
        const isUnlimited = quotaValue.toLowerCase() === "unlimited";

        $("#changeQuotaUser").text(selectedUser);

        $("#changeQuotaCurrent").text(
            isUnlimited
            ? quotaValue
            : quotaValue + " MB"
        );

        $("#quotaUnlimited").prop("checked", isUnlimited);

        $("#quotaCustom").prop("checked", !isUnlimited);

        $("#customQuota")
            .val(isUnlimited ? "10240" : quotaValue)
            .prop("disabled", isUnlimited);

        if (changeQuotaModal) {
            changeQuotaModal.show();
        }

        });


        $("input[name='quotaType']").on(
        "change",
        function () {

            const custom =
            $("#quotaCustom").is(":checked");

            $("#customQuota").prop(
            "disabled",
            !custom
            );

            if (custom) {
            $("#customQuota").trigger("focus");
            }

        }
        );


        $("#changeQuotaConfirm").on("click", function () {

        let quota = "unlimited";

        if ($("#quotaCustom").is(":checked")) {

            quota =
            $("#customQuota").val().trim();

            if (!/^\d+$/.test(quota) || Number(quota) < 1) {
            $("#customQuota").focus();
            return;
            }

        }

        $("#formQuota").val(quota);
        $("#formQuotaUser").val(selectedUser);

        $("#changeQuotaForm").trigger("submit");

        });

        $(document).on("click", ".action-change-password", function () {

        selectedUser = $(this).data("user");

        $("#changePasswordUser").text(selectedUser);

        $("#newPassword")
            .val("")
            .attr("type", "password");

        $("#changePasswordModal")
            .find(".eenos-password-generator")
            .removeClass(
                "password-weak " +
                "password-fair " +
                "password-strong " +
                "password-very-strong"
            );

        $("#changePasswordModal")
            .find(".eenos-password-strength-progress")
            .css("width", "0%");

        $("#changePasswordModal")
            .find(".eenos-password-strength-text")
            .text(window.translate.passwordEnter);

        $("#changePasswordModal")
            .find(".eenos-password-toggle")
            .html('<i data-lucide="eye"></i>')
            .attr("aria-label", window.translate.passwordShow)
            .attr("title", window.translate.passwordShow);

        if (typeof lucide !== "undefined") {
            lucide.createIcons();
        }

        if (changePasswordModal) {
            changePasswordModal.show();
        }
    });



  });
    </script>
{% endblock %}