{% extends "base.html" %}
{% load i18n %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Auto Update" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Configure Eenos release channels, automatic updates, operating system updates, and update schedules." %}
            </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 "Automation" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Auto Update" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-notice eenos-notice-info mb-4">
        <div class="eenos-notice-icon">
            <i data-lucide="refresh-cw"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Eenos Control Panel Auto Updates" %}</div>
            <div class="eenos-notice-text">
                {% translate "Configure how Eenos receives software updates, including the release channel, operating system updates, automatic update scheduling, and update frequency." %}
            </div>
            <div class="mt-2 small">
                <span class="text-muted">{% translate "Current Eenos Version:" %}</span>
                <strong>{{ request.session.VERSION }} {{ request.session.TIRE }}</strong>
            </div>
        </div>
    </div>
    <form action="" method="POST" class="eenos-form" id="eenos-form">
        {% csrf_token %}
        <div class="row g-4">
            <div class="col-12">
                <div class="eenos-card overflow-visible">
                    <div>
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div class="flex-shrink-0">
                                <i data-lucide="settings-2"></i>
                            </div>
                            <div>
                                <div class="eenos-panel-title">{% translate "Eenos Update Settings" %}</div>
                                <div class="eenos-panel-subtitle">
                                    {% translate "Manage the release channel and automated update behavior for this server." %}
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-lg-4">
                                    <label class="form-label mb-1" for="tire_release">{% translate "Release Channel" %}</label>
                                    <div class="form-text mt-0">
                                        {% translate "Select the Eenos release channel used to receive updates on this server." %}
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="tire"
                                                   value="release"
                                                   class="form-check-input release_on"
                                                   id="tire_release">
                                            <label class="form-check-label" for="tire_release">{% translate "Release" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="tire"
                                                   value="stable"
                                                   class="form-check-input stable_on"
                                                   id="tire_stable"
                                                   {% if "stable" not in tiers %}disabled{% endif %}>
                                            <label class="form-check-label" for="tire_stable">{% translate "Stable" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="tire"
                                                   value="lts"
                                                   class="form-check-input lts_on"
                                                   id="tire_lts"
                                                   {% if "lts" not in tiers %}disabled{% endif %}>
                                            <label class="form-check-label" for="tire_lts">{% translate "LTS" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-lg-4">
                                    <label class="form-label mb-1" for="osupdate_on">{% translate "Operating System Updates" %}</label>
                                    <div class="form-text mt-0">
                                        {% translate "Allow Eenos to update supported operating system packages and required system binaries." %}
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="osupdate"
                                                   value="on"
                                                   class="form-check-input osupdate_on"
                                                   id="osupdate_on">
                                            <label class="form-check-label" for="osupdate_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="osupdate"
                                                   value="off"
                                                   class="form-check-input osupdate_off"
                                                   id="osupdate_off">
                                            <label class="form-check-label" for="osupdate_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-lg-4">
                                    <label class="form-label mb-1" for="status_on">{% translate "Automatic Updates" %}</label>
                                    <div class="form-text mt-0">
                                        {% translate "Automatically install Eenos updates according to the configured release channel and schedule." %}
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="d-flex flex-wrap gap-3">
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="status"
                                                   value="on"
                                                   class="form-check-input status_on"
                                                   id="status_on">
                                            <label class="form-check-label" for="status_on">{% translate "On" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio"
                                                   name="status"
                                                   value="off"
                                                   class="form-check-input status_off"
                                                   id="status_off">
                                            <label class="form-check-label" for="status_off">{% translate "Off" %}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="row align-items-center g-3">
                                <div class="col-lg-4">
                                    <label class="form-label mb-1" for="timepicker">{% translate "Update Schedule" %}</label>
                                    <div class="form-text mt-0">
                                        {% translate "Specify the server time at which scheduled updates should run. The time uses a 24-hour format." %}
                                    </div>
                                </div>
                                <div class="col-lg-4 col-xl-3">
                                    <input type="text"
                                           class="form-control wap-timepicker"
                                           id="timepicker"
                                           name="time"
                                           value="{{ settings.time|default:'01:00' }}"
                                           autocomplete="off"
                                           inputmode="numeric"
                                           maxlength="5"
                                           required
                                           pattern="^(?:[01]\d|2[0-3]):[0-5]\d$"
                                           aria-describedby="timepickerHelp">
                                    <div id="timepickerHelp" class="form-text">
                                        {% translate "Select the server time when automatic updates should run. The schedule uses 24-hour time in five-minute intervals." %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mt-4">
                            <button type="button" class="btn btn-primary save_settings">
                                <i data-lucide="save" class="me-1"></i>
                                {% translate "Save Settings" %}
                            </button>
                            <button type="button" class="btn btn-outline-secondary reset">
                                <i data-lucide="rotate-ccw" class="me-1"></i>
                                {% translate "Reset to Default" %}
                            </button>
                        </div>
                        <input type="hidden" name="savesettings" id="savesettings">
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="eenos-card">
                    <div>
                        <div class="d-flex align-items-start gap-3 mb-4">
                            <div class="flex-shrink-0">
                                <i data-lucide="info"></i>
                            </div>
                            <div>
                                <div class="eenos-panel-title">{% translate "About Eenos Versions" %}</div>
                                <div class="eenos-panel-subtitle">
                                    {% translate "Learn how Eenos version numbers and release channels are structured." %}
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "Version Format" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "Eenos versions follow the format:" %}
                                <strong>[MAJOR].[MINOR].[PATCH]</strong>
                            </p>
                        </div>
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "MAJOR" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "A major version introduces significant new features, improvements, and platform-level changes." %}
                            </p>
                        </div>
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "MINOR" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "A minor version provides smaller feature enhancements, bug fixes, and improvements within a major release." %}
                            </p>
                        </div>
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "PATCH" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "A patch version contains targeted bug fixes and maintenance updates for a minor release." %}
                            </p>
                        </div>
                        <hr class="my-4">
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "RELEASE" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "The Release channel provides the newest Eenos versions and may include newly introduced features and improvements." %}
                            </p>
                        </div>
                        <div class="mb-4">
                            <h6 class="mb-1">{% translate "STABLE" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "The Stable channel provides thoroughly tested and bug-fixed versions intended for production environments. Stable releases receive support for one year or until the next supported version becomes available." %}
                            </p>
                        </div>
                        <div class="mb-0">
                            <h6 class="mb-1">{% translate "LTS" %}</h6>
                            <p class="text-muted mb-0">
                                {% translate "The Long-Term Support (LTS) channel provides extended-support versions focused on stability and maintenance. LTS releases receive support for three years or until the next LTS release becomes available." %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form action="" method="POST" id="alert-reset">
        {% csrf_token %}
        <input type="hidden" name="reset" id="reset">
    </form>
    <div class="modal fade"
         id="saveSettingsModal"
         tabindex="-1"
         aria-labelledby="saveSettingsModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveSettingsModalLabel">
                        <i data-lucide="save" class="me-2"></i>
                        {% translate "Save Auto Update Settings" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">{% translate "Do you wish to save the current auto update settings?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-primary" id="confirmSaveSettings">
                        <i data-lucide="save" class="me-1"></i>
                        {% translate "Save Settings" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="resetSettingsModal"
         tabindex="-1"
         aria-labelledby="resetSettingsModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetSettingsModalLabel">
                        <i data-lucide="rotate-ccw" class="me-2"></i>
                        {% translate "Reset Auto Update Settings" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">{% translate "Do you wish to reset all auto update settings to their default values?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button" class="btn btn-secondary" id="confirmResetSettings">
                        <i data-lucide="rotate-ccw" class="me-1"></i>
                        {% translate "Reset to Default" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
    const settings = {
        tire: "{{ settings.tire|default:'release' }}",
        osupdate: "{{ settings.osupdate|default:'on' }}",
        status: "{{ settings.status|default:'on' }}"
    };


    /*
     * Initialize settings.
     */
    if (settings.tire === "lts") {
        $(".lts_on").prop("checked", true);
    } else if (settings.tire === "stable") {
        $(".stable_on").prop("checked", true);
    } else {
        $(".release_on").prop("checked", true);
    }

    if (settings.osupdate === "off") {
        $(".osupdate_off").prop("checked", true);
    } else {
        $(".osupdate_on").prop("checked", true);
    }

    if (settings.status === "off") {
        $(".status_off").prop("checked", true);
    } else {
        $(".status_on").prop("checked", true);
    }



    /*
     * Save settings.
     */
    $(document).on("click", ".save_settings", function () {
        const form = $("#eenos-form").parsley();

        form.validate();

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

        const modal = bootstrap.Modal.getOrCreateInstance(
            document.getElementById("saveSettingsModal")
        );

        modal.show();
    });


    /*
     * Confirm save.
     */
    $(document).on("click", "#confirmSaveSettings", function () {
        $("#savesettings").val("yes");

        const modal = bootstrap.Modal.getInstance(
            document.getElementById("saveSettingsModal")
        );

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

        $("#eenos-form").trigger("submit");
    });


    /*
     * Reset settings.
     */
    $(document).on("click", ".reset", function () {
        const modal = bootstrap.Modal.getOrCreateInstance(
            document.getElementById("resetSettingsModal")
        );

        modal.show();
    });


    /*
     * Confirm reset.
     */
    $(document).on("click", "#confirmResetSettings", function () {
        $("#reset").val("yes");

        const modal = bootstrap.Modal.getInstance(
            document.getElementById("resetSettingsModal")
        );

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

        $("#alert-reset").trigger("submit");
    });


    </script>
{% endblock %}