{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Nginx Settings" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Nginx Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure global defaults used to generate Nginx virtual hosts." %}</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 nginx-confirm"
                    data-form="rebuildAllForm"
                    data-title="{% translate 'Rebuild All Virtual Hosts' %}"
                    data-message="{% translate 'Regenerate every Nginx 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 nginx-confirm"
        data-form="restartNginxForm"
        data-title="{% translate 'Restart Nginx' %}"
        data-message="{% translate 'Restart Nginx 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 'nginxsettings' %}">Nginx</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="nginxSettingsForm" class="eenos-form">
        {% csrf_token %}
        <input type="hidden" name="savesettings" value="yes">
        {% include "includes/nginx_settings_fields.html" %}
        <div class="d-flex gap-2 mb-4">
            <button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Settings" %}</button><button type="button"
        class="btn btn-outline-secondary nginx-confirm"
        data-form="resetNginxForm"
        data-title="{% translate 'Reset Nginx Settings' %}"
        data-message="{% translate 'Restore all global Nginx 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="resetNginxForm" 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="restartNginxForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="restart" value="yes">
    </form>
    <div class="modal fade"
         id="nginxConfirmModal"
         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="nginxConfirmTitle"></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="nginxConfirmMessage"></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="nginxConfirmAction"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
      $(function () {
        let targetForm = "";
        const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById("nginxConfirmModal"));

        function setCacheOptions($switch, selector) {
          const enabled = $switch.prop("checked");
          const $options = $(selector);
          $options.toggleClass("d-none", !enabled).attr("aria-hidden", String(!enabled));
          if (!enabled) {
            $options.find("input, select, textarea").each(function () {
              const parsleyField = $(this).parsley();
              if (parsleyField) parsleyField.reset();
            });
          }
        }

        $(".nginx-setting-switch").on("change", function () {
          $($(this).data("value-target")).val(this.checked ? "on" : "off");
        });
        $("#proxycacheSwitch").on("change", function () { setCacheOptions($(this), "#proxyCacheOptions"); });
        $("#fcgicacheSwitch").on("change", function () { setCacheOptions($(this), "#fastcgiCacheOptions"); });
        setCacheOptions($("#proxycacheSwitch"), "#proxyCacheOptions");
        setCacheOptions($("#fcgicacheSwitch"), "#fastcgiCacheOptions");

        $(".nginx-confirm").on("click", function () {
          targetForm = $(this).data("form");
          $("#nginxConfirmTitle").text($(this).data("title"));
          $("#nginxConfirmMessage").text($(this).data("message"));
          $("#nginxConfirmAction").attr("class", "btn " + $(this).data("style")).text($(this).data("confirm"));
          modal.show();
        });
        $("#nginxConfirmAction").on("click", function () {
          if (targetForm) document.getElementById(targetForm).submit();
        });
      });
    </script>
{% endblock %}