{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load wap_filter %}
{% block title %}
    {% if package %}
        {% translate "Edit Package" %}
    {% else %}
        {% translate "Add Package" %}
    {% endif %}
{% endblock %}
{% block content %}
    {% iscloudlinux as cloudlinux_available %}
    {% if package %}
        {% translate "Edit Package" as page_title %}
        {% translate "Edit hosting package" as card_title %}
        {% translate "You can modify the package values. If you need to use the updated values for the user, please make sure to synchronize the packages." as card_description %}
    {% else %}
        {% translate "Add Package" as page_title %} {% translate "Create a hosting package" as card_title %}
        {% translate "You can use these packages to create a hosting account. The package contains resource allocation for a hosting plan." as card_description %}
    {% endif %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{{ page_title }}</h1>
            <div class="eenos-page-subtitle">{{ card_description }}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'listpkg' %}">{% translate "Packages" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{{ page_title }}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if package %}
        <div class="eenos-notice eenos-notice-warning mt-3 mb-3">
            <div class="eenos-notice-icon">
                <i data-lucide="triangle-alert"></i>
            </div>
            <div class="eenos-notice-content">
                <div class="eenos-notice-title">{% translate "Package Changes Require Account Synchronization" %}</div>
                <div class="eenos-notice-text">
                    {% translate "The changes to an existing package do not affect accounts if they are already using this package." %}
                    {% translate "To apply the package changes, please upgrade or downgrade the account from the user accounts page." %}
                </div>
            </div>
        </div>
    {% endif %}
    <form method="POST" action="" id="packageForm" class="eenos-form">
        {% csrf_token %}
        {% if package %}
            <input type="hidden" name="original_package_name" value="{{ package.name }}" />
            <input type="hidden" name="edit_package" value="yes" />
        {% else %}
            <input type="hidden" name="create_package" value="yes" />
        {% endif %}
        <div class="row">
            <!-- =====================================================
     GENERAL PACKAGE INFORMATION
     ===================================================== -->
            <div class="{% if cloudlinux_available == 'yes' %}col-xl-6{% else %}col-xl-8 col-lg-10{% endif %}">
                <div class="eenos-card">
                    <div class="eenos-panel-title">{% translate "General Package Information" %}</div>
                    <div class="eenos-panel-subtitle mb-4">{% translate "Configure the resources and features available to accounts using this package." %}</div>
                    <!-- =================================================
          PACKAGE NAME
          ================================================= -->
                    <div class="mb-4">
                        {% if package %}
                            <label for="package_name_display" class="form-label">{% translate "Package Name" %}</label>
                            <!-- Existing package name is not editable -->
                            <input type="text"
                                   class="form-control form-control-sm"
                                   id="package_name_display"
                                   value="{{ package.name }}"
                                   maxlength="255"
                                   style="max-width: 420px"
                                   aria-describedby="package_name_help"
                                   readonly>
                            <!-- Submit the existing package name -->
                            <input type="hidden" name="package_name" value="{{ package.name }}">
                        {% else %}
                            <label for="package_name" class="form-label">{% translate "Package Name" %}</label>
                            <!-- New package name -->
                            <input type="text"
                                   class="form-control form-control-sm"
                                   id="package_name"
                                   name="package_name"
                                   value=""
                                   maxlength="255"
                                   style="max-width: 420px"
                                   aria-describedby="package_name_help"
                                   required
                                   data-parsley-required="true"
                                   data-parsley-trigger="change"
                                   data-parsley-required-message="{% translate 'Please enter a package name.' %}">
                        {% endif %}
                        <div id="package_name_help" class="form-text">
                            {% if package %}
                                {% translate "Package names cannot be changed after the package is created." %}
                            {% else %}
                                {% translate "Name of the hosting package." %}
                            {% endif %}
                        </div>
                    </div>
                    <!-- =================================================
         DISK SPACE 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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_quota"
                                       id="package_quota_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".quota"
                                       {% if not package or package.quota == "unlimited" %}checked{% endif %} />
                                <label for="package_quota_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_quota"
                                       id="package_quota_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".quota"
                                       {% if package and package.quota != "unlimited" %}checked{% endif %} />
                                <label for="package_quota_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm quota"
                                       id="package_quota"
                                       name="package_quota"
                                       value="{% if package and package.quota != 'unlimited' %}{{ package.quota }}{% else %}10240{% endif %}"
                                       aria-label="{% translate 'Custom disk space quota in MB' %}" />
                            </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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_bandwidth"
                                       id="package_bandwidth_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".bandwidth"
                                       {% if not package or package.bandwidth == "unlimited" %}checked{% endif %} />
                                <label for="package_bandwidth_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_bandwidth"
                                       id="package_bandwidth_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".bandwidth"
                                       {% if package and package.bandwidth != "unlimited" %}checked{% endif %} />
                                <label for="package_bandwidth_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm bandwidth"
                                       id="package_bandwidth"
                                       name="package_bandwidth"
                                       value="{% if package and package.bandwidth != 'unlimited' %}{{ package.bandwidth }}{% else %}1048576{% endif %}"
                                       aria-label="{% translate 'Custom bandwidth limit in MB' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         FTP ACCOUNTS
         ================================================= -->
                    <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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_ftp"
                                       id="package_ftp_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".ftp"
                                       {% if not package or package.ftp == "unlimited" %}checked{% endif %} />
                                <label for="package_ftp_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_ftp"
                                       id="package_ftp_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".ftp"
                                       {% if package and package.ftp != "unlimited" %}checked{% endif %} />
                                <label for="package_ftp_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm ftp"
                                       id="package_ftp"
                                       name="package_ftp"
                                       value="{% if package and package.ftp != 'unlimited' %}{{ package.ftp }}{% else %}0{% endif %}"
                                       aria-label="{% translate 'Custom FTP account limit' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         EMAIL ACCOUNTS
         ================================================= -->
                    <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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_email"
                                       id="package_email_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".email"
                                       {% if not package or package.email == "unlimited" %}checked{% endif %} />
                                <label for="package_email_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_email"
                                       id="package_email_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".email"
                                       {% if package and package.email != "unlimited" %}checked{% endif %} />
                                <label for="package_email_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm email"
                                       id="package_email"
                                       name="package_email"
                                       value="{% if package and package.email != 'unlimited' %}{{ package.email }}{% else %}0{% endif %}"
                                       aria-label="{% translate 'Custom 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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_mailquota"
                                       id="package_mailquota_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".mailquota"
                                       {% if not package or package.mailquota == "unlimited" %}checked{% endif %} />
                                <label for="package_mailquota_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_mailquota"
                                       id="package_mailquota_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".mailquota"
                                       {% if package and package.mailquota != "unlimited" %}checked{% endif %} />
                                <label for="package_mailquota_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm mailquota"
                                       id="package_mailquota"
                                       name="package_mailquota"
                                       value="{% if package and package.mailquota != 'unlimited' %}{{ package.mailquota }}{% else %}1024{% endif %}"
                                       aria-label="{% translate 'Custom quota per email address in MB' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         MAILING LISTS
         ================================================= -->
                    <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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_maillist"
                                       id="package_maillist_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".maillist"
                                       {% if not package or package.maillist == "unlimited" %}checked{% endif %} />
                                <label for="package_maillist_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_maillist"
                                       id="package_maillist_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".maillist"
                                       {% if package and package.maillist != "unlimited" %}checked{% endif %} />
                                <label for="package_maillist_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm maillist"
                                       id="package_maillist"
                                       name="package_maillist"
                                       value="{% if package and package.maillist != 'unlimited' %}{{ package.maillist }}{% else %}1{% endif %}"
                                       aria-label="{% translate 'Custom mailing list limit' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         SQL DATABASES
         ================================================= -->
                    <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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_sql"
                                       id="package_sql_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".sql"
                                       {% if not package or package.sql == "unlimited" %}checked{% endif %} />
                                <label for="package_sql_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_sql"
                                       id="package_sql_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".sql"
                                       {% if package and package.sql != "unlimited" %}checked{% endif %} />
                                <label for="package_sql_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm sql"
                                       id="package_sql"
                                       name="package_sql"
                                       value="{% if package and package.sql != 'unlimited' %}{{ package.sql }}{% else %}1{% endif %}"
                                       aria-label="{% translate 'Custom SQL database limit' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         SUB DOMAINS
         ================================================= -->
                    <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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_subdom"
                                       id="package_subdom_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".subdom"
                                       {% if not package or package.subdomains == "unlimited" %}checked{% endif %} />
                                <label for="package_subdom_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_subdom"
                                       id="package_subdom_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".subdom"
                                       {% if package and package.subdomains != "unlimited" %}checked{% endif %} />
                                <label for="package_subdom_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm subdom"
                                       id="package_subdom"
                                       name="package_subdom"
                                       value="{% if package and package.subdomains != 'unlimited' %}{{ package.subdomains }}{% else %}1{% endif %}"
                                       aria-label="{% translate 'Custom 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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_pdom"
                                       id="package_pdom_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".pdom"
                                       {% if not package or package.parkeddomains == "unlimited" %}checked{% endif %} />
                                <label for="package_pdom_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_pdom"
                                       id="package_pdom_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".pdom"
                                       {% if package and package.parkeddomains != "unlimited" %}checked{% endif %} />
                                <label for="package_pdom_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm pdom"
                                       id="package_pdom"
                                       name="package_pdom"
                                       value="{% if package and package.parkeddomains != 'unlimited' %}{{ package.parkeddomains }}{% else %}0{% endif %}"
                                       aria-label="{% translate 'Custom parked domain limit' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         ADDON DOMAINS
         ================================================= -->
                    <fieldset class="mb-4 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">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_adom"
                                       id="package_adom_unlimited"
                                       value="unlimited"
                                       class="form-check-input resource-unlimited"
                                       data-target=".adom"
                                       {% if not package or package.addondomains == "unlimited" %}checked{% endif %} />
                                <label for="package_adom_unlimited" class="form-check-label">{% translate "Unlimited" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_adom"
                                       id="package_adom_custom"
                                       value="custom"
                                       class="form-check-input resource-custom"
                                       data-target=".adom"
                                       {% if package and package.addondomains != "unlimited" %}checked{% endif %} />
                                <label for="package_adom_custom" class="form-check-label">{% translate "Custom" %}</label>
                            </div>
                            <div class="flex-grow-1" style="max-width: 180px">
                                <input type="number"
                                       min="0"
                                       class="form-control form-control-sm adom"
                                       id="package_adom"
                                       name="package_adom"
                                       value="{% if package and package.addondomains != 'unlimited' %}{{ package.addondomains }}{% else %}0{% endif %}"
                                       aria-label="{% translate 'Custom addon domain limit' %}" />
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         DEDICATED IP
         ================================================= -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Dedicated IP" %}</legend>
                        <div class="d-flex align-items-center gap-4">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_ip"
                                       id="package_ip_no"
                                       value="no"
                                       class="form-check-input"
                                       {% if not package or package.dedicatedip == "no" %}checked{% endif %} />
                                <label for="package_ip_no" class="form-check-label">{% translate "No" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_ip"
                                       id="package_ip_yes"
                                       value="yes"
                                       class="form-check-input"
                                       {% if package and package.dedicatedip == "yes" %}checked{% endif %} />
                                <label for="package_ip_yes" class="form-check-label">{% translate "Yes" %}</label>
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
         SHELL ACCESS
         ================================================= -->
                    <fieldset class="mb-4 border-0 p-0">
                        <legend class="form-label mb-2">{% translate "Shell Access" %}</legend>
                        <div class="d-flex align-items-center gap-4">
                            <div class="form-check">
                                <input type="radio"
                                       name="package_shell"
                                       id="package_shell_no"
                                       value="no"
                                       class="form-check-input"
                                       {% if not package or package.shell == "no" %}checked{% endif %} />
                                <label for="package_shell_no" class="form-check-label">{% translate "No" %}</label>
                            </div>
                            <div class="form-check">
                                <input type="radio"
                                       name="package_shell"
                                       id="package_shell_yes"
                                       value="yes"
                                       class="form-check-input"
                                       {% if package and package.shell == "yes" %}checked{% endif %} />
                                <label for="package_shell_yes" class="form-check-label">{% translate "Yes" %}</label>
                            </div>
                        </div>
                    </fieldset>
                    <!-- =================================================
        FEATURE LIST
        ================================================= -->
                    <div class="mb-2">
                        <label for="package_features" class="form-label">{% translate "Select Feature List" %}</label>
                        <div class="d-flex align-items-center gap-2">
                            <div style="width: 280px; max-width: 100%;">
                                <select class="form-select form-select-sm eenos-select-search"
                                        id="package_features"
                                        name="package_features"
                                        required
                                        data-parsley-required="true"
                                        data-parsley-trigger="change"
                                        data-parsley-required-message="{% translate 'Please select a feature list.' %}">
                                    {% for f in features %}
                                        <option value="{{ f }}"
                                                {% if package and f == package.feature %} selected {% elif not package and forloop.first %} selected {% endif %}>{{ f }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <a href="{% url 'addfeature' %}"
                               class="btn btn-outline-secondary btn-sm flex-shrink-0">{% translate "Create Feature" %}</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =====================================================
     CLOUDLINUX
     ===================================================== -->
            {% if cloudlinux_available == "yes" %}
                <div class="col-xl-6">
                    <div class="eenos-card">
                        <div class="eenos-panel-title">{% translate "CloudLinux LVE Settings" %}</div>
                        <div class="eenos-panel-subtitle mb-4">{% translate "Configure CloudLinux resource limits for this package." %}</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 package." %}</div>
                            <div class="d-flex align-items-center gap-4">
                                <div class="form-check">
                                    <input type="radio"
                                           name="package_lve"
                                           id="package_lve_no"
                                           value="no"
                                           class="form-check-input lve-toggle"
                                           data-enabled="false"
                                           {% if not package or package.cloudlinux.status != "on" %}checked{% endif %} />
                                    <label for="package_lve_no" class="form-check-label">{% translate "No" %}</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio"
                                           name="package_lve"
                                           id="package_lve_yes"
                                           value="yes"
                                           class="form-check-input lve-toggle"
                                           data-enabled="true"
                                           {% if package and package.cloudlinux.status == "on" %}checked{% endif %} />
                                    <label for="package_lve_yes" class="form-check-label">{% translate "Yes" %}</label>
                                </div>
                            </div>
                        </fieldset>
                        <div id="cloudlinuxSettings">
                            <!-- =================================================
           SPEED
           ================================================= -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "SPEED" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit CPU usage in percentage, 100% is one core." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_speed"
                                               id="package_lve_speed_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_speed"
                                               {% if not package or package.cloudlinux.speed == "default" %}checked{% endif %} />
                                        <label for="package_lve_speed_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_speed"
                                               id="package_lve_speed_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_speed"
                                               {% if package and package.cloudlinux.speed != "default" %}checked{% endif %} />
                                        <label for="package_lve_speed_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_speed"
                                               id="package_lve_speed"
                                               name="package_lve_speed"
                                               value="{% if package and package.cloudlinux.speed != 'default' %}{{ package.cloudlinux.speed }}{% else %}100{% endif %}"
                                               aria-label="{% translate 'Custom 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 usage for applications inside LVE." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_mem"
                                               id="package_lve_mem_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_mem"
                                               {% if not package or package.cloudlinux.mem == "default" %}checked{% endif %} />
                                        <label for="package_lve_mem_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_mem"
                                               id="package_lve_mem_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_mem"
                                               {% if package and package.cloudlinux.mem != "default" %}checked{% endif %} />
                                        <label for="package_lve_mem_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_mem"
                                               id="package_lve_mem"
                                               name="package_lve_mem"
                                               value="{% if package and package.cloudlinux.mem != 'default' %}{{ package.cloudlinux.mem }}{% else %}1024{% endif %}"
                                               aria-label="{% translate 'Custom memory limit' %}" />
                                    </div>
                                </div>
                            </fieldset>
                            <!-- =================================================
           VMEM
           ================================================= -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "VMEM" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit virtual memory for applications inside LVE." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_vmem"
                                               id="package_lve_vmem_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_vmem"
                                               {% if not package or package.cloudlinux.vmem == "default" %}checked{% endif %} />
                                        <label for="package_lve_vmem_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_vmem"
                                               id="package_lve_vmem_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_vmem"
                                               {% if package and package.cloudlinux.vmem != "default" %}checked{% endif %} />
                                        <label for="package_lve_vmem_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" 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 package and package.cloudlinux.vmem != 'default' %}{{ package.cloudlinux.vmem }}{% else %}0{% endif %}"
                                               aria-label="{% translate 'Custom virtual memory limit' %}" />
                                    </div>
                                </div>
                            </fieldset>
                            <!-- =================================================
           MAX ENTRY PROCESSES
           ================================================= -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Max Entry Proc" %}</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">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_maxEntryProcs"
                                               id="package_lve_maxEntryProcs_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_maxEntryProcs"
                                               {% if not package or package.cloudlinux.maxEntryProcs == "default" %}checked{% endif %} />
                                        <label for="package_lve_maxEntryProcs_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_maxEntryProcs"
                                               id="package_lve_maxEntryProcs_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_maxEntryProcs"
                                               {% if package and package.cloudlinux.maxEntryProcs != "default" %}checked{% endif %} />
                                        <label for="package_lve_maxEntryProcs_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_maxEntryProcs"
                                               id="package_lve_maxEntryProcs"
                                               name="package_lve_maxEntryProcs"
                                               value="{% if package and package.cloudlinux.maxEntryProcs != 'default' %}{{ package.cloudlinux.maxEntryProcs }}{% else %}20{% endif %}"
                                               aria-label="{% translate 'Custom 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">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_nproc"
                                               id="package_lve_nproc_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_nproc"
                                               {% if not package or package.cloudlinux.nproc == "default" %}checked{% endif %} />
                                        <label for="package_lve_nproc_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_nproc"
                                               id="package_lve_nproc_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_nproc"
                                               {% if package and package.cloudlinux.nproc != "default" %}checked{% endif %} />
                                        <label for="package_lve_nproc_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_nproc"
                                               id="package_lve_nproc"
                                               name="package_lve_nproc"
                                               value="{% if package and package.cloudlinux.nproc != 'default' %}{{ package.cloudlinux.nproc }}{% else %}100{% endif %}"
                                               aria-label="{% translate 'Custom process limit' %}" />
                                    </div>
                                </div>
                            </fieldset>
                            <!-- =================================================
           DISK IO
           ================================================= -->
                            <fieldset class="mb-4 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Disk IO" %}</legend>
                                <div class="form-text mb-2">{% translate "Define IO limits (KB/s)." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_io"
                                               id="package_lve_io_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_io"
                                               {% if not package or package.cloudlinux.io == "default" %}checked{% endif %} />
                                        <label for="package_lve_io_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_io"
                                               id="package_lve_io_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_io"
                                               {% if package and package.cloudlinux.io != "default" %}checked{% endif %} />
                                        <label for="package_lve_io_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_io"
                                               id="package_lve_io"
                                               name="package_lve_io"
                                               value="{% if package and package.cloudlinux.io != 'default' %}{{ package.cloudlinux.io }}{% else %}1024{% endif %}"
                                               aria-label="{% translate 'Custom disk IO limit in KB per second' %}" />
                                    </div>
                                </div>
                            </fieldset>
                            <!-- =================================================
           DISK IOPS
           ================================================= -->
                            <fieldset class="mb-2 border-0 p-0">
                                <legend class="form-label mb-2">{% translate "Disk IOPS" %}</legend>
                                <div class="form-text mb-2">{% translate "Limit IO operations per second." %}</div>
                                <div class="d-flex align-items-center flex-wrap gap-3">
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_iops"
                                               id="package_lve_iops_default"
                                               value="default"
                                               class="form-check-input lve-default-toggle"
                                               data-target=".lve_iops"
                                               {% if not package or package.cloudlinux.iops == "default" %}checked{% endif %} />
                                        <label for="package_lve_iops_default" class="form-check-label">{% translate "Default" %}</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio"
                                               name="package_lve_iops"
                                               id="package_lve_iops_custom"
                                               value=""
                                               class="form-check-input lve-custom-toggle"
                                               data-target=".lve_iops"
                                               {% if package and package.cloudlinux.iops != "default" %}checked{% endif %} />
                                        <label for="package_lve_iops_custom" class="form-check-label">{% translate "Custom" %}</label>
                                    </div>
                                    <div class="flex-grow-1" style="max-width: 180px">
                                        <input type="number"
                                               min="0"
                                               class="form-control form-control-sm lve_iops"
                                               id="package_lve_iops"
                                               name="package_lve_iops"
                                               value="{% if package and package.cloudlinux.iops != 'default' %}{{ package.cloudlinux.iops }}{% else %}1024{% endif %}"
                                               aria-label="{% translate 'Custom disk IOPS limit' %}" />
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            {% else %}
                <input type="hidden" name="package_lve" value="no">
            {% endif %}
            <!-- =====================================================
     PACKAGE WARNING / ACTIONS
     ===================================================== -->
            <div class="col-12">
                <div class="d-flex align-items-center gap-2 mt-3">
                    {% if package %}
                        <button type="button" class="btn btn-primary btn-sm" id="submitPackageButton">
                            <i data-lucide="save"></i>
                            {% translate "Save Changes" %}
                        </button>
                        <a href="{% url 'listpkg' %}" class="btn btn-outline-secondary btn-sm">{% translate "Back to All Packages" %}</a>
                    {% else %}
                        <button type="button" class="btn btn-primary btn-sm" id="submitPackageButton">
                            <i data-lucide="plus"></i>
                            {% translate "Create Package" %}
                        </button>
                        <a href="{% url 'listpkg' %}" class="btn btn-outline-secondary btn-sm">{% translate "Back to All Packages" %}</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </form>
    <!-- =========================================================
     CONFIRMATION MODAL
     ========================================================= -->
    <div class="modal fade"
         id="packageSubmitModal"
         tabindex="-1"
         aria-labelledby="packageSubmitModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="packageSubmitModalLabel">
                        {% if package %}
                            {% translate "Save Package Changes" %}
                        {% else %}
                            {% translate "Create Package" %}
                        {% endif %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    {% if package %}
                        <p class="mb-0">{% translate "Are you sure you want to save the changes to this hosting package?" %}</p>
                    {% else %}
                        <p class="mb-0">{% translate "Are you sure you want to create this hosting package?" %}</p>
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button"
                            class="btn btn-primary btn-sm"
                            id="confirmPackageSubmit">
                        {% if package %}
                            {% translate "Save Changes" %}
                        {% else %}
                            {% translate "Create Package" %}
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const form = document.getElementById("packageForm");
      const submitButton = document.getElementById("submitPackageButton");
      const confirmButton = document.getElementById("confirmPackageSubmit");
      const modalElement = document.getElementById("packageSubmitModal");

      const submitModal = modalElement ? bootstrap.Modal.getOrCreateInstance(modalElement) : null;

      /*
       * =====================================================
       * LUCIDE ICONS
       * =====================================================
       */

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

      /*
       * =====================================================
       * RESOURCE INPUT TOGGLE
       * =====================================================
       */

      function updateResourceInput(radio) {
        const targetSelector = radio.dataset.target;

        if (!targetSelector) {
          return;
        }

        const target = document.querySelector(targetSelector);

        if (!target) {
          return;
        }

        target.disabled = radio.classList.contains("resource-unlimited");
      }

      document.querySelectorAll(".resource-unlimited, .resource-custom").forEach(function (radio) {
        radio.addEventListener("change", function () {
          updateResourceInput(this);
        });

        if (radio.checked) {
          updateResourceInput(radio);
        }
      });

      /*
       * =====================================================
       * CLOUDLINUX DEFAULT / CUSTOM TOGGLE
       * =====================================================
       */

      function updateLveInput(radio) {
        const targetSelector = radio.dataset.target;

        if (!targetSelector) {
          return;
        }

        const target = document.querySelector(targetSelector);

        if (!target) {
          return;
        }

        target.disabled = radio.classList.contains("lve-default-toggle");
      }

      document.querySelectorAll(".lve-default-toggle, .lve-custom-toggle").forEach(function (radio) {
        radio.addEventListener("change", function () {
          updateLveInput(this);
        });

        if (radio.checked) {
          updateLveInput(radio);
        }
      });

      /*
       * =====================================================
       * CLOUDLINUX ENABLE / DISABLE
       * =====================================================
       */

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

        const settings = document.getElementById("cloudlinuxSettings");

        if (!settings || !enabledRadio) {
          return;
        }

        if (enabledRadio.dataset.enabled === "true") {
          settings.classList.remove("d-none");
        } else {
          settings.classList.add("d-none");
        }
      }

      document.querySelectorAll(".lve-toggle").forEach(function (radio) {
        radio.addEventListener("change", updateCloudLinux);
      });

      updateCloudLinux();

      /*
       * =====================================================
       * ENABLE ALL FIELDS BEFORE SUBMIT
       * =====================================================
       */

      function enableCustomInputs() {
        document.querySelectorAll(".resource-custom:checked").forEach(function (radio) {
          const target = document.querySelector(radio.dataset.target);

          if (target) {
            target.disabled = false;
          }
        });

        document.querySelectorAll(".lve-custom-toggle:checked").forEach(function (radio) {
          const target = document.querySelector(radio.dataset.target);

          if (target) {
            target.disabled = false;
          }
        });
      }

      /*
       * =====================================================
       * VALIDATION
       * =====================================================
       */
      
      function validateForm() {
        if (window.jQuery && jQuery.fn && jQuery.fn.parsley) {
          const parsleyForm = jQuery(form).parsley();
          return parsleyForm.validate();
        }
        return form.checkValidity();
      }

      /*
       * =====================================================
       * OPEN CONFIRMATION MODAL
       * =====================================================
       */

      if (submitButton && submitModal) {
        submitButton.addEventListener("click", function () {
          if (!validateForm()) {
            return;
          }

          submitModal.show();
        });
      }

      /*
       * =====================================================
       * CONFIRM SUBMIT
       * =====================================================
       */

      if (confirmButton) {
        confirmButton.addEventListener("click", function () {
          enableCustomInputs();

          if (submitModal) {
            submitModal.hide();
          }

          form.submit();
        });
      }
    });
    </script>
{% endblock %}