{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Varnish Settings" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Varnish Settings" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Configure cache storage, backend timeouts, compression, and worker capacity." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto"><button type="button"
                class="btn btn-outline-warning btn-sm text-nowrap varnish-confirm"
                data-form="restartVarnishForm"
                data-title="{% translate 'Restart Varnish' %}"
                data-message="{% translate 'Restart the Varnish service 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 'varnishsettings' %}">Varnish</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="varnishSettingsForm" class="eenos-form">
        {% csrf_token %}
        <input type="hidden" name="savesettings" value="yes">
        <div class="eenos-card mb-4">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "Cache and Backend" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Control memory allocation, connection capacity, response timeouts, and compression." %}</div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="memory" class="form-label">{% translate "Cache Memory" %}</label>
                    <div class="input-group"><input type="number"
       class="form-control"
       id="memory"
       name="memory"
       value="{{ settings.memory|default:'20' }}"
       min="10"
       max="90"
       required
       data-parsley-required-message="{% translate 'Enter the percentage of RAM available to Varnish.' %}"
       data-parsley-min-message="{% translate 'Cache memory must be at least 10%.' %}"
       data-parsley-max-message="{% translate 'Cache memory cannot exceed 90%.' %}"><span class="input-group-text">%</span></div>
                    <div class="form-text">{% translate "Percentage of system RAM allocated to cached objects." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="max_connections" class="form-label">{% translate "Maximum Connections" %}</label>
                    <input type="number"
                           class="form-control"
                           id="max_connections"
                           name="max_connections"
                           value="{{ settings.max_connections|default:'600' }}"
                           min="100"
                           required
                           data-parsley-required-message="{% translate 'Enter the maximum number of backend connections.' %}"
                           data-parsley-min-message="{% translate 'Maximum connections must be at least 100.' %}">
                    <div class="form-text">{% translate "Maximum simultaneous connections allowed to the backend." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="connect_timeout" class="form-label">{% translate "Connection Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="connect_timeout"
                               name="connect_timeout"
                               value="{{ settings.connect_timeout|default:'5' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the backend connection timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Maximum time allowed to establish a backend connection." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="first_byte_timeout" class="form-label">{% translate "First Byte Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="first_byte_timeout"
                               name="first_byte_timeout"
                               value="{{ settings.first_byte_timeout|default:'60' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the first byte timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Maximum wait for the backend to begin its response." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="between_bytes_timeout" class="form-label">{% translate "Between Bytes Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="between_bytes_timeout"
                               name="between_bytes_timeout"
                               value="{{ settings.between_bytes_timeout|default:'60' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the between bytes timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Maximum wait between data packets received from the backend." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="send_timeout" class="form-label">{% translate "Send Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="send_timeout"
                               name="send_timeout"
                               value="{{ settings.send_timeout|default:'600' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the response send timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Total timeout for sending standard HTTP responses." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="timeout_idle" class="form-label">{% translate "Idle Client Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="timeout_idle"
                               name="timeout_idle"
                               value="{{ settings.timeout_idle|default:'5' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the idle client timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Maximum idle time for client connections." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="cli_timeout" class="form-label">{% translate "CLI Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="cli_timeout"
                               name="cli_timeout"
                               value="{{ settings.cli_timeout|default:'60' }}"
                               min="0"
                               max="20000"
                               required
                               data-parsley-required-message="{% translate 'Enter the CLI response timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                    <div class="form-text">{% translate "Maximum wait for child-process replies to CLI requests." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="gzip_level" class="form-label">{% translate "Gzip Compression Level" %}</label>
                    <input type="number"
                           class="form-control"
                           id="gzip_level"
                           name="gzip_level"
                           value="{{ settings.gzip_level|default:'9' }}"
                           min="0"
                           max="9"
                           required
                           data-parsley-required-message="{% translate 'Enter a gzip compression level.' %}"
                           data-parsley-min-message="{% translate 'Gzip level cannot be lower than 0.' %}"
                           data-parsley-max-message="{% translate 'Gzip level cannot exceed 9.' %}">
                    <div class="form-text">{% translate "A higher level uses more CPU to reduce response size." %}</div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="gzip_buffer" class="form-label">{% translate "Gzip Buffer" %}</label>
                    <input type="text"
                           class="form-control"
                           id="gzip_buffer"
                           name="gzip_buffer"
                           value="{{ settings.gzip_buffer|default:'32k' }}"
                           maxlength="20"
                           pattern="^[0-9]+k$"
                           required
                           data-parsley-required-message="{% translate 'Enter the gzip buffer size.' %}"
                           data-parsley-pattern-message="{% translate "Enter kilobytes as a whole number followed by 'k', for example 32k." %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="http_req_size" class="form-label">{% translate "HTTP Request Workspace" %}</label>
                    <input type="text"
                           class="form-control"
                           id="http_req_size"
                           name="http_req_size"
                           value="{{ settings.http_req_size|default:'256k' }}"
                           maxlength="20"
                           pattern="^[0-9]+k$"
                           required
                           data-parsley-required-message="{% translate 'Enter the HTTP request workspace size.' %}"
                           data-parsley-pattern-message="{% translate "Enter kilobytes as a whole number followed by 'k', for example 256k." %}">
                </div>
            </div>
        </div>
        <div class="eenos-card mb-3">
            <div class="mb-4">
                <div class="eenos-panel-title">{% translate "Worker Threads" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Tune worker pools, queue capacity, per-thread memory, and idle behavior." %}</div>
            </div>
            <div class="row g-4">
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pools" class="form-label">{% translate "Thread Pools" %}</label>
                    <input type="number"
                           class="form-control"
                           id="thread_pools"
                           name="thread_pools"
                           value="{{ settings.thread_pools|default:'2' }}"
                           min="0"
                           max="32"
                           required
                           data-parsley-required-message="{% translate 'Enter the number of thread pools.' %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pool_min" class="form-label">{% translate "Minimum Threads per Pool" %}</label>
                    <input type="number"
                           class="form-control"
                           id="thread_pool_min"
                           name="thread_pool_min"
                           value="{{ settings.thread_pool_min|default:'5' }}"
                           min="5"
                           max="10000"
                           required
                           data-parsley-required-message="{% translate 'Enter the minimum number of threads per pool.' %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pool_max" class="form-label">{% translate "Maximum Threads per Pool" %}</label>
                    <input type="number"
                           class="form-control"
                           id="thread_pool_max"
                           name="thread_pool_max"
                           value="{{ settings.thread_pool_max|default:'10000' }}"
                           min="5"
                           required
                           data-parsley-required-message="{% translate 'Enter the maximum number of threads per pool.' %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pool_stack" class="form-label">{% translate "Thread Stack Size" %}</label>
                    <input type="text"
                           class="form-control"
                           id="thread_pool_stack"
                           name="thread_pool_stack"
                           value="{{ settings.thread_pool_stack|default:'64k' }}"
                           maxlength="20"
                           pattern="^[0-9]+k$"
                           required
                           data-parsley-required-message="{% translate 'Enter the thread stack size.' %}"
                           data-parsley-pattern-message="{% translate "Enter kilobytes as a whole number followed by 'k', for example 64k." %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pool_timeout" class="form-label">{% translate "Thread Idle Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="thread_pool_timeout"
                               name="thread_pool_timeout"
                               value="{{ settings.thread_pool_timeout|default:'300' }}"
                               min="10"
                               required
                               data-parsley-required-message="{% translate 'Enter the thread idle timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_queue_limit" class="form-label">{% translate "Thread Queue Limit" %}</label>
                    <input type="number"
                           class="form-control"
                           id="thread_queue_limit"
                           name="thread_queue_limit"
                           value="{{ settings.thread_queue_limit|default:'20' }}"
                           min="0"
                           required
                           data-parsley-required-message="{% translate 'Enter the thread queue limit.' %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_stats_rate" class="form-label">{% translate "Thread Statistics Rate" %}</label>
                    <input type="number"
                           class="form-control"
                           id="thread_stats_rate"
                           name="thread_stats_rate"
                           value="{{ settings.thread_stats_rate|default:'10' }}"
                           min="0"
                           required
                           data-parsley-required-message="{% translate 'Enter the thread statistics rate.' %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="workspace_thread" class="form-label">{% translate "Thread Workspace" %}</label>
                    <input type="text"
                           class="form-control"
                           id="workspace_thread"
                           name="workspace_thread"
                           value="{{ settings.workspace_thread|default:'4k' }}"
                           maxlength="20"
                           pattern="^[0-9]+k$"
                           required
                           data-parsley-required-message="{% translate 'Enter the per-thread workspace size.' %}"
                           data-parsley-pattern-message="{% translate "Enter kilobytes as a whole number followed by 'k', for example 4k." %}">
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="thread_pool_destroy_delay" class="form-label">{% translate "Thread Destroy Delay" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="thread_pool_destroy_delay"
                               name="thread_pool_destroy_delay"
                               value="{{ settings.thread_pool_destroy_delay|default:'2' }}"
                               min="0"
                               required
                               data-parsley-required-message="{% translate 'Enter the thread destroy delay.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <label for="idle_send_timeout" class="form-label">{% translate "Idle Send Timeout" %}</label>
                    <div class="input-group">
                        <input type="number"
                               class="form-control"
                               id="idle_send_timeout"
                               name="idle_send_timeout"
                               value="{{ settings.idle_send_timeout|default:'30' }}"
                               min="0"
                               required
                               data-parsley-required-message="{% translate 'Enter the idle send timeout.' %}">
                        <span class="input-group-text">{% translate "seconds" %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="form-check form-switch mt-md-4 pt-md-2">
                        <input class="form-check-input"
                               type="checkbox"
                               role="switch"
                               id="http2Switch"
                               {% if settings.http2 != '-http2' %}checked{% endif %}>
                        <label class="form-check-label" for="http2Switch">{% translate "HTTP/2 Support" %}</label>
                    </div>
                    <input type="hidden"
                           name="http2"
                           id="http2"
                           value="{{ settings.http2|default:'+http2' }}">
                    <div class="form-text">{% translate "Enable HTTP/2 support in the Varnish feature configuration." %}</div>
                </div>
            </div>
        </div>
        <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 varnish-confirm"
                    data-form="resetVarnishForm"
                    data-title="{% translate 'Reset Varnish Settings' %}"
                    data-message="{% translate 'Restore all Varnish settings to their default values?' %}"
                    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="resetVarnishForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="reset" value="yes">
    </form>
    <form method="post" id="restartVarnishForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="restart" value="yes">
    </form>
    <div class="modal fade"
         id="varnishConfirmModal"
         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="varnishConfirmTitle"></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="varnishConfirmMessage"></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="varnishConfirmAction"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){let targetForm="";const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("varnishConfirmModal"));$("#http2Switch").on("change",function(){$("#http2").val(this.checked?"+http2":"-http2")});$(".varnish-confirm").on("click",function(){targetForm=$(this).data("form");$("#varnishConfirmTitle").text($(this).data("title"));$("#varnishConfirmMessage").text($(this).data("message"));$("#varnishConfirmAction").attr("class","btn "+$(this).data("style")).text($(this).data("confirm"));modal.show()});$("#varnishConfirmAction").on("click",function(){if(targetForm)document.getElementById(targetForm).submit()})});
    </script>
{% endblock %}