{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "OpenLiteSpeed Settings" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "OpenLiteSpeed Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure global virtual-host features, security headers, and TLS behavior." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto d-sm-flex gap-2">
            <button type="button"
                    class="btn btn-outline-secondary btn-sm text-nowrap ols-confirm"
                    data-form="rebuildAllForm"
                    data-title="{% translate 'Rebuild All Virtual Hosts' %}"
                    data-message="{% translate 'Regenerate every OpenLiteSpeed virtual-host configuration?' %}"
                    data-confirm="{% translate 'Rebuild All' %}"
                    data-style="btn-warning"><i data-lucide="refresh-cw"></i>{% translate "Rebuild Vhosts" %}</button>
            <button type="button"
        class="btn btn-outline-warning btn-sm text-nowrap ols-confirm"
                    data-form="restartOlsForm"
                    data-title="{% translate 'Restart OpenLiteSpeed' %}"
                    data-message="{% translate 'Restart OpenLiteSpeed to activate the current configuration?' %}"
                    data-confirm="{% translate 'Restart' %}"
                    data-style="btn-warning"><i data-lucide="power"></i>{% translate "Restart" %}</button>
        </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 "Web Servers" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'olssettings' %}">OpenLiteSpeed</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Settings" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post" id="olsSettingsForm" class="eenos-form">
        {% csrf_token %}
        {% include "includes/ols_settings_fields.html" %}
        <div class="d-flex gap-2 mb-4">
            <button type="submit" name="savesettings" value="yes" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Settings" %}</button>
            <button type="button"
                    class="btn btn-outline-secondary ols-confirm"
                    data-form="resetOlsForm"
                    data-title="{% translate 'Reset OpenLiteSpeed Settings' %}"
                    data-message="{% translate 'Restore all global OpenLiteSpeed settings to their defaults?' %}"
                    data-confirm="{% translate 'Reset Defaults' %}"
                    data-style="btn-danger"><i data-lucide="rotate-ccw"></i>{% translate "Reset Defaults" %}</button>
        </div>
    </form>
    <form method="post" id="resetOlsForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="reset" value="yes">
    </form>
    <form method="post" id="rebuildAllForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="rebuildvhosts" value="yes">
    </form>
    <form method="post" id="restartOlsForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="restart" value="yes">
    </form>
    <div class="modal fade"
         id="olsConfirmModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="olsConfirmTitle"></h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0" id="olsConfirmMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn" id="olsConfirmAction"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
      $(function () {
        let targetForm = "";
        const modal = new bootstrap.Modal(document.getElementById("olsConfirmModal"));
        $(".ols-setting-switch").on("change", function () {
          $($(this).data("value-target")).val(this.checked ? "on" : "off");
        });
        $(".ols-confirm").on("click", function () {
          targetForm = $(this).data("form");
          $("#olsConfirmTitle").text($(this).data("title"));
          $("#olsConfirmMessage").text($(this).data("message"));
          $("#olsConfirmAction").attr("class", "btn " + $(this).data("style")).text($(this).data("confirm"));
          modal.show();
        });
        $("#olsConfirmAction").on("click", function () {
          if (targetForm) document.getElementById(targetForm).submit();
        });
      });
    </script>
{% endblock %}