{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% if features %}
        {% translate "Edit Feature" %}
    {% else %}
        {% translate "Add Feature" %}
    {% endif %}
    - Eenos
{% endblock %}
{% block content %}
    <!-- =========================================================
     PAGE HEADER
========================================================= -->
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">
                {% if features %}
                    {% translate "Edit Feature" %}
                {% else %}
                    {% translate "Add Feature" %}
                {% endif %}
            </h1>
            <div class="eenos-page-subtitle">
                {% if features %}
                    {% translate "Update the resources and services available through this feature." %}
                {% else %}
                    {% translate "Create a feature that defines the resources and services available to hosting accounts." %}
                {% endif %}
            </div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'listfeature' %}"
               class="btn btn-outline-secondary btn-sm text-nowrap">
                <i data-lucide="arrow-left" class="me-1"></i>
                {% translate "All Features" %}
            </a>
        </div>
    </div>
    <!-- =========================================================
     BREADCRUMB
========================================================= -->
    <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 'listfeature' %}">{% translate "Features" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">
            {% if features %}
                {% translate "Edit Feature" %}
            {% else %}
                {% translate "Add Feature" %}
            {% endif %}
        </span>
    </nav>
    <!-- =========================================================
     ALERTS
========================================================= -->
    {% include "includes/form_alerts.html" %}
    <!-- =========================================================
     FEATURE FORM
========================================================= -->
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">
                {% if features %}
                    {% translate "Edit Feature" %}
                {% else %}
                    {% translate "Create Feature" %}
                {% endif %}
            </div>
            <div class="eenos-panel-subtitle">
                {% if features %}
                    {% translate "Configure the resources and services provided by this feature." %}
                {% else %}
                    {% translate "Select the resources and services that will be available to hosting accounts assigned to this feature." %}
                {% endif %}
            </div>
        </div>
        <!-- =====================================================
         FORM
    ====================================================== -->
        <form method="POST" class="eenos-form">
            {% csrf_token %}
            <!-- =================================================
             FEATURE NAME
        ================================================== -->
            <div class="row mb-4">
                <div class="col-lg-3">
                    <label for="feature_name" class="form-label">{% translate "Feature Name" %}</label>
                    <div class="form-text">{% translate "Name of the feature." %}</div>
                </div>
                <div class="col-lg-6">
                    {% if features %}
                        <div class="form-control-plaintext fw-semibold">{{ features.feature_name }}</div>
                        <input type="hidden" name="feature_name" value="{{ features.feature_name }}">
                    {% else %}
                        <input class="form-control"
                               type="text"
                               id="feature_name"
                               name="feature_name"
                               placeholder="{% translate 'Enter a feature name' %}"
                               required
                               data-parsley-required="true"
                               data-parsley-required-message="{% translate 'Please enter a feature name.' %}">
                    {% endif %}
                </div>
            </div>
            <!-- =================================================
             DOMAINS & DNS
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Domains & DNS" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Domain management, DNS and website access services." %}</div>
                <div class="row g-3">
                    <!-- Addon Domains -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="addondomains"
                                   id="chk_addondomains"
                                   {% if not features or features.addondomains == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_addondomains">{% translate "Addon Domains" %}</label>
                        </div>
                    </div>
                    <!-- Sub Domains -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="subdomains"
                                   id="chk_subdomains"
                                   {% if not features or features.subdomains == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_subdomains">{% translate "Sub Domains" %}</label>
                        </div>
                    </div>
                    <!-- Parked Domains -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="parkeddomains"
                                   id="chk_parkeddomains"
                                   {% if not features or features.parkeddomains == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_parkeddomains">{% translate "Parked Domains" %}</label>
                        </div>
                    </div>
                    <!-- DNS Manager -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="dns"
                                   id="chk_dns"
                                   {% if not features or features.dns == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_dns">{% translate "DNS Manager" %}</label>
                        </div>
                    </div>
                    <!-- Domain Redirect -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="domainredirect"
                                   id="chk_domainredirect"
                                   {% if not features or features.domainredirect == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_domainredirect">{% translate "Domain Redirect" %}</label>
                        </div>
                    </div>
                    <!-- Directory Protection -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="dirprotect"
                                   id="chk_dirprotect"
                                   {% if not features or features.dirprotect == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_dirprotect">{% translate "Directory Protection" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             EMAIL & FTP
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Email & FTP" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Email accounts, FTP access and mailing list services." %}</div>
                <div class="row g-3">
                    <!-- Email Accounts -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="email"
                                   id="chk_email"
                                   {% if not features or features.email == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_email">{% translate "Email Accounts" %}</label>
                        </div>
                    </div>
                    <!-- FTP Accounts -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="ftp"
                                   id="chk_ftp"
                                   {% if not features or features.ftp == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_ftp">{% translate "FTP Accounts" %}</label>
                        </div>
                    </div>
                    <!-- Mailman -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="mailman"
                                   id="chk_mailman"
                                   {% if features and features.mailman == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_mailman">{% translate "Mailman Mailing List" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             SSL & WEB SECURITY
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "SSL & Web Security" %}</div>
                <div class="eenos-panel-subtitle mb-3">
                    {% translate "SSL certificates, web server security and application access." %}
                </div>
                <div class="row g-3">
                    <!-- SSL Manager -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="ssl"
                                   id="chk_ssl"
                                   {% if not features or features.ssl == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_ssl">{% translate "SSL Manager" %}</label>
                        </div>
                    </div>
                    <!-- Auto SSL -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="autossl"
                                   id="chk_autossl"
                                   {% if not features or features.autossl == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_autossl">{% translate "Auto SSL" %}</label>
                        </div>
                    </div>
                    <!-- ModSecurity -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="modesecuirty"
                                   id="chk_modsecurity"
                                   {% if not features or features.modesecuirty == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_modsecurity">{% translate "ModSecurity Control" %}</label>
                        </div>
                    </div>
                    <!-- Apache -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="apache"
                                   id="chk_apache"
                                   {% if not features or features.apache == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_apache">{% translate "Apache Apps" %}</label>
                        </div>
                    </div>
                    <!-- Nginx -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="nginx"
                                   id="chk_nginx"
                                   {% if not features or features.nginx == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_nginx">{% translate "Nginx Apps" %}</label>
                        </div>
                    </div>
                    <!-- OpenLiteSpeed -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="ols"
                                   id="chk_ols"
                                   {% if not features or features.ols == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_ols">{% translate "OpenLiteSpeed Apps" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             DATABASES
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Databases" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Database engines available to hosting accounts." %}</div>
                <div class="row g-3">
                    <!-- MySQL -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="mysql"
                                   id="chk_mysql"
                                   {% if not features or features.mysql == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_mysql">{% translate "MySQL Databases" %}</label>
                        </div>
                    </div>
                    <!-- PostgreSQL -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="pgsql"
                                   id="chk_pgsql"
                                   {% if not features or features.pgsql == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_pgsql">{% translate "PostgreSQL" %}</label>
                        </div>
                    </div>
                    <!-- MongoDB -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="mongodb"
                                   id="chk_mongodb"
                                   {% if not features or features.mongodb == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_mongodb">{% translate "MongoDB" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             DEVELOPMENT & APPLICATIONS
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Development & Applications" %}</div>
                <div class="eenos-panel-subtitle mb-3">
                    {% translate "Programming language selectors, application runtimes and development tools." %}
                </div>
                <div class="row g-3">
                    <!-- PHP Selector -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="multiphp"
                                   id="chk_multiphp"
                                   {% if not features or features.multiphp == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_multiphp">{% translate "PHP Selector" %}</label>
                        </div>
                    </div>
                    <!-- Python Selector -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="multipython"
                                   id="chk_multipython"
                                   {% if not features or features.multipython == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_multipython">{% translate "Python Selector" %}</label>
                        </div>
                    </div>
                    <!-- Ruby Selector -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="multiruby"
                                   id="chk_multiruby"
                                   {% if not features or features.multiruby == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_multiruby">{% translate "Ruby Selector" %}</label>
                        </div>
                    </div>
                    <!-- NodeJS Selector -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="multinodejs"
                                   id="chk_multinodejs"
                                   {% if not features or features.multinodejs == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_multinodejs">{% translate "NodeJS Selector" %}</label>
                        </div>
                    </div>
                    <!-- DevOps -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="devops"
                                   id="chk_devops"
                                   {% if not features or features.devops == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_devops">{% translate "DevOps Tools" %}</label>
                        </div>
                    </div>
                    <!-- Python Apps -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="pythonapps"
                                   id="chk_pythonapps"
                                   {% if not features or features.pythonapps == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_pythonapps">{% translate "Python Apps" %}</label>
                        </div>
                    </div>
                    <!-- NodeJS Apps -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="nodejsapps"
                                   id="chk_nodejsapps"
                                   {% if not features or features.nodejsapps == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_nodejsapps">{% translate "NodeJS Apps" %}</label>
                        </div>
                    </div>
                    <!-- Ruby Apps -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="rubyapps"
                                   id="chk_rubyapps"
                                   {% if not features or features.rubyapps == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_rubyapps">{% translate "Ruby and Ruby on Rails" %}</label>
                        </div>
                    </div>
                    <!-- File Studio -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="filestudio"
                                   id="chk_filestudio"
                                   {% if not features or features.filestudio|default:"on" == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_filestudio">{% translate "File Studio" %}</label>
                        </div>
                    </div>
                    <!-- CodeSpace -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="codespace"
                                   id="chk_codespace"
                                   {% if not features or features.codespace|default:"on" == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_codespace">{% translate "CodeSpace" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             SCHEDULED TASKS
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Scheduled Tasks" %}</div>
                <div class="eenos-panel-subtitle mb-3">
                    {% translate "Automated and scheduled tasks available to hosting accounts." %}
                </div>
                <div class="row g-3">
                    <!-- Cron -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="cron"
                                   id="chk_cron"
                                   {% if not features or features.cron|default:"on" == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_cron">{% translate "Cron Jobs" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             BACKUP & STORAGE
        ================================================== -->
            <div class="eenos-section mb-4">
                <div class="eenos-panel-title mb-1">{% translate "Backup & Storage" %}</div>
                <div class="eenos-panel-subtitle mb-3">{% translate "Backup, recovery and protected storage services." %}</div>
                <div class="row g-3">
                    <!-- Backup Manager -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="backup"
                                   id="chk_backup"
                                   {% if not features or features.backup == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_backup">{% translate "Backup Manager" %}</label>
                        </div>
                    </div>
                    <!-- GDPR -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="gdpr"
                                   id="chk_gdpr"
                                   {% if features and features.gdpr == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_gdpr">{% translate "GDPR Protected Backups" %}</label>
                        </div>
                    </div>
                    <!-- Scheduled Backup -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="schedulebackup"
                                   id="chk_schedulebackup"
                                   {% if features and features.schedulebackup == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_schedulebackup">{% translate "User Scheduled Backup Jobs" %}</label>
                        </div>
                    </div>
                    <!-- User Backup Pools -->
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="userbackuppool"
                                   id="chk_userbackuppool"
                                   {% if features and features.userbackuppool == "on" %}checked{% endif %}>
                            <label class="form-check-label" for="chk_userbackuppool">{% translate "User Backup Pools" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- =================================================
             FORM ACTIONS
        ================================================== -->
            <div class="d-flex align-items-center gap-2 pt-2">
                <button type="submit"
                        class="btn btn-primary"
                        {% if features %} name="edit_feature" {% else %} name="create_feature" {% endif %}>
                    {% if features %}
                        <i data-lucide="save" class="me-1"></i>
                        {% translate "Update Feature" %}
                    {% else %}
                        <i data-lucide="plus" class="me-1"></i>
                        {% translate "Create Feature" %}
                    {% endif %}
                </button>
                <a href="{% url 'listfeature' %}" class="btn btn-outline-secondary">{% translate "Cancel" %}</a>
            </div>
        </form>
    </div>
{% endblock %}