{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Nginx Websites" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header"><div><h1 class="eenos-page-title">{% translate "Nginx Websites" %}</h1><div class="eenos-page-subtitle">{% translate "Monitor and configure protocols, caching, protection, and advanced Nginx behavior for your websites." %}</div></div></div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Web Servers" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Nginx" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Nginx Websites" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-5 g-3 mb-4" aria-label="{% translate 'Nginx websites summary' %}">
    <div class="col"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="globe-2"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="nginxTotalCount">—</div><div class="eenos-summary-card-label">{% translate "Websites" %}</div></div></div></div>
    <div class="col"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="network"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="nginxHttp2Count">—</div><div class="eenos-summary-card-label">HTTP/2</div></div></div></div>
    <div class="col"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="gauge"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="nginxHttp3Count">—</div><div class="eenos-summary-card-label">HTTP/3</div></div></div></div>
    <div class="col"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="database-zap"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="nginxCachedCount">—</div><div class="eenos-summary-card-label">{% translate "Cached" %}</div></div></div></div>
    <div class="col"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="sliders-horizontal"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="nginxCustomCount">—</div><div class="eenos-summary-card-label">{% translate "Customized" %}</div></div></div></div>
</div>
<div class="eenos-card">
    <div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Nginx Website Configuration" %}</h2></div><div class="eenos-card-action-icon"><i data-lucide="server"></i></div></div>
    <div class="d-flex flex-wrap align-items-center gap-2 mb-3" id="nginxTableFilters" role="group" aria-label="{% translate 'Filter Nginx websites' %}"><span class="small fw-semibold text-muted me-1">{% translate "Show" %}:</span><button type="button" class="btn btn-sm btn-secondary nginx-filter active" data-filter="all">{% translate "All websites" %}</button><button type="button" class="btn btn-sm btn-outline-secondary nginx-filter" data-filter="cached">{% translate "Cached" %}</button><button type="button" class="btn btn-sm btn-outline-secondary nginx-filter" data-filter="uncached">{% translate "Cache disabled" %}</button><button type="button" class="btn btn-sm btn-outline-secondary nginx-filter" data-filter="http3">HTTP/3</button><button type="button" class="btn btn-sm btn-outline-secondary nginx-filter" data-filter="custom">{% translate "Custom settings" %}</button></div>
    <div class="table-responsive"><table id="nginxDomainsTable" class="table align-middle w-100"><thead><tr><th>{% translate "Website" %}</th><th>{% translate "Web Application" %}</th><th class="text-center">HTTP/2</th><th class="text-center">HTTP/3</th><th>{% translate "Caching" %}</th><th class="text-center">{% translate "Hotlink Protection" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead></table></div>
</div>
<form method="post" id="nginxQuickForm">{% csrf_token %}<input type="hidden" name="domain" id="nginxQuickDomain"><input type="hidden" name="action" id="nginxQuickAction"><input type="hidden" id="nginxQuickOperation"></form>
<form method="post" id="nginxResetForm">{% csrf_token %}<input type="hidden" name="domain" id="nginxResetDomain"><input type="hidden" name="reset" value="yes"></form>
<div class="modal fade" id="nginxModifyModal" tabindex="-1" aria-labelledby="nginxModifyTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="nginxModifyTitle"><i data-lucide="shield-alert"></i>{% translate "Advanced Nginx Settings" %}</h2><div class="small text-muted mt-1">{% translate "Continue only if you understand Nginx configuration and performance tuning." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Website to configure" %}</div><div class="eenos-modal-info-value text-break" id="nginxModifyDomainLabel"></div></div></div><div class="eenos-amber-notice eenos-amber-notice-warning mb-4" 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 "Incorrect settings can disrupt this website" %}</div><div class="eenos-amber-notice-text">{% translate "Changing protocol, buffering, cache, timeout, or security options can reduce performance or make the website unavailable. These settings are intended for experienced server administrators." %}</div></div></div><div class="border rounded-3 p-3 mb-4"><div class="fw-semibold d-flex align-items-center gap-2 mb-2"><i data-lucide="activity"></i>{% translate "Possible impact" %}</div><ul class="small text-muted mb-0 ps-4"><li>{% translate "Website speed and resource usage" %}</li><li>{% translate "Proxy and FastCGI application compatibility" %}</li><li>{% translate "Security, connection handling, and availability" %}</li></ul></div><div class="d-flex align-items-start gap-2 mb-4"><i data-lucide="lightbulb" class="flex-shrink-0 mt-1"></i><div><div class="fw-semibold">{% translate "Recommended" %}</div><div class="small text-muted">{% translate "If you are unsure what an option does, leave this website on the server defaults." %}</div></div></div><div class="form-check"><input class="form-check-input" type="checkbox" id="nginxModifyAcknowledgement"><label class="form-check-label fw-semibold" for="nginxModifyAcknowledgement">{% translate "I understand the risks and want to open the advanced settings." %}</label></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="shield-check"></i>{% translate "Keep Defaults" %}</button><button type="button" class="btn btn-secondary" id="confirmNginxModify" disabled><i data-lucide="settings-2"></i>{% translate "Open Advanced Settings" %}</button></div></div></div></div>
<div class="modal fade" id="nginxChangeModal" tabindex="-1" aria-labelledby="nginxChangeTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="nginxChangeTitle"><i data-lucide="server-cog"></i><span id="nginxChangeHeading"></span></h2><div class="small text-muted mt-1">{% translate "Confirm this Nginx setting change." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Website" %}</div><div class="eenos-modal-info-value text-break" id="nginxChangeDomainLabel"></div></div></div><div class="eenos-notice eenos-notice-info mb-0"><div class="eenos-notice-icon"><i data-lucide="info"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title" id="nginxChangeNoticeTitle"></div><div class="eenos-notice-text">{% translate "The website's Nginx configuration will be rebuilt with the selected status." %}</div></div></div></div><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="confirmNginxChange"><i data-lucide="check"></i><span id="confirmNginxChangeText"></span></button></div></div></div></div>
<div class="modal fade" id="nginxResetModal" tabindex="-1" aria-labelledby="nginxResetTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="nginxResetTitle"><i data-lucide="rotate-ccw"></i>{% translate "Reset Nginx Settings" %}</h2><div class="small text-muted mt-1">{% translate "Restore the inherited server defaults for this website." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div><div class="modal-body"><div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="globe-2"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Website" %}</div><div class="eenos-modal-info-value text-break" id="nginxResetDomainLabel"></div></div></div><div class="eenos-notice eenos-notice-warning mb-0"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Custom settings will be removed" %}</div><div class="eenos-notice-text">{% translate "All domain-specific Nginx settings will be replaced by the current server defaults." %}</div></div></div></div><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-danger" id="confirmNginxReset"><i data-lucide="rotate-ccw"></i>{% translate "Reset Settings" %}</button></div></div></div></div>
{% endblock %}
{% block extra_js %}<script>
(function($){"use strict";$(function(){
const esc=value=>$("<div>").text(value==null?"":value).html(),modifyModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("nginxModifyModal")),changeModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("nginxChangeModal")),resetModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("nginxResetModal"));let activeFilter="all";
const switchColumn=(field,operation,label,priority)=>({data:field,responsivePriority:priority,width:"104px",className:"text-center text-nowrap",render:(enabled,type,row)=>type!=="display"?enabled:'<div class="form-check form-switch d-inline-flex m-0"><input type="checkbox" class="form-check-input eenos-switch-success nginx-quick-switch" role="switch" data-row="'+encodeURIComponent(JSON.stringify(row))+'" data-field="'+field+'" data-operation="'+operation+'" data-label="'+encodeURIComponent(label)+'" aria-label="'+esc(label)+'" '+(enabled?'checked':'')+'></div>'});
$.fn.dataTable.ext.search.push(function(settings,data,index,rowData){const tableNode=settings.table||settings.nTable||null,tableId=tableNode?tableNode.id:(settings.sTableId||"");if(tableId!=="nginxDomainsTable"||activeFilter==="all")return true;const row=rowData||(!Array.isArray(data)&&data?data:null)||(settings.aoData&&settings.aoData[index]?settings.aoData[index]._aData:null);if(!row)return true;if(activeFilter==="cached")return row.proxy_cache_enabled||row.fcgi_cache_enabled;if(activeFilter==="uncached")return !row.proxy_cache_enabled&&!row.fcgi_cache_enabled;if(activeFilter==="http3")return row.http3_enabled;if(activeFilter==="custom")return row.custom_settings;return true});
const table=$("#nginxDomainsTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'nginx_domains_data' %}",dataSrc:json=>{const summary=json.summary||{};$("#nginxTotalCount").text(summary.total??0);$("#nginxHttp2Count").text(summary.http2??0);$("#nginxHttp3Count").text(summary.http3??0);$("#nginxCachedCount").text(summary.cached??0);$("#nginxCustomCount").text(summary.custom??0);return Array.isArray(json.data)?json.data:[]}},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No websites are available.' %}",zeroRecords:"{% translate 'No websites match the selected filter.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[
{data:"domain",width:"24%",responsivePriority:1,className:"text-nowrap",render:(value,type,row)=>type!=="display"?value:'<a href="'+esc(row.site_url)+'" target="_blank" rel="noopener noreferrer" class="d-inline-flex align-items-center align-middle gap-1 text-decoration-none"><i data-lucide="external-link"></i><span>'+esc(value)+'</span></a>'},
{data:"app_info",responsivePriority:3,render:(value,type,row)=>{const description=value||row.app||"{% translate 'System Default' %}",template=row.app==="default"?"{% translate 'System Default' %}":row.app;if(type!=="display")return description+" "+template;return '<div class="d-flex flex-column align-items-start gap-1"><span class="fw-semibold">'+esc(description)+'</span><span class="badge eenos-badge-neutral font-monospace">'+esc(template)+'</span></div>'}},
switchColumn("http2_enabled","change_http2","HTTP/2",10),switchColumn("http3_enabled","change_http3","HTTP/3",11),
{data:null,responsivePriority:12,className:"text-nowrap",render:(data,type,row)=>{if(type!=="display")return (row.proxy_cache_enabled?"Proxy ":"")+(row.fcgi_cache_enabled?"FastCGI":"");const cacheSwitch=(field,operation,label,enabled)=>'<label class="d-flex align-items-center justify-content-between gap-3 mb-1"><span class="small">'+label+'</span><span class="form-check form-switch d-inline-flex m-0"><input type="checkbox" class="form-check-input eenos-switch-success nginx-quick-switch" role="switch" data-row="'+encodeURIComponent(JSON.stringify(row))+'" data-field="'+field+'" data-operation="'+operation+'" data-label="'+encodeURIComponent(label)+'" aria-label="'+esc(label)+'" '+(enabled?'checked':'')+'></span></label>';return '<div class="d-flex flex-column">'+cacheSwitch("proxy_cache_enabled","change_proxycache","{% translate 'Proxy' %}",row.proxy_cache_enabled)+cacheSwitch("fcgi_cache_enabled","change_fcgicache","FastCGI",row.fcgi_cache_enabled)+'</div>'}},
switchColumn("hotlink_protection_enabled","change_hotlink","{% translate 'Hotlink Protection' %}",13),
{data:null,orderable:false,searchable:false,responsivePriority:2,className:"text-end text-nowrap",render:(data,type,row)=>{if(type!=="display")return "";const reset=row.custom_settings?'<button type="button" class="btn btn-sm btn-outline-danger nginx-reset" data-domain="'+encodeURIComponent(row.domain)+'" title="{% translate 'Reset custom Nginx settings to server defaults' %}" aria-label="{% translate 'Reset custom Nginx settings to server defaults' %}"><i data-lucide="rotate-ccw"></i></button>':'<button type="button" class="btn btn-sm btn-outline-secondary" disabled title="{% translate 'This website already uses the server defaults' %}" aria-label="{% translate 'This website already uses the server defaults' %}"><i data-lucide="rotate-ccw"></i></button>';return '<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-secondary nginx-modify" data-domain="'+encodeURIComponent(row.domain)+'" data-url="'+encodeURIComponent(row.edit_url)+'" title="{% translate 'Open advanced Nginx settings' %}" aria-label="{% translate 'Open advanced Nginx settings' %}"><i data-lucide="settings-2"></i></button>'+reset+'</div>'}}
],drawCallback:()=>lucide.createIcons()});table.on("responsive-display",()=>lucide.createIcons());
$(document).on("click",".nginx-filter",function(){activeFilter=this.dataset.filter;$(".nginx-filter").removeClass("btn-secondary active").addClass("btn-outline-secondary");$(this).removeClass("btn-outline-secondary").addClass("btn-secondary active");table.draw()});
$(document).on("click",".nginx-modify",function(){const domain=decodeURIComponent(this.dataset.domain),url=decodeURIComponent(this.dataset.url);$("#nginxModifyDomainLabel").text(domain);$("#nginxModifyAcknowledgement").prop("checked",false);$("#confirmNginxModify").prop("disabled",true).data("url",url);modifyModal.show()});
$("#nginxModifyAcknowledgement").on("change",function(){$("#confirmNginxModify").prop("disabled",!this.checked)});$("#confirmNginxModify").on("click",function(){const url=$(this).data("url");if(!this.disabled&&url)window.location.assign(url)});
$(document).on("change",".nginx-quick-switch",function(){const row=JSON.parse(decodeURIComponent(this.dataset.row)),field=this.dataset.field,enable=!row[field],label=decodeURIComponent(this.dataset.label);this.checked=row[field];$("#nginxQuickDomain").val(row.domain);$("#nginxQuickAction").val(enable?"on":"off");$("#nginxQuickOperation").attr("name",this.dataset.operation).val("yes");$("#nginxChangeDomainLabel").text(row.domain);$("#nginxChangeHeading,#confirmNginxChangeText").text((enable?"{% translate 'Enable' %}":"{% translate 'Disable' %}")+" "+label);$("#nginxChangeNoticeTitle").text(label+" "+(enable?"{% translate 'will be enabled' %}":"{% translate 'will be disabled' %}"));changeModal.show()});
$("#confirmNginxChange").on("click",function(){document.getElementById("nginxQuickForm").submit()});
$(document).on("click",".nginx-reset",function(){const domain=decodeURIComponent(this.dataset.domain);$("#nginxResetDomain").val(domain);$("#nginxResetDomainLabel").text(domain);resetModal.show()});$("#confirmNginxReset").on("click",function(){document.getElementById("nginxResetForm").submit()});
})})(jQuery);
</script>{% endblock %}