{% extends "base.html" %}
{% load i18n %}
{% load static %}

{# ============================================================
   EENOS UAPP FORM TEMPLATE REFERENCE
   ============================================================

   FRONTEND STACK
   --------------
   - Bootstrap 5.3.8
   - jQuery 4
   - Lucide Icons
   - Parsley.js
   - Eenos UappClass


   UAPPCLASS FEATURES
   -----------------
   UappClass already provides shared functionality for:

   - Parsley validation
   - Searchable select fields
   - Password generation
   - Password show / hide
   - Password strength meter
   - Lucide icon initialization

   Do NOT duplicate these features inside page-specific JS.


   FORM RULES
   ----------
   Forms using standard Eenos validation must use:

       class="eenos-form"

   Use native HTML validation attributes together with Parsley:

       required
       minlength=""
       maxlength=""
       min=""
       max=""
       data-parsley-type=""
       data-parsley-pattern=""

   Custom validation messages may use:

       data-parsley-required-message=""
       data-parsley-type-message=""
       data-parsley-pattern-message=""


   SEARCHABLE SELECT
   -----------------
   Searchable selects must use:

       class="form-select eenos-select-search"

   UappClass handles the enhanced select interface.


   PASSWORD GENERATOR
   ------------------
   Use the standard component classes:

       .eenos-password-generator
       .eenos-password-input
       .eenos-password-toggle
       .eenos-password-generate
       .eenos-password-strength
       .eenos-password-strength-progress
       .eenos-password-strength-text

   Do NOT write another password generator in the page JS.


   CONFIRMATIONS / MODALS
   ----------------------
   Do NOT use:

       $.confirm()
       $.alert()
       jquery-confirm

   All old jQuery Confirm dialogs must be converted to
   Bootstrap 5.3 modals.

   For actions requiring validation before confirmation:

       1. Prevent the button's default action.
       2. Get the form Parsley instance.
       3. Call parsleyForm.validate().
       4. Check parsleyForm.isValid().
       5. Only open the Bootstrap modal when valid.


   LUCIDE ICONS
   ------------
   Use:

       <i data-lucide="save"></i>

   Lucide is already initialized by UappClass.

   Do not initialize Lucide separately on every page unless
   dynamically generated content specifically requires it.


   HTML / ACCESSIBILITY
   --------------------
   Every form label must reference its field:

       <label for="username">...</label>
       <input id="username">

   Do not use <label> for display-only information.

   Use <div>, <span>, <strong>, etc. for displayed values.


   STYLING
   -------
   Prefer:

   - Existing Eenos theme classes
   - Bootstrap 5.3.8 utilities

   Avoid unnecessary page-specific CSS.

   ============================================================ #}


{% block title %}
    {% translate "Sample Form" %} - Eenos
{% endblock %}




{% block content %}

<!-- =========================================================
     PAGE HEADER
========================================================= -->

<div class="eenos-page-header">

    <div>

        <h1 class="eenos-page-title">
            {% translate "Sample Form" %}
        </h1>

        <div class="eenos-page-subtitle">
            {% translate "Reference implementation for Eenos WAP forms and UI components." %}
        </div>

    </div>

</div>

<!-- =========================================================
     DJANGO FORM ALERTS
========================================================= -->

{% include "includes/form_alerts.html" %}

<!-- =========================================================
     EENOS AMBER NOTICE BOXES

     The styles for these examples are provided by
     the main Eenos UAPP theme stylesheet.
========================================================= -->
<section class="eenos-card mb-4" aria-labelledby="amberNoticeExamplesTitle">
    <div class="eenos-card-header">
        <div>
            <h2 class="eenos-card-title" id="amberNoticeExamplesTitle">{% translate "Notice Boxes" %}</h2>
            <p class="eenos-card-subtitle">{% translate "Responsive examples for informational, warning, danger, and success messages." %}</p>
        </div>
        <div class="eenos-card-action-icon"><i data-lucide="message-square-warning"></i></div>
    </div>
    <div class="eenos-amber-grid">
        <div class="eenos-amber-notice" role="status">
            <div class="eenos-amber-notice-icon"><i data-lucide="info"></i></div>
            <div class="eenos-amber-notice-content">
                <div class="eenos-amber-notice-title">{% translate "Information" %}</div>
                <div class="eenos-amber-notice-text">{% translate "Use this box for helpful context that supports the task on the current page." %}</div>
            </div>
        </div>
        <div class="eenos-amber-notice eenos-amber-notice-warning" role="alert">
            <div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div>
            <div class="eenos-amber-notice-content">
                <div class="eenos-amber-notice-title">{% translate "Warning" %}</div>
                <div class="eenos-amber-notice-text">{% translate "Use this box when the user should review possible effects before continuing." %}</div>
            </div>
        </div>
        <div class="eenos-amber-notice eenos-amber-notice-important" role="alert">
            <div class="eenos-amber-notice-icon"><i data-lucide="circle-x"></i></div>
            <div class="eenos-amber-notice-content">
                <div class="eenos-amber-notice-title">{% translate "Danger" %}</div>
                <div class="eenos-amber-notice-text">{% translate "Use this treatment for destructive actions or conditions that require immediate attention." %}</div>
            </div>
        </div>
        <div class="eenos-amber-notice eenos-amber-notice-outline" role="note">
            <div class="eenos-amber-notice-icon"><i data-lucide="circle-check"></i></div>
            <div class="eenos-amber-notice-content">
                <div class="eenos-amber-notice-title">{% translate "Success" %}</div>
                <div class="eenos-amber-notice-text">{% translate "Use this treatment to confirm that an operation completed successfully." %}</div>
            </div>
        </div>
    </div>
</section>



<!-- =========================================================
     FORM

     IMPORTANT:
     .eenos-form enables standard UappClass Parsley handling.
========================================================= -->

<form method="POST"
      id="sample_form"
      class="eenos-form">

    {% csrf_token %}


    <!-- =====================================================
         MAIN CARD
    ====================================================== -->

    <div class="eenos-card">

        <div class="mb-4">

            <div class="eenos-panel-title">
                {% translate "Account Information" %}
            </div>

            <div class="eenos-panel-subtitle">
                {% translate "Enter the information required to configure the account." %}
            </div>

        </div>


        <div class="row g-4">


            <!-- =================================================
                 TEXT INPUT
            ================================================== -->

            <div class="col-12 col-md-6">

                <label for="username"
                       class="form-label">

                    {% translate "Username" %}

                </label>

                <input type="text"
                       class="form-control"
                       id="username"
                       name="username"
                       required
                       minlength="3"
                       maxlength="32"
                       autocomplete="off"
                       placeholder="{% translate 'Enter username' %}"
                       data-parsley-required-message="{% translate 'Please enter a username.' %}"
                       data-parsley-minlength-message="{% translate 'Username must contain at least 3 characters.' %}">

                <div class="form-text">
                    {% translate "Enter the username for this hosting account." %}
                </div>

            </div>


            <!-- =================================================
                 EMAIL INPUT
            ================================================== -->

            <div class="col-12 col-md-6">

                <label for="contact_email"
                       class="form-label">

                    {% translate "Contact Email" %}

                </label>

                <input type="email"
                       class="form-control"
                       id="contact_email"
                       name="contact_email"
                       required
                       autocomplete="email"
                       placeholder="{% translate 'Enter contact email' %}"
                       data-parsley-type="email"
                       data-parsley-required-message="{% translate 'Please enter a contact email address.' %}"
                       data-parsley-type-message="{% translate 'Please enter a valid email address.' %}">

                <div class="form-text">
                    {% translate "Account notifications will be sent to this address." %}
                </div>

            </div>


            <!-- =================================================
                 SEARCHABLE SELECT

                 UappClass handles .eenos-select-search
            ================================================== -->

            <div class="col-12 col-md-6">

                <label for="package"
                       class="form-label">

                    {% translate "Hosting Plan" %}

                </label>

                <select class="form-select eenos-select-search"
                        id="package"
                        name="package"
                        required
                        data-parsley-required-message="{% translate 'Please select a hosting plan.' %}">

                    <option value="">
                        {% translate "Select Hosting Plan" %}
                    </option>

                    {% for package in packages %}

                        <option value="{{ package }}">
                            {{ package }}
                        </option>

                    {% endfor %}

                </select>

                <div class="form-text">
                    {% translate "Select the hosting package assigned to this account." %}
                </div>

            </div>


            <!-- =================================================
                 NUMBER INPUT
            ================================================== -->

            <div class="col-12 col-md-6">

                <label for="quota"
                       class="form-label">

                    {% translate "Disk Quota" %}

                </label>

                <div class="input-group">

                    <input type="number"
                           class="form-control"
                           id="quota"
                           name="quota"
                           required
                           min="1"
                           value="10240"
                           data-parsley-required-message="{% translate 'Please enter a disk quota.' %}"
                           data-parsley-min-message="{% translate 'Disk quota must be greater than zero.' %}">

                    <span class="input-group-text">
                        MB
                    </span>

                </div>

                <div class="form-text">
                    {% translate "Maximum disk storage available to the account." %}
                </div>

            </div>


            <!-- =================================================
                 PASSWORD GENERATOR

                 DO NOT add page-specific password generator JS.

                 UappClass handles:
                 - generation
                 - strength
                 - show / hide
            ================================================== -->

            <div class="col-12">

                <label for="password"
                       class="form-label">

                    {% translate "Password" %}

                </label>


                <div class="eenos-password-generator">

                    <div class="input-group">

                        <!-- PASSWORD -->

                        <input type="password"
                               class="form-control eenos-password-input"
                               id="password"
                               name="password"
                               required
                               minlength="8"
                               autocomplete="new-password"
                               placeholder="{% translate 'Enter a password' %}"
                               data-parsley-required-message="{% translate 'Please enter a password.' %}"
                               data-parsley-minlength-message="{% translate 'Password must contain at least 8 characters.' %}">


                        <!-- SHOW / HIDE -->

                        <button type="button"
                                class="btn btn-outline-secondary eenos-password-toggle"
                                aria-label="{% translate 'Show password' %}"
                                title="{% translate 'Show password' %}">

                            <i data-lucide="eye"></i>

                        </button>


                        <!-- GENERATE -->

                        <button type="button"
                                class="btn btn-outline-primary eenos-password-generate"
                                aria-label="{% translate 'Generate secure password' %}"
                                title="{% translate 'Generate secure password' %}">

                            <i data-lucide="wand-sparkles"></i>

                            <span class="d-none d-sm-inline">
                                {% translate "Generate" %}
                            </span>

                        </button>

                    </div>


                    <!-- PASSWORD STRENGTH -->

                    <div class="eenos-password-strength mt-2">

                        <div class="progress"
                             style="height: 5px;">

                            <div class="progress-bar eenos-password-strength-progress"
                                 role="progressbar"
                                 style="width: 0%;"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                            </div>

                        </div>


                        <div class="d-flex justify-content-between align-items-center mt-2">

                            <small class="eenos-password-strength-text text-muted">
                            </small>

                        </div>

                    </div>

                </div>


                <div class="form-text">
                    {% translate "Use a strong password or generate a secure password automatically." %}
                </div>

            </div>


            <!-- =================================================
                 RADIO BUTTONS
            ================================================== -->

            <div class="col-12 col-md-6">

                <fieldset class="border-0 p-0 m-0">

                    <legend class="form-label">
                        {% translate "Mail Server" %}
                    </legend>

                    <div class="d-flex flex-wrap gap-4">

                        <label class="form-check">

                            <input type="radio"
                                   class="form-check-input"
                                   name="mailserver"
                                   value="local"
                                   checked>

                            <span class="form-check-label">
                                {% translate "Local" %}
                            </span>

                        </label>


                        <label class="form-check">

                            <input type="radio"
                                   class="form-check-input"
                                   name="mailserver"
                                   value="remote">

                            <span class="form-check-label">
                                {% translate "Remote" %}
                            </span>

                        </label>

                    </div>

                </fieldset>

            </div>


            <!-- =================================================
                 CHECKBOX
            ================================================== -->

            <div class="col-12 col-md-6">

                <div class="form-check">

                    <input class="form-check-input"
                           type="checkbox"
                           id="dkim"
                           name="dkim">

                    <label class="form-check-label"
                           for="dkim">

                        {% translate "Enable DKIM" %}

                    </label>

                </div>

            </div>


            <!-- =================================================
                 SWITCH
            ================================================== -->

            <div class="col-12 col-md-6">

                <div class="form-check form-switch">

                    <input class="form-check-input"
                           type="checkbox"
                           role="switch"
                           id="account_enabled"
                           name="account_enabled"
                           checked>

                    <label class="form-check-label"
                           for="account_enabled">

                        {% translate "Enable Account" %}

                    </label>

                </div>

            </div>


            <!-- =================================================
                 TEXTAREA
            ================================================== -->

            <div class="col-12">

                <label for="notes"
                       class="form-label">

                    {% translate "Notes" %}

                </label>

                <textarea class="form-control"
                          id="notes"
                          name="notes"
                          rows="4"
                          maxlength="500"
                          placeholder="{% translate 'Optional account notes' %}"></textarea>

                <div class="form-text">
                    {% translate "Optional administrative notes for this account." %}
                </div>

            </div>

        </div>


        <!-- =====================================================
             ACTION BUTTONS

             This example uses a button instead of direct submit
             because we want to validate first and then show the
             Bootstrap confirmation modal.
        ====================================================== -->

        <div class="d-flex align-items-center gap-2 mt-4">

            <button type="button"
                    class="btn btn-primary sample-save">

                <i data-lucide="save"></i>

                {% translate "Save Changes" %}

            </button>


            <a href="#"
               class="btn btn-outline-secondary">

                <i data-lucide="x"></i>

                {% translate "Cancel" %}

            </a>

        </div>

    </div>

</form>



<!-- =========================================================
     CONFIRMATION MODAL

     IMPORTANT:
     Eenos WAP uses Bootstrap 5.3 modals.

     DO NOT use:
         $.confirm()
         $.alert()
         jquery-confirm
========================================================= -->

<div class="modal fade"
     id="sampleConfirmModal"
     tabindex="-1"
     aria-labelledby="sampleConfirmModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">


            <!-- HEADER -->

            <div class="modal-header">

                <div>

                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="sampleConfirmModalLabel">

                        <i data-lucide="save"></i>

                        {% translate "Save Changes" %}

                    </h5>

                    <div class="text-muted small mt-1">
                        {% translate "Confirm the changes to this account." %}
                    </div>

                </div>


                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}">
                </button>

            </div>


            <!-- BODY -->

            <div class="modal-body">

                <div class="eenos-notice eenos-notice-info">

                    <div class="eenos-notice-icon">

                        <i data-lucide="info"></i>

                    </div>

                    <div class="eenos-notice-content">

                        <div class="eenos-notice-title">
                            {% translate "Confirm Account Changes" %}
                        </div>

                        <div class="eenos-notice-text">
                            {% translate "The updated settings will be applied to this hosting account." %}
                        </div>

                    </div>

                </div>

            </div>


            <!-- FOOTER -->

            <div class="modal-footer">

                <button type="button"
                        class="btn btn-outline-secondary"
                        data-bs-dismiss="modal">

                    <i data-lucide="x"></i>

                    {% translate "Cancel" %}

                </button>


                <button type="button"
                        class="btn btn-primary"
                        id="confirm_sample_save">

                    <i data-lucide="check"></i>

                    {% translate "Confirm & Save" %}

                </button>

            </div>

        </div>

    </div>

</div>

{% endblock %}



{% block extra_js %}

<script>
(function ($) {
    "use strict";


    /*
     * =========================================================
     * SAMPLE PAGE JS
     * =========================================================
     *
     * IMPORTANT:
     *
     * Do NOT initialize the following here:
     *
     * - Parsley global UI
     * - Password generator
     * - Password strength
     * - Password show/hide
     * - Searchable select
     * - Lucide
     *
     * These are already handled by UappClass.
     *
     * Page JS should contain only page-specific behavior.
     */


    $(function () {


        /*
         * =====================================================
         * SAVE
         * =====================================================
         *
         * Validate the form BEFORE opening the confirmation
         * modal.
         *
         * This is the standard pattern when an Eenos form
         * requires confirmation before submission.
         */

        $(".sample-save").on("click", function (event) {
            event.preventDefault();

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

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


            /*
             * Get the existing Parsley instance.
             */

            const parsleyForm = $form.parsley();


            /*
             * Run validation.
             */

            parsleyForm.validate();


            /*
             * Stop here when validation fails.
             *
             * UappClass handles the validation UI and
             * invalid-feedback messages.
             */

            if (!parsleyForm.isValid()) {
                return;
            }


            /*
             * Form is valid.
             *
             * Open Bootstrap 5.3 confirmation modal.
             */

            const modalElement =
                document.getElementById(
                    "sampleConfirmModal"
                );

            if (!modalElement) {
                return;
            }


            const modal =
                bootstrap.Modal.getOrCreateInstance(
                    modalElement
                );

            modal.show();
        });



        /*
         * =====================================================
         * CONFIRM SAVE
         * =====================================================
         */

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

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

                if (!form) {
                    return;
                }


                /*
                 * Native submit is intentional here.
                 *
                 * Validation has already completed before
                 * opening the confirmation modal.
                 */

                form.submit();
            }
        );

    });

})(jQuery);
</script>

{% endblock %}