{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Modify User Account" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Modify User Account" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Modify hosting resources, CloudLinux limits, account settings, and reseller options." %}</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" %}
    <!-- =========================================================
     ACCOUNT INFORMATION
    ========================================================= -->
    <div class="eenos-card mb-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-4">
            <!-- ACCOUNT IDENTITY -->
            <div class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center justify-content-center border rounded"
                     style="width: 44px;
                            height: 44px">
                    <i data-lucide="user-round" style="width: 20px; height: 20px;"></i>
                </div>
                <div>
                    <div class="eenos-panel-title mb-1">{% translate "Editing User Account" %}</div>
                    <div class="eenos-panel-subtitle">
                        <strong>{{ user }}</strong>
                        <span class="mx-1 text-muted">·</span>
                        <a href="https://{{ userdata.domain }}"
                           target="_blank"
                           rel="noopener"
                           class="text-decoration-none">{{ userdata.domain }}</a>
                    </div>
                </div>
            </div>
            <!-- ACCOUNT ACTIONS -->
            <div class="d-flex align-items-center flex-wrap gap-2">
                <button type="button"
                        class="btn btn-outline-secondary btn-sm change_password"
                        value="{{ user }}">
                    <i data-lucide="key-round" class="me-1"></i>
                    {% translate "Change Password" %}
                </button>
                <button type="button"
                        class="btn btn-outline-secondary btn-sm change_quota"
                        value="{{ user }}"
                        data-current-quota="{{ userdata.quota }}">
                    <i data-lucide="hard-drive" class="me-1"></i>
                    {% translate "Change Quota" %}
                </button>
                <button type="button"
                        class="btn btn-outline-secondary btn-sm change_plan"
                        value="{{ user }}"
                        data-current-plan="{{ userdata.package }}">
                    <i data-lucide="layers" class="me-1"></i>
                    {% translate "Change Plan" %}
                </button>
                <button type="button"
                        class="btn btn-outline-secondary btn-sm change_mail"
                        value="{{ user }}"
                        data-current-email="{{ userdata.contactemail }}">
                    <i data-lucide="mail" class="me-1"></i>
                    {% translate "Contact Email" %}
                </button>
                <div class="vr mx-1"></div>
                <button type="button"
                        class="btn btn-outline-warning btn-sm suspend_acct"
                        value="{{ user }}">
                    <i data-lucide="lock-keyhole" class="me-1"></i>
                    {% translate "Suspend" %}
                </button>
                <button type="button"
                        class="btn btn-outline-danger btn-sm terminate_acct"
                        value="{{ user }}">
                    <i data-lucide="user-round-x" class="me-1"></i>
                    {% translate "Terminate" %}
                </button>
            </div>
        </div>
    </div>
    <!-- =========================================================
     MAIN ACCOUNT FORM
========================================================= -->
    <form action=""
          class="create_user eenos-form"
          method="POST"
          name="edit_user"
          id="edit_user_form">
        {% csrf_token %}
        <div class="row g-4">
            <!-- =====================================================
         HOSTING INFORMATION
    ====================================================== -->
            <div class="col-xl-6">
                <div class="eenos-card h-100">
                    <div class="mb-4">
                        <div class="eenos-panel-title">{% translate "Hosting Information" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Configure the hosting resources available to this account." %}</div>
                    </div>
                    <!-- HOSTING PLAN -->
                    <div class="mb-4">
                        <div class="text-muted small fw-medium mb-2">{% translate "Hosting Plan" %}</div>
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div class="fw-semibold">{{ userdata.package }}</div>
                            <a href="{% url 'addpkg' %}" class="btn btn-outline-secondary btn-sm">
                                <i data-lucide="plus"></i>
                                {% translate "Create New Package" %}
                            </a>
                        </div>
                    </div>
                    <!-- DISK QUOTA -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Disk Space Quota (MB)" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_quota_option"
                                       id="package_quota_unlimited"
                                       value="unlimited"
                                       class="form-check-input disablethis quota_unlimited"
                                       {% if userdata.quota == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_quota_option"
                                       id="package_quota_custom"
                                       value="custom"
                                       class="form-check-input enablethis quota_custom"
                                       {% if userdata.quota != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select quota"
                                       type="number"
                                       value="{% if userdata.quota == 'unlimited' %}10240{% else %}{{ userdata.quota }}{% endif %}"
                                       id="package_quota"
                                       name="package_quota"
                                       min="1"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="1"
                                       data-parsley-required-message="{% translate 'Please enter the disk quota.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- BANDWIDTH -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Bandwidth Limit (MB)" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_bandwidth_option"
                                       value="unlimited"
                                       class="form-check-input disablethis bandwidth_unlimited"
                                       {% if userdata.bandwidth == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_bandwidth_option"
                                       value="custom"
                                       class="form-check-input enablethis bandwidth_custom"
                                       {% if userdata.bandwidth != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select bandwidth"
                                       type="number"
                                       value="{% if userdata.bandwidth == 'unlimited' %}1048576{% else %}{{ userdata.bandwidth }}{% endif %}"
                                       id="package_bandwidth"
                                       name="package_bandwidth"
                                       min="1"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="1"
                                       data-parsley-required-message="{% translate 'Please enter the bandwidth limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- FTP -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "FTP Accounts" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_ftp_option"
                                       value="unlimited"
                                       class="form-check-input disablethis ftp_unlimited"
                                       {% if userdata.ftp == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_ftp_option"
                                       value="custom"
                                       class="form-check-input enablethis ftp_custom"
                                       {% if userdata.ftp != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select ftp"
                                       type="number"
                                       value="{% if userdata.ftp == 'unlimited' %}0{% else %}{{ userdata.ftp }}{% endif %}"
                                       id="package_ftp"
                                       name="package_ftp"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the FTP account limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- EMAIL -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Email Accounts" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_email_option"
                                       value="unlimited"
                                       class="form-check-input disablethis email_unlimited"
                                       {% if userdata.email == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_email_option"
                                       value="custom"
                                       class="form-check-input enablethis email_custom"
                                       {% if userdata.email != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select email"
                                       type="number"
                                       value="{% if userdata.email == 'unlimited' %}0{% else %}{{ userdata.email }}{% endif %}"
                                       id="package_email"
                                       name="package_email"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the email account limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- EMAIL QUOTA -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Quota per Email Address (MB)" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_mailquota_option"
                                       value="unlimited"
                                       class="form-check-input disablethis mailquota_unlimited"
                                       {% if userdata.mailquota == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_mailquota_option"
                                       value="custom"
                                       class="form-check-input enablethis mailquota_custom"
                                       {% if userdata.mailquota != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select mailquota"
                                       type="number"
                                       value="{% if userdata.mailquota == 'unlimited' %}1024{% else %}{{ userdata.mailquota }}{% endif %}"
                                       id="package_mailquota"
                                       name="package_mailquota"
                                       min="1"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="1"
                                       data-parsley-required-message="{% translate 'Please enter the email quota.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- MAILING LIST -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Mailing Lists" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_maillist_option"
                                       value="unlimited"
                                       class="form-check-input disablethis maillist_unlimited"
                                       {% if userdata.maillist == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_maillist_option"
                                       value="custom"
                                       class="form-check-input enablethis maillist_custom"
                                       {% if userdata.maillist != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select maillist"
                                       type="number"
                                       value="{% if userdata.maillist == 'unlimited' %}0{% else %}{{ userdata.maillist }}{% endif %}"
                                       id="package_maillist"
                                       name="package_maillist"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the mailing list limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- SQL -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "SQL Databases" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_sql_option"
                                       value="unlimited"
                                       class="form-check-input disablethis sql_unlimited"
                                       {% if userdata.sql == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_sql_option"
                                       value="custom"
                                       class="form-check-input enablethis sql_custom"
                                       {% if userdata.sql != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select sql"
                                       type="number"
                                       value="{% if userdata.sql == 'unlimited' %}0{% else %}{{ userdata.sql }}{% endif %}"
                                       id="package_sql"
                                       name="package_sql"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the SQL database limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- SUBDOMAINS -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Sub Domains" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_subdom_option"
                                       value="unlimited"
                                       class="form-check-input disablethis subdom_unlimited"
                                       {% if userdata.subdomains == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_subdom_option"
                                       value="custom"
                                       class="form-check-input enablethis subdom_custom"
                                       {% if userdata.subdomains != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select subdom"
                                       type="number"
                                       value="{% if userdata.subdomains == 'unlimited' %}0{% else %}{{ userdata.subdomains }}{% endif %}"
                                       id="package_subdom"
                                       name="package_subdom"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the subdomain limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- PARKED DOMAINS -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Parked Domains" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_pdom_option"
                                       value="unlimited"
                                       class="form-check-input disablethis pdom_unlimited"
                                       {% if userdata.parkeddomains == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_pdom_option"
                                       value="custom"
                                       class="form-check-input enablethis pdom_custom"
                                       {% if userdata.parkeddomains != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select pdom"
                                       type="number"
                                       value="{% if userdata.parkeddomains == 'unlimited' %}0{% else %}{{ userdata.parkeddomains }}{% endif %}"
                                       id="package_pdom"
                                       name="package_pdom"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the parked domain limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                    <!-- ADDON DOMAINS -->
                    <fieldset class="mb-0 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Addon Domains" %}</legend>
                        <div class="d-flex align-items-center flex-wrap gap-3">
                            <label class="form-check">
                                <input type="radio"
                                       name="package_adom_option"
                                       value="unlimited"
                                       class="form-check-input disablethis adom_unlimited"
                                       {% if userdata.addondomains == "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Unlimited" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="package_adom_option"
                                       value="custom"
                                       class="form-check-input enablethis adom_custom"
                                       {% if userdata.addondomains != "unlimited" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Custom" %}</span>
                            </label>
                            <div style="max-width: 180px">
                                <input class="form-control form-control-sm package_select adom"
                                       type="number"
                                       value="{% if userdata.addondomains == 'unlimited' %}0{% else %}{{ userdata.addondomains }}{% endif %}"
                                       id="package_adom"
                                       name="package_adom"
                                       min="0"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="0"
                                       data-parsley-required-message="{% translate 'Please enter the addon domain limit.' %}">
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <!-- =====================================================
         SETTINGS
    ====================================================== -->
            <div class="col-xl-6">
                <div class="eenos-card h-100">
                    <div class="mb-4">
                        <div class="eenos-panel-title">{% translate "Settings" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Configure account preferences, feature access, system access, mail delivery, and name server settings." %}</div>
                    </div>
                    <!-- LANGUAGE -->
                    <div class="mb-4">
                        <label for="language" class="form-label">{% translate "Language" %}</label>
                        <select class="form-select eenos-select-search"
                                name="language"
                                id="language"
                                data-parsley-required="true"
                                data-parsley-required-message="{% translate 'Please select a language.' %}">
                            {% get_available_languages as LANGUAGES %}
                            {% for lang in LANGUAGES %}
                                <option value="{{ lang.0 }}"
                                        {% if lang.0 == userdata.language %}selected{% endif %}>{{ lang.1 }} ({{ lang.0 }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <!-- THEME -->
                    <div class="mb-4">
                        <label for="theme" class="form-label">{% translate "Theme" %}</label>
                        <select class="form-select eenos-select-search"
                                name="theme"
                                id="theme"
                                data-parsley-required="true"
                                data-parsley-required-message="{% translate 'Please select a theme.' %}">
                            {% for usertheme in themes %}
                                <option value="{{ usertheme }}"
                                        {% if usertheme == userdata.theme %} selected{% endif %}>{{ usertheme }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <!-- FEATURE -->
                    <div class="mb-4">
                        <label for="package_features" class="form-label">{% translate "Feature List" %}</label>
                        <div class="d-flex align-items-center gap-2">
                            <div class="flex-grow-1">
                                <select class="form-select eenos-select-search"
                                        name="package_features"
                                        id="package_features"
                                        data-parsley-required="true"
                                        data-parsley-required-message="{% translate 'Please select a feature list.' %}">
                                    {% for f in features %}
                                        <option value="{{ f }}" {% if f == userdata.feature %}selected{% endif %}>{{ f }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <a href="{% url 'addfeature' %}"
                               class="btn btn-outline-secondary btn-sm flex-shrink-0">
                                <i data-lucide="plus"></i>
                                {% translate "Create Feature" %}
                            </a>
                        </div>
                    </div>
                    <!-- MAIL DELIVERY -->
                    <div class="pt-3 mb-4 border-top">
                        <div class="eenos-panel-title fs-6 mb-1">{% translate "Mail Delivery" %}</div>
                        <div class="eenos-panel-subtitle mb-3">{% translate "Choose whether email for this account is delivered locally or through a remote mail server." %}</div>
                        <div class="d-flex gap-4">
                            <label class="form-check">
                                <input type="radio"
                                       name="mailserver"
                                       value="local"
                                       class="form-check-input disablethis mailserver_default"
                                       {% if userdata.mailserver != "remote" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Local" %}</span>
                            </label>
                            <label class="form-check">
                                <input type="radio"
                                       name="mailserver"
                                       value="remote"
                                       class="form-check-input enablethis mailserver_remote"
                                       {% if userdata.mailserver == "remote" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Remote" %}</span>
                            </label>
                        </div>
                    </div>
                    <!-- NAME SERVERS -->
                    <div class="pt-3 border-top">
                        <div class="eenos-panel-title fs-6 mb-1">{% translate "Name Servers" %}</div>
                        <div class="eenos-panel-subtitle mb-4">{% translate "Specify the authoritative name servers associated with this hosting account." %}</div>
                        {% for ns_number in "1234" %}
                            <div class="mb-3">
                                <label for="ns{{ ns_number }}" class="form-label">{% translate "Name Server" %} NS{{ ns_number }}</label>
                                <input class="form-control"
                                       type="text"
                                       id="ns{{ ns_number }}"
                                       name="ns{{ ns_number }}"
                                       value="{% if ns_number == '1' %}{{ userdata.nameservers.0 }}{% elif ns_number == '2' %}{{ userdata.nameservers.1 }}{% elif ns_number == '3' %}{{ userdata.nameservers.2 }}{% else %}{{ userdata.nameservers.3 }}{% endif %}"
                                       placeholder="ns{{ ns_number }}.domain.com"
                                       {% if ns_number == "1" %} data-parsley-required="true" data-parsley-required-message="{% translate 'Please enter the first name server.' %}" {% endif %}>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!-- =====================================================
                CLOUDLINUX
             ====================================================== -->
            {% if havecl %}
                <div class="col-12">
                    <div class="eenos-card h-100">
                        <div class="mb-4">
                            <div class="eenos-panel-title">{% translate "CloudLinux LVE Settings" %}</div>
                            <div class="eenos-panel-subtitle">
                                {% translate "Configure CloudLinux resource limits for this hosting account." %}
                            </div>
                        </div>
                        <!-- ENABLE LVE -->
                        <fieldset class="mb-4 border-0 p-0">
                            <legend class="form-label mb-2">{% translate "Enable LVE" %}</legend>
                            <div class="form-text mb-2">{% translate "Enable CloudLinux resource control on this account." %}</div>
                            <div class="d-flex align-items-center gap-4">
                                <label class="form-check">
                                    <input type="radio"
                                           name="package_lve"
                                           id="package_lve_no"
                                           value="no"
                                           class="form-check-input lve_toggle"
                                           {% if userdata.cloudlinux.status != "on" %}checked{% endif %}>
                                    <span class="form-check-label">{% translate "No" %}</span>
                                </label>
                                <label class="form-check">
                                    <input type="radio"
                                           name="package_lve"
                                           id="package_lve_yes"
                                           value="yes"
                                           class="form-check-input lve_toggle"
                                           {% if userdata.cloudlinux.status == "on" %}checked{% endif %}>
                                    <span class="form-check-label">{% translate "Yes" %}</span>
                                </label>
                            </div>
                        </fieldset>
                        <!-- LVE RESOURCE SETTINGS -->
                        <div id="cloudlinux_lve_settings" class="cloudlinux-lve-settings">
                            <!-- CPU -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "CPU Speed" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit CPU usage. 100% represents one CPU core." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_speed_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.speed or userdata.cloudlinux.speed == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_speed_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.speed and userdata.cloudlinux.speed != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_speed"
                                               id="package_lve_speed"
                                               name="package_lve_speed"
                                               value="{% if not userdata.cloudlinux.speed or userdata.cloudlinux.speed == 'default' %}100{% else %}{{ userdata.cloudlinux.speed }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the CPU speed limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- MEMORY -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Memory (RAM)" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit physical memory available to applications inside LVE." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_mem_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.mem or userdata.cloudlinux.mem == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_mem_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.mem and userdata.cloudlinux.mem != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_mem"
                                               id="package_lve_mem"
                                               name="package_lve_mem"
                                               value="{% if not userdata.cloudlinux.mem or userdata.cloudlinux.mem == 'default' %}1024{% else %}{{ userdata.cloudlinux.mem }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the memory limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- VMEM -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Virtual Memory (VMEM)" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit virtual memory available to applications inside LVE." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_vmem_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.vmem or userdata.cloudlinux.vmem == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_vmem_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.vmem and userdata.cloudlinux.vmem != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_vmem"
                                               id="package_lve_vmem"
                                               name="package_lve_vmem"
                                               value="{% if not userdata.cloudlinux.vmem or userdata.cloudlinux.vmem == 'default' %}0{% else %}{{ userdata.cloudlinux.vmem }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="0"
                                               data-parsley-required-message="{% translate 'Please enter the virtual memory limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- ENTRY PROCESSES -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Max Entry Processes" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit the number of entry processes." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_maxEntryProcs_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.maxEntryProcs or userdata.cloudlinux.maxEntryProcs == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_maxEntryProcs_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.maxEntryProcs and userdata.cloudlinux.maxEntryProcs != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_maxEntryProcs"
                                               id="package_lve_maxEntryProcs"
                                               name="package_lve_maxEntryProcs"
                                               value="{% if not userdata.cloudlinux.maxEntryProcs or userdata.cloudlinux.maxEntryProcs == 'default' %}20{% else %}{{ userdata.cloudlinux.maxEntryProcs }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the maximum entry processes.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- NPROC -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Nproc" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit the number of processes for the user." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_nproc_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.nproc or userdata.cloudlinux.nproc == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_nproc_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.nproc and userdata.cloudlinux.nproc != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_nproc"
                                               id="package_lve_nproc"
                                               name="package_lve_nproc"
                                               value="{% if not userdata.cloudlinux.nproc or userdata.cloudlinux.nproc == 'default' %}100{% else %}{{ userdata.cloudlinux.nproc }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the process limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- IO -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Disk I/O" %}</legend>
                                <div class="form-text mb-2">{% translate "Define I/O limits in KB/s." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_io_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.io or userdata.cloudlinux.io == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_io_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.io and userdata.cloudlinux.io != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_io"
                                               id="package_lve_io"
                                               name="package_lve_io"
                                               value="{% if not userdata.cloudlinux.io or userdata.cloudlinux.io == 'default' %}1024{% else %}{{ userdata.cloudlinux.io }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the disk I/O limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                            <!-- IOPS -->
                            <fieldset class="mb-0 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Disk IOPS" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit disk I/O operations per second." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_iops_option"
                                               value="default"
                                               class="form-check-input lve_option"
                                               {% if not userdata.cloudlinux.iops or userdata.cloudlinux.iops == "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Default" %}</span>
                                    </label>
                                    <label class="form-check">
                                        <input type="radio"
                                               name="package_lve_iops_option"
                                               value="custom"
                                               class="form-check-input lve_option"
                                               {% if userdata.cloudlinux.iops and userdata.cloudlinux.iops != "default" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Custom" %}</span>
                                    </label>
                                    <div style="max-width: 180px">
                                        <input type="number"
                                               min="1"
                                               class="form-control form-control-sm lve_iops"
                                               id="package_lve_iops"
                                               name="package_lve_iops"
                                               value="{% if not userdata.cloudlinux.iops or userdata.cloudlinux.iops == 'default' %}1024{% else %}{{ userdata.cloudlinux.iops }}{% endif %}"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the disk IOPS limit.' %}">
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            {% else %}
                <input type="hidden" name="package_lve" value="no">
            {% endif %}
            <!-- =====================================================
         ADDITIONAL SETTINGS
    ====================================================== -->
            <div class="col-12">
                <div class="eenos-card">
                    <div class="mb-4">
                        <div class="eenos-panel-title">{% translate "Additional Settings" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Configure reseller capabilities and domain email authentication." %}</div>
                    </div>
                    {% if request.session.tweaksettings.resellerchain == "on" %}
                        <!-- RESELLER -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-check">
                                    <input class="form-check-input"
                                           type="checkbox"
                                           name="reseller"
                                           id="chk_reseller"
                                           {% if userdata.reseller.status == "on" %}checked{% endif %}>
                                    <span class="form-check-label">{% translate "Make this account a reseller" %}</span>
                                </label>
                            </div>
                        </div>
                        <!-- RESELLER OPTIONS -->
                        <div class="reseller_div ps-4 border-start"
                             {% if userdata.reseller.status != "on" %}style="display:none"{% endif %}>
                            <!-- SELF ACCOUNT -->
                            <div class="row align-items-center g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="chk_resellerself" class="form-label mb-0">{% translate "Self-own Account" %}</label>
                                    <div class="small text-muted">{% translate "Allow this reseller to modify its own hosting account." %}</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-check">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               name="resellerself"
                                               id="chk_resellerself"
                                               {% if userdata.reseller.selfown == "on" %}checked{% endif %}>
                                        <span class="form-check-label">{% translate "Allow" %}</span>
                                    </label>
                                </div>
                            </div>
                            <!-- ACCOUNT LIMIT -->
                            <div class="row align-items-center g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="reseller_limt_value" class="form-label mb-0">{% translate "Limit Reseller by Account" %}</label>
                                    <div class="small text-muted">{% translate "Maximum number of allowed sub-accounts." %}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex flex-wrap align-items-center gap-3">
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_limt_option"
                                                   value="unlimited"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_limt == "unlimited" or not reseller.reseller_limt %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Unlimited" %}</span>
                                        </label>
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_limt_option"
                                                   value="on"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_limt and reseller.reseller_limt != "unlimited" %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Limit" %}</span>
                                        </label>
                                        <input class="form-control reseller_limt_value"
                                               type="number"
                                               min="1"
                                               name="reseller_limt_value"
                                               id="reseller_limt_value"
                                               value="{% if reseller.reseller_limt and reseller.reseller_limt != 'unlimited' %}{{ reseller.reseller_limt }}{% endif %}"
                                               style="max-width:120px"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the reseller account limit.' %}">
                                    </div>
                                </div>
                            </div>
                            <!-- DISK QUOTA -->
                            <div class="row align-items-center g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="reseller_quota_value" class="form-label mb-0">{% translate "Reseller Disk Quota" %}</label>
                                    <div class="small text-muted">{% translate "Limit reseller by disk usage." %}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex flex-wrap align-items-center gap-3">
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_quota_option"
                                                   value="unlimited"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_quota == "unlimited" or not reseller.reseller_quota %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Unlimited" %}</span>
                                        </label>
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_quota_option"
                                                   value="on"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_quota and reseller.reseller_quota != "unlimited" %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Limit" %}</span>
                                        </label>
                                        <input class="form-control reseller_quota_value"
                                               type="number"
                                               min="1"
                                               name="reseller_quota_value"
                                               id="reseller_quota_value"
                                               value="{% if reseller.reseller_quota and reseller.reseller_quota != 'unlimited' %}{{ reseller.reseller_quota }}{% endif %}"
                                               style="max-width:120px"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the reseller disk quota.' %}">
                                        <span class="text-muted">MB</span>
                                    </div>
                                </div>
                            </div>
                            <!-- BANDWIDTH -->
                            <div class="row align-items-center g-3">
                                <div class="col-md-6">
                                    <label for="reseller_bandwidth_value" class="form-label mb-0">{% translate "Reseller Bandwidth" %}</label>
                                    <div class="small text-muted">{% translate "Limit reseller by bandwidth usage." %}</div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex flex-wrap align-items-center gap-3">
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_bandwidth_option"
                                                   value="unlimited"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_bandwidth == "unlimited" or not reseller.reseller_bandwidth %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Unlimited" %}</span>
                                        </label>
                                        <label class="form-check">
                                            <input type="radio"
                                                   name="reseller_bandwidth_option"
                                                   value="on"
                                                   class="form-check-input reseller_options"
                                                   {% if reseller.reseller_bandwidth and reseller.reseller_bandwidth != "unlimited" %}checked{% endif %}>
                                            <span class="form-check-label">{% translate "Limit" %}</span>
                                        </label>
                                        <input class="form-control reseller_bandwidth_value"
                                               type="number"
                                               min="1"
                                               name="reseller_bandwidth_value"
                                               id="reseller_bandwidth_value"
                                               value="{% if reseller.reseller_bandwidth and reseller.reseller_bandwidth != 'unlimited' %}{{ reseller.reseller_bandwidth }}{% endif %}"
                                               style="max-width:120px"
                                               data-parsley-required="true"
                                               data-parsley-type="integer"
                                               data-parsley-min="1"
                                               data-parsley-required-message="{% translate 'Please enter the reseller bandwidth limit.' %}">
                                        <span class="text-muted">MB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="reseller_limt" id="reseller_limt">
                        <input type="hidden" name="reseller_quota" id="reseller_quota">
                        <input type="hidden" name="reseller_bandwidth" id="reseller_bandwidth">
                    {% endif %}
                    <!-- EMAIL AUTHENTICATION -->
                    <div class="eenos-section-divider my-4"></div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-check">
                                <input class="form-check-input"
                                       type="checkbox"
                                       name="dkim"
                                       id="chk_dkim"
                                       {% if userdata.dkim == "on" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "DomainKeys Identified Mail" %} (DKIM)</span>
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-check">
                                <input class="form-check-input"
                                       type="checkbox"
                                       name="spf"
                                       id="chk_spf"
                                       {% if userdata.spf == "on" %}checked{% endif %}>
                                <span class="form-check-label">{% translate "Sender Policy Framework" %} (SPF)</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- SAVE ACCOUNT -->
        <div class="mt-5 pt-4 border-top d-flex align-items-center">
            <button type="button"
                    class="btn btn-primary px-4 py-2 edit_account"
                    name="edit_account">
                <i data-lucide="save" class="me-2"></i>
                {% translate "Save Account Settings" %}
            </button>
        </div>
        <input type="hidden" name="user" id="edit_user" value="{{ user }}">
        <input type="hidden" name="modify_account" id="editacct">
    </form>
    <!-- =========================================================
     DIRECT OPERATION FORMS
========================================================= -->
    <form action="{% url 'listuser' %}" method="POST" id="change_pwd_form">
        {% csrf_token %}
        <input type="hidden" name="change_password" id="change_password">
        <input type="hidden" name="password" id="password">
        <input type="hidden" name="user" id="password_usr">
    </form>
    <form action="{% url 'listuser' %}" method="POST" id="change_quota_form">
        {% csrf_token %}
        <input type="hidden" name="change_quota" id="change_quota">
        <input type="hidden" name="quota" id="quota">
        <input type="hidden" name="user" id="quota_usr">
    </form>
    <form action="{% url 'listuser' %}" method="POST" id="change_plan_form">
        {% csrf_token %}
        <input type="hidden" name="change_plan" id="change_plan">
        <input type="hidden" name="package" id="plan">
        <input type="hidden" name="user" id="plan_usr">
    </form>
    <form action="{% url 'listuser' %}" method="POST" id="change_mail_form">
        {% csrf_token %}
        <input type="hidden" name="change_mail" id="change_mail">
        <input type="hidden" name="email" id="mail">
        <input type="hidden" name="user" id="mail_usr">
    </form>
    <form action="{% url 'listuser' %}" method="POST" id="change_suspend_form">
        {% csrf_token %}
        <input type="hidden" name="suspend_account" id="suspend_account">
        <input type="hidden" name="reason" id="reason">
        <input type="hidden" name="user" id="suspend_usr">
    </form>
    <form action="{% url 'listuser' %}"
          method="POST"
          id="change_terminate_form">
        {% csrf_token %}
        <input type="hidden" name="terminate_account" id="terminate_account">
        <input type="hidden" name="user" id="terminate_usr">
    </form>
    <!-- =========================================================
     CHANGE PASSWORD MODAL
    ========================================================= -->
    <div class="modal fade"
         id="changePasswordModal"
         tabindex="-1"
         aria-labelledby="changePasswordModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content eenos-form" id="changePasswordValidationForm">
                <!-- HEADER -->
                <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>
                <!-- BODY -->
                <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 class="eenos-modal-info-value">{{ user }}</div>
                        </div>
                    </div>
                    <!-- PASSWORD -->
                    <div class="mb-3">
                        <label for="new_pass" 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="new_pass"
                                       autocomplete="new-password"
                                       placeholder="{% translate 'Enter a new password' %}"
                                       name="new_pass"
                                       data-parsley-required="true"
                                       data-parsley-minlength="8"
                                       data-parsley-required-message="{% translate 'Please enter a password.' %}"
                                       data-parsley-minlength-message="{% translate 'Password must contain at least 8 characters.' %}">
                                <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>
                <!-- FOOTER -->
                <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="confirm_change_password">
                        <i data-lucide="key-round"></i>
                        {% translate "Change Password" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
    <!-- =========================================================
     CHANGE QUOTA MODAL
    ========================================================= -->
    <div class="modal fade"
         id="changeQuotaModal"
         tabindex="-1"
         aria-labelledby="changeQuotaModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content eenos-form" id="changeQuotaValidationForm">
                <!-- HEADER -->
                <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>
                <!-- BODY -->
                <div class="modal-body">
                    <!-- ACCOUNT -->
                    <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 class="eenos-modal-account-name">{{ user }}</div>
                        </div>
                    </div>
                    <!-- CURRENT QUOTA -->
                    <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="current_quota"></span>
                        </div>
                    </div>
                    <!-- NEW QUOTA -->
                    <div>
                        <div class="form-label fw-medium">{% translate "New Disk Quota" %}</div>
                        <div class="eenos-quota-options">
                            <!-- UNLIMITED -->
                            <label class="eenos-quota-option" for="modalQuotaUnlimited">
                                <input type="radio"
                                       class="form-check-input"
                                       name="modal_package_quota"
                                       id="modalQuotaUnlimited"
                                       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>
                            <!-- CUSTOM -->
                            <label class="eenos-quota-option" for="modalQuotaCustom">
                                <input type="radio"
                                       class="form-check-input"
                                       name="modal_package_quota"
                                       id="modalQuotaCustom"
                                       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>
                        <!-- STORAGE LIMIT -->
                        <div class="mt-3">
                            <label for="custom_quota" 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="custom_quota"
                                       value="10240"
                                       disabled
                                       min="1"
                                       name="custom_quota"
                                       data-parsley-required="true"
                                       data-parsley-type="integer"
                                       data-parsley-min="1"
                                       data-parsley-required-message="{% translate 'Please enter a disk quota.' %}">
                                <span class="input-group-text">MB</span>
                            </div>
                            <div class="form-text">{% translate "Quota is specified in megabytes (MB)." %}</div>
                        </div>
                    </div>
                    <!-- NOTICE -->
                    <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>
                <!-- FOOTER -->
                <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="confirm_change_quota">
                        <i data-lucide="hard-drive"></i>
                        {% translate "Change Quota" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
    <!-- =========================================================
        CHANGE PLAN MODAL
    ========================================================= -->
    <div class="modal fade"
         id="changePlanModal"
         tabindex="-1"
         aria-labelledby="changePlanModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content eenos-form" id="changePlanValidationForm">
                <!-- HEADER -->
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changePlanModalLabel">
                            <i data-lucide="package"></i>
                            {% translate "Change Hosting Plan" %}
                        </h5>
                        <div class="text-muted small mt-1">
                            {% translate "Upgrade or downgrade the resources assigned to this hosting account." %}
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <!-- BODY -->
                <div class="modal-body">
                    <!-- ACCOUNT -->
                    <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 class="eenos-modal-account-name">{{ user }}</div>
                        </div>
                    </div>
                    <!-- PLAN CHANGE -->
                    <div class="eenos-plan-change mb-4">
                        <!-- CURRENT PLAN -->
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon">
                                <i data-lucide="package-open"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "Current Plan" %}</div>
                                <div id="current_plan" class="eenos-plan-name"></div>
                            </div>
                        </div>
                        <!-- ARROW -->
                        <div class="eenos-plan-arrow">
                            <i data-lucide="arrow-right"></i>
                        </div>
                        <!-- NEW PLAN -->
                        <div class="eenos-plan-item">
                            <div class="eenos-plan-icon eenos-plan-icon-primary">
                                <i data-lucide="package-check"></i>
                            </div>
                            <div class="eenos-plan-content">
                                <div class="eenos-modal-label">{% translate "New Plan" %}</div>
                                <div class="text-muted small">{% translate "Select below" %}</div>
                            </div>
                        </div>
                    </div>
                    <!-- NEW PLAN SELECT -->
                    <div>
                        <label for="newplan" class="form-label fw-medium">{% translate "New Hosting Plan" %}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i data-lucide="layers"></i>
                            </span>
                            <select class="form-select eenos-select-search"
                                    id="newplan"
                                    name="newplan"
                                    data-parsley-required="true"
                                    data-parsley-required-message="{% translate 'Please choose a hosting plan.' %}">
                                <option value="">{% translate "Select Hosting Plan" %}</option>
                                {% for p in packages %}
                                    <option value="{{ p }}">{{ p }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-text">{% translate "The account will be moved to the selected hosting plan." %}</div>
                    </div>
                    <!-- NOTICE -->
                    <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 "Hosting Plan Change" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Changing the hosting plan may modify the resources and features available to this account." %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- FOOTER -->
                <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="confirm_change_plan">
                        <i data-lucide="arrow-right-left"></i>
                        {% translate "Change Plan" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- =========================================================
     CHANGE EMAIL MODAL
    ========================================================= -->
    <div class="modal fade"
         id="changeMailModal"
         tabindex="-1"
         aria-labelledby="changeMailModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content eenos-form" id="changeMailValidationForm">
                <!-- HEADER -->
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="changeMailModalLabel">
                            <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>
                <!-- BODY -->
                <div class="modal-body">
                    <!-- ACCOUNT -->
                    <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 class="eenos-modal-account-name">{{ user }}</div>
                        </div>
                    </div>
                    <!-- CURRENT EMAIL -->
                    <div class="eenos-modal-field mb-4">
                        <div class="form-label">{% translate "Current Contact Email" %}</div>
                        <div class="eenos-modal-value">
                            <i data-lucide="mail"></i>
                            <span id="current_mail"></span>
                        </div>
                    </div>
                    <!-- NEW EMAIL -->
                    <div>
                        <label for="new_mail" class="form-label fw-medium">{% translate "New Contact 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="new_mail"
                                   autocomplete="off"
                                   placeholder="{% translate 'Enter the new contact email' %}"
                                   name="new_mail"
                                   data-parsley-required="true"
                                   data-parsley-type="email"
                                   data-parsley-required-message="{% translate 'Please enter an email address.' %}"
                                   data-parsley-type-message="{% translate 'Please enter a valid email address.' %}">
                        </div>
                        <div class="form-text">
                            {% translate "This email address will be used for account notifications and contact information." %}
                        </div>
                    </div>
                    <!-- NOTICE -->
                    <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 "Contact Information" %}</div>
                            <div class="eenos-notice-text">
                                {% translate "Make sure the new email address is valid and accessible. Important account notifications may be sent to this address." %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- FOOTER -->
                <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="confirm_change_mail">
                        <i data-lucide="mail-check"></i>
                        {% translate "Change Email" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- =========================================================
     SUSPEND ACCOUNT MODAL
    ========================================================= -->
    <div class="modal fade"
         id="suspendModal"
         tabindex="-1"
         aria-labelledby="suspendModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content eenos-form" id="suspendValidationForm">
                <!-- HEADER -->
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title d-flex align-items-center gap-2"
                            id="suspendModalLabel">
                            <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>
                <!-- BODY -->
                <div class="modal-body">
                    <!-- ACCOUNT -->
                    <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="suspend_user" class="eenos-modal-account-name"></div>
                        </div>
                    </div>
                    <!-- WARNING -->
                    <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>
                    <!-- SUSPENSION REASON -->
                    <div class="mb-0">
                        <label for="suspend_reason" 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="suspend_reason"
                                   autocomplete="off"
                                   placeholder="{% translate 'Enter the reason for suspension' %}"
                                   name="suspend_reason"
                                   data-parsley-required="true"
                                   data-parsley-required-message="{% translate 'Please enter a reason for suspension.' %}">
                        </div>
                        <div class="form-text">{% translate "A reason is required before the account can be suspended." %}</div>
                    </div>
                </div>
                <!-- FOOTER -->
                <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="confirm_suspend">
                        <i data-lucide="user-lock"></i>
                        {% translate "Suspend Account" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- =========================================================
     TERMINATE MODAL
========================================================= -->
    <div class="modal fade" id="terminateModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger">
                        <i data-lucide="user-round-x"></i>
                        {% translate "Terminate Account" %}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Permanent Account Removal" %}</div>
                            <div class="eenos-notice-text">{% translate "This operation will remove the user account and its data from this server. This action cannot be undone." %}</div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="form-label">{% translate "User" %}</div>
                        <div id="terminate_user" class="fw-semibold"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-danger" id="confirm_terminate">{% translate "Terminate Account" %}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- =========================================================
     SAVE ACCOUNT CONFIRMATION MODAL
    ========================================================= -->
    <div class="modal fade"
         id="editAccountModal"
         tabindex="-1"
         aria-labelledby="editAccountModalLabel"
         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="editAccountModalLabel">
                            <i data-lucide="save"></i>
                            {% translate "Save Account Settings" %}
                        </h5>
                        <div class="text-muted small mt-1">{% translate "Apply the updated hosting and account settings." %}</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-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 "Confirm Account Changes" %}</div>
                            <div class="eenos-notice-text">{% translate "The updated settings will be applied 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="confirm_edit_account">
                        <i data-lucide="save"></i>
                        {% translate "Save Changes" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
(function () {
    "use strict";


    // Helpers

    function getModal(id) {
        const element = document.getElementById(id);

        if (!element || typeof bootstrap === "undefined") {
            return null;
        }

        return bootstrap.Modal.getOrCreateInstance(element);
    }


    function showAlert(title, content, icon = "warning") {
        if (typeof Swal !== "undefined") {
            Swal.fire({
                icon: icon,
                title: title,
                text: content
            });

            return;
        }

        alert(content);
    }


    function getValue(id) {
        return document.getElementById(id)?.value || "";
    }


    function setValue(id, value) {
        const element = document.getElementById(id);

        if (element) {
            element.value = value;
        }
    }


    function validateForm(selector) {
        const $form = $(selector);

        if (!$form.length) {
            return false;
        }

        const parsleyForm = $form.parsley();

        parsleyForm.validate();

        return parsleyForm.isValid();
    }


    function resetParsleyForm(selector) {
        const $form = $(selector);

        if ($form.length) {
            $form.parsley().reset();
        }
    }


    // Conditional Parsley field
// Enable or disable a conditional field and its Parsley validation.

function setConditionalField($input, enabled, focusInput = false) {
    if (!$input.length) {
        return;
    }

    const parsleyField = $input.parsley();

    if (enabled) {
        /*
         * Custom / Limit selected.
         *
         * Enable the field and make it required.
         */

        $input
            .prop("disabled", false)
            .prop("required", true)
            .attr("data-parsley-required", "true");

        if (parsleyField) {
            parsleyField.refresh();
        }

        if (focusInput) {
            $input.trigger("focus");
        }

        return;
    }

    /*
     * Unlimited / Default selected.
     *
     * The numeric field is not applicable, so completely
     * remove it from validation.
     */

    if (parsleyField) {
        parsleyField.reset();
    }

    $input
        .prop("required", false)
        .removeAttr("required")
        .removeAttr("data-parsley-required")
        .prop("disabled", true)
        .removeClass(
            "parsley-error parsley-success is-invalid is-valid"
        );

    $input
        .siblings(".invalid-feedback")
        .hide()
        .empty();

    if (parsleyField) {
        parsleyField.refresh();
    }
}
    // Generic Unlimited / Custom resource option

    function setupResourceOption(radioSelector, inputSelector) {
        const $radios = $(radioSelector);
        const $input = $(inputSelector);

        if (!$radios.length || !$input.length) {
            return;
        }

        function update(focusInput = false) {
            const $selected = $radios.filter(":checked");

            const isCustom =
                $selected.length &&
                $selected.val() === "custom";

            setConditionalField(
                $input,
                isCustom,
                isCustom && focusInput
            );
        }

        $radios.on("change", function () {
            update(true);
        });

        update();
    }


    // Hosting resources

    function initHostingResources() {
        const resources = [
            ["package_quota_option", "#package_quota"],
            ["package_bandwidth_option", "#package_bandwidth"],
            ["package_ftp_option", "#package_ftp"],
            ["package_email_option", "#package_email"],
            ["package_mailquota_option", "#package_mailquota"],
            ["package_maillist_option", "#package_maillist"],
            ["package_sql_option", "#package_sql"],
            ["package_subdom_option", "#package_subdom"],
            ["package_pdom_option", "#package_pdom"],
            ["package_adom_option", "#package_adom"]
        ];

        resources.forEach(function (resource) {
            setupResourceOption(
                'input[name="' + resource[0] + '"]',
                resource[1]
            );
        });
    }


    // CloudLinux

    function initCloudLinux() {
        const lveToggles = document.querySelectorAll(
            'input[name="package_lve"]'
        );

        const lveContainer = document.getElementById(
            "cloudlinux_lve_settings"
        );

        if (!lveToggles.length || !lveContainer) {
            return;
        }

        const resources = [
            {
                radio: 'input[name="package_lve_speed_option"]',
                input: "#package_lve_speed"
            },
            {
                radio: 'input[name="package_lve_mem_option"]',
                input: "#package_lve_mem"
            },
            {
                radio: 'input[name="package_lve_vmem_option"]',
                input: "#package_lve_vmem"
            },
            {
                radio: 'input[name="package_lve_maxEntryProcs_option"]',
                input: "#package_lve_maxEntryProcs"
            },
            {
                radio: 'input[name="package_lve_nproc_option"]',
                input: "#package_lve_nproc"
            },
            {
                radio: 'input[name="package_lve_io_option"]',
                input: "#package_lve_io"
            },
            {
                radio: 'input[name="package_lve_iops_option"]',
                input: "#package_lve_iops"
            }
        ];


        function updateCloudLinux(focusChanged = false) {
            const selectedLve = document.querySelector(
                'input[name="package_lve"]:checked'
            );

            const enabled =
                selectedLve &&
                selectedLve.value === "yes";

            lveContainer.style.display =
                enabled ? "" : "none";


            resources.forEach(function (resource) {
                const radios =
                    lveContainer.querySelectorAll(
                        resource.radio
                    );

                const input =
                    lveContainer.querySelector(
                        resource.input
                    );

                if (!radios.length || !input) {
                    return;
                }


                radios.forEach(function (radio) {
                    radio.disabled = !enabled;
                });


                const selected =
                    lveContainer.querySelector(
                        resource.radio + ":checked"
                    );


                if (!enabled || !selected) {
                    setConditionalField(
                        $(input),
                        false
                    );

                    return;
                }


                const isCustom =
                    selected.value === "custom";


                setConditionalField(
                    $(input),
                    isCustom,
                    isCustom && focusChanged
                );
            });
        }


        lveToggles.forEach(function (radio) {
            radio.addEventListener(
                "change",
                function () {
                    updateCloudLinux(false);
                }
            );
        });


        resources.forEach(function (resource) {
            lveContainer
                .querySelectorAll(resource.radio)
                .forEach(function (radio) {
                    radio.addEventListener(
                        "change",
                        function () {
                            updateCloudLinux(true);
                        }
                    );
                });
        });


        updateCloudLinux();
    }


    // Reseller

    function initReseller() {
        const reseller =
            document.getElementById(
                "chk_reseller"
            );

        const resellerDiv =
            document.querySelector(
                ".reseller_div"
            );

        const resellerSelf =
            document.getElementById(
                "chk_resellerself"
            );

        if (!reseller || !resellerDiv) {
            return;
        }


        const groups = [
            {
                option:
                    'input[name="reseller_limt_option"]',
                value:
                    "#reseller_limt_value"
            },
            {
                option:
                    'input[name="reseller_quota_option"]',
                value:
                    "#reseller_quota_value"
            },
            {
                option:
                    'input[name="reseller_bandwidth_option"]',
                value:
                    "#reseller_bandwidth_value"
            }
        ];


        function updateOptions(focusChanged = false) {
            groups.forEach(function (group) {
                const option =
                    document.querySelector(
                        group.option + ":checked"
                    );

                const $valueInput =
                    $(group.value);

                if (!$valueInput.length) {
                    return;
                }


                if (!reseller.checked) {
                    setConditionalField(
                        $valueInput,
                        false
                    );

                    return;
                }


                const enabled =
                    option &&
                    option.value === "on";


                setConditionalField(
                    $valueInput,
                    enabled,
                    enabled && focusChanged
                );
            });
        }


        function updateReseller() {
            const enabled =
                reseller.checked;

            resellerDiv.style.display =
                enabled ? "" : "none";


            resellerDiv
                .querySelectorAll(
                    'input[type="radio"], input[type="checkbox"]'
                )
                .forEach(function (input) {
                    input.disabled = !enabled;
                });


            if (resellerSelf) {
                resellerSelf.disabled = !enabled;
            }


            updateOptions();
        }


        reseller.addEventListener(
            "change",
            updateReseller
        );


        groups.forEach(function (group) {
            document
                .querySelectorAll(group.option)
                .forEach(function (radio) {
                    radio.addEventListener(
                        "change",
                        function () {
                            updateOptions(true);
                        }
                    );
                });
        });


        updateReseller();
    }


    // Password modal

    function initPasswordModal() {
        $(".change_password").on(
            "click",
            function () {
                const $input =
                    $("#new_pass");

                $input
                    .val("")
                    .attr("type", "password")
                    .trigger("input")
                    .trigger("change");


                resetParsleyForm(
                    "#changePasswordValidationForm"
                );


                const modal =
                    getModal(
                        "changePasswordModal"
                    );

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


        $("#confirm_change_password").on(
            "click",
            function () {
                if (
                    !validateForm(
                        "#changePasswordValidationForm"
                    )
                ) {
                    return;
                }


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


                setValue(
                    "change_password",
                    "yes"
                );

                setValue(
                    "password",
                    password
                );

                setValue(
                    "password_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_pwd_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );
    }


    // Change quota modal

    function initQuotaModal() {
        const $unlimited =
            $("#modalQuotaUnlimited");

        const $custom =
            $("#modalQuotaCustom");

        const $input =
            $("#custom_quota");


        function updateQuotaInput(
            focusInput = false
        ) {
            const isCustom =
                $custom.is(":checked");


            setConditionalField(
                $input,
                isCustom,
                isCustom && focusInput
            );
        }


        $(".change_quota").on(
            "click",
            function () {
                const quota =
                    String(
                        $(this).data(
                            "current-quota"
                        ) ?? ""
                    );


                $("#current_quota").text(
                    quota
                );


                if (quota === "unlimited") {
                    $unlimited.prop(
                        "checked",
                        true
                    );

                    $input.val("10240");
                } else {
                    $custom.prop(
                        "checked",
                        true
                    );

                    $input.val(quota);
                }


                updateQuotaInput();


                resetParsleyForm(
                    "#changeQuotaValidationForm"
                );


                const modal =
                    getModal(
                        "changeQuotaModal"
                    );

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


        $unlimited.on(
            "change",
            function () {
                updateQuotaInput();
            }
        );


        $custom.on(
            "change",
            function () {
                updateQuotaInput(true);
            }
        );


        $("#confirm_change_quota").on(
            "click",
            function () {
                if (
                    !validateForm(
                        "#changeQuotaValidationForm"
                    )
                ) {
                    return;
                }


                const quota =
                    $custom.is(":checked")
                        ? $input.val().trim()
                        : "unlimited";


                setValue(
                    "change_quota",
                    "yes"
                );

                setValue(
                    "quota",
                    quota
                );

                setValue(
                    "quota_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_quota_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );


        updateQuotaInput();
    }


    // Change plan

    function initPlanModal() {
        $(".change_plan").on(
            "click",
            function () {
                $("#current_plan").text(
                    $(this).data(
                        "current-plan"
                    ) || ""
                );


                $("#newplan")
                    .val("")
                    .trigger("change");


                resetParsleyForm(
                    "#changePlanValidationForm"
                );


                const modal =
                    getModal(
                        "changePlanModal"
                    );

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


        $("#confirm_change_plan").on(
            "click",
            function () {
                if (
                    !validateForm(
                        "#changePlanValidationForm"
                    )
                ) {
                    return;
                }


                const plan =
                    $("#newplan")
                        .val()
                        .trim();


                setValue(
                    "change_plan",
                    "yes"
                );

                setValue(
                    "plan",
                    plan
                );

                setValue(
                    "plan_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_plan_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );
    }


    // Change email

    function initMailModal() {
        $(".change_mail").on(
            "click",
            function () {
                $("#current_mail").text(
                    $(this).data(
                        "current-email"
                    ) || ""
                );


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


                resetParsleyForm(
                    "#changeMailValidationForm"
                );


                const modal =
                    getModal(
                        "changeMailModal"
                    );

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


        $("#confirm_change_mail").on(
            "click",
            function () {
                if (
                    !validateForm(
                        "#changeMailValidationForm"
                    )
                ) {
                    return;
                }


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


                setValue(
                    "change_mail",
                    "yes"
                );

                setValue(
                    "mail",
                    email
                );

                setValue(
                    "mail_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_mail_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );
    }


    // Suspend

    function initSuspendModal() {
        $(".suspend_acct").on(
            "click",
            function () {
                $("#suspend_user").text(
                    $(this).val()
                );

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


                resetParsleyForm(
                    "#suspendValidationForm"
                );


                const modal =
                    getModal(
                        "suspendModal"
                    );

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


        $("#confirm_suspend").on(
            "click",
            function () {
                if (
                    !validateForm(
                        "#suspendValidationForm"
                    )
                ) {
                    return;
                }


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


                setValue(
                    "suspend_account",
                    "yes"
                );

                setValue(
                    "reason",
                    reason
                );

                setValue(
                    "suspend_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_suspend_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );
    }


    // Terminate

    function initTerminateModal() {
        $(".terminate_acct").on(
            "click",
            function () {
                $("#terminate_user").text(
                    $(this).val()
                );


                const modal =
                    getModal(
                        "terminateModal"
                    );

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


        $("#confirm_terminate").on(
            "click",
            function () {
                setValue(
                    "terminate_account",
                    "yes"
                );

                setValue(
                    "terminate_usr",
                    getValue("edit_user")
                );


                const form =
                    document.getElementById(
                        "change_terminate_form"
                    );

                if (form) {
                    form.submit();
                }
            }
        );
    }


    // Sync hosting and CloudLinux backend values

    function syncResourceValues() {
        $("#edit_user_form .eenos-sync-value")
            .remove();


        const resources = [
            ["package_quota_option", "package_quota"],
            ["package_bandwidth_option", "package_bandwidth"],
            ["package_ftp_option", "package_ftp"],
            ["package_email_option", "package_email"],
            ["package_mailquota_option", "package_mailquota"],
            ["package_maillist_option", "package_maillist"],
            ["package_sql_option", "package_sql"],
            ["package_subdom_option", "package_subdom"],
            ["package_pdom_option", "package_pdom"],
            ["package_adom_option", "package_adom"]
        ];


        resources.forEach(function (resource) {
            const radioName =
                resource[0];

            const inputId =
                resource[1];


            const selected =
                document.querySelector(
                    'input[name="' +
                    radioName +
                    '"]:checked'
                );


            const input =
                document.getElementById(
                    inputId
                );


            if (!selected || !input) {
                return;
            }


            if (
                selected.value === "custom"
            ) {
                input.disabled = false;
                return;
            }


            input.disabled = true;


            $("<input>", {
                type: "hidden",
                name: input.name,
                value: "unlimited",
                class: "eenos-sync-value"
            }).appendTo(
                "#edit_user_form"
            );
        });


        const lve =
            document.querySelector(
                'input[name="package_lve"]:checked'
            );


        if (
            !lve ||
            lve.value !== "yes"
        ) {
            return;
        }


        const lveResources = [
            [
                "package_lve_speed_option",
                "package_lve_speed"
            ],
            [
                "package_lve_mem_option",
                "package_lve_mem"
            ],
            [
                "package_lve_vmem_option",
                "package_lve_vmem"
            ],
            [
                "package_lve_maxEntryProcs_option",
                "package_lve_maxEntryProcs"
            ],
            [
                "package_lve_nproc_option",
                "package_lve_nproc"
            ],
            [
                "package_lve_io_option",
                "package_lve_io"
            ],
            [
                "package_lve_iops_option",
                "package_lve_iops"
            ]
        ];


        lveResources.forEach(
            function (resource) {
                const radioName =
                    resource[0];

                const inputId =
                    resource[1];


                const selected =
                    document.querySelector(
                        'input[name="' +
                        radioName +
                        '"]:checked'
                    );


                const input =
                    document.getElementById(
                        inputId
                    );


                if (
                    !selected ||
                    !input
                ) {
                    return;
                }


                if (
                    selected.value ===
                    "custom"
                ) {
                    input.disabled = false;
                    return;
                }


                input.disabled = true;


                $("<input>", {
                    type: "hidden",
                    name: input.name,
                    value: "default",
                    class: "eenos-sync-value"
                }).appendTo(
                    "#edit_user_form"
                );
            }
        );
    }


    // Sync reseller backend values

    function syncResellerValues() {
        const reseller =
            document.getElementById(
                "chk_reseller"
            );


        if (!reseller) {
            return;
        }


        const resellerLimit =
            document.getElementById(
                "reseller_limt"
            );

        const resellerBandwidth =
            document.getElementById(
                "reseller_bandwidth"
            );

        const resellerQuota =
            document.getElementById(
                "reseller_quota"
            );


        if (!reseller.checked) {
            if (resellerLimit) {
                resellerLimit.value =
                    "unlimited";
            }

            if (resellerBandwidth) {
                resellerBandwidth.value =
                    "unlimited";
            }

            if (resellerQuota) {
                resellerQuota.value =
                    "unlimited";
            }

            return;
        }


        const options = [
            {
                option:
                    'input[name="reseller_limt_option"]:checked',
                value:
                    "reseller_limt_value",
                target:
                    resellerLimit
            },
            {
                option:
                    'input[name="reseller_bandwidth_option"]:checked',
                value:
                    "reseller_bandwidth_value",
                target:
                    resellerBandwidth
            },
            {
                option:
                    'input[name="reseller_quota_option"]:checked',
                value:
                    "reseller_quota_value",
                target:
                    resellerQuota
            }
        ];


        options.forEach(function (item) {
            if (!item.target) {
                return;
            }


            const selected =
                document.querySelector(
                    item.option
                );


            if (
                selected &&
                selected.value === "on"
            ) {
                item.target.value =
                    getValue(
                        item.value
                    );
            } else {
                item.target.value =
                    "unlimited";
            }
        });
    }


    // Save account

    function initSave() {
        $(".edit_account").on(
            "click",
            function (event) {
                event.preventDefault();


                const $form =
                    $("#edit_user_form");


                if (!$form.length) {
                    return;
                }


                const parsleyForm =
                    $form.parsley();


                parsleyForm.validate();


                if (
                    !parsleyForm.isValid()
                ) {
                    const $firstError =
                        $form
                            .find(
                                ".parsley-error"
                            )
                            .first();


                    if ($firstError.length) {
                        $("html, body")
                            .animate(
                                {
                                    scrollTop:
                                        $firstError
                                            .offset()
                                            .top -
                                        120
                                },
                                300
                            );
                    }

                    return;
                }


                const modal =
                    getModal(
                        "editAccountModal"
                    );


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


        $("#confirm_edit_account").on(
            "click",
            function () {
                const form =
                    document.getElementById(
                        "edit_user_form"
                    );


                if (!form) {
                    return;
                }


                syncResourceValues();
                syncResellerValues();


                setValue(
                    "editacct",
                    "yes"
                );


                form.submit();
            }
        );
    }


    // Initial account states

    function initInitialStates() {

        {% if userdata.mailserver == 'local' %}
        document
            .querySelector(
                ".mailserver_default"
            )
            ?.click();
        {% else %}
        document
            .querySelector(
                ".mailserver_remote"
            )
            ?.click();
        {% endif %}


        {% if userdata.dkim == 'on' %}
        const dkim =
            document.getElementById(
                "chk_dkim"
            );

        if (dkim) {
            dkim.checked = true;
        }
        {% endif %}


        {% if userdata.spf == 'on' %}
        const spf =
            document.getElementById(
                "chk_spf"
            );

        if (spf) {
            spf.checked = true;
        }
        {% endif %}
    }


    // Initialize

    $(function () {
        initHostingResources();
        initCloudLinux();
        initReseller();

        initPasswordModal();
        initQuotaModal();
        initPlanModal();
        initMailModal();

        initSuspendModal();
        initTerminateModal();

        initSave();
        initInitialStates();
    });

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