{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "ModSecurity Domain Protection" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header">
    <div>
        <h1 class="eenos-page-title">{% translate "ModSecurity Domain Protection" %}</h1>
        <div class="eenos-page-subtitle">{% translate "Enable or disable the web application firewall for individual domains." %}</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 "Security" %}</span>
    <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "ModSecurity" %}</span>
    <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Domain Protection" %}</span>
</nav>
{% include "includes/form_alerts.html" %}
<div class="row g-3 mb-4" aria-label="{% translate 'ModSecurity protection summary' %}">
    <div class="col-12 col-sm-4"><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="modSecurityTotal">—</div><div class="eenos-summary-card-label">{% translate "Total Websites" %}</div></div></div></div>
    <div class="col-6 col-sm-4"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="shield-check"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="modSecurityProtected">—</div><div class="eenos-summary-card-label">{% translate "Protected" %}</div></div></div></div>
    <div class="col-6 col-sm-4"><div class="eenos-card eenos-summary-card h-100"><div class="eenos-summary-card-icon"><i data-lucide="shield-off"></i></div><div class="eenos-summary-card-content"><div class="eenos-summary-card-value" id="modSecurityDisabled">—</div><div class="eenos-summary-card-label">{% translate "Disabled" %}</div></div></div></div>
</div>
<div class="eenos-card">
    <div class="eenos-card-header flex-wrap gap-3">
        <div>
            <h2 class="eenos-card-title">{% translate "Protected Websites" %}</h2>
            <p class="eenos-card-subtitle">{% translate "Control ModSecurity protection independently for each hosted website." %}</p>
        </div>
        <div class="d-flex align-items-center gap-2 col-12 col-sm-auto">
            <label for="modSecurityStatusFilter" class="visually-hidden">{% translate "Filter by protection status" %}</label>
            <select id="modSecurityStatusFilter" class="form-select form-select-sm flex-grow-1">
                <option value="all">{% translate "All statuses" %}</option>
                <option value="protected">{% translate "Protected" %}</option>
                <option value="disabled">{% translate "Disabled" %}</option>
            </select>
            <div class="eenos-card-action-icon flex-shrink-0"><i data-lucide="shield-check"></i></div>
        </div>
    </div>
    <div class="table-responsive">
        <table id="modSecurityTable" class="table align-middle w-100">
            <thead>
                <tr>
                    <th>{% translate "Website" %}</th>
                    <th>{% translate "Document Root" %}</th>
                    <th>{% translate "Domain Type" %}</th>
                    <th>{% translate "Web Application" %}</th>
                    <th class="text-center">{% translate "Protection Status" %}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<form method="post" id="modSecurityForm">
    {% csrf_token %}
    <input type="hidden" name="domain" id="modSecurityDomain">
    <input type="hidden" name="action" id="modSecurityAction">
    <input type="hidden" name="change_modsecurity" value="yes">
</form>
<div class="modal fade" id="modSecurityModal" tabindex="-1" aria-labelledby="modSecurityModalTitle" 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="modSecurityModalTitle"><i data-lucide="shield-cog"></i><span id="modSecurityModalHeading"></span></h2>
                    <div class="small text-muted mt-1">{% translate "Confirm the protection status change 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="modSecurityDomainLabel"></div>
                    </div>
                </div>
                <div class="eenos-notice mb-0" id="modSecurityNotice">
                    <div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div>
                    <div class="eenos-notice-content">
                        <div class="eenos-notice-title" id="modSecurityNoticeTitle"></div>
                        <div class="eenos-notice-text" id="modSecurityNoticeText"></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" id="confirmModSecurity"><i data-lucide="shield-check"></i><span id="confirmModSecurityText"></span></button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
(function($){"use strict";$(function(){
const esc=value=>$("<div>").text(value==null?"":value).html(),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById("modSecurityModal"));let protectionFilter="all";
$.fn.dataTable.ext.search.push(function(settings,data,dataIndex,rowData){const tableId=settings.sTableId||(settings.nTable?settings.nTable.id:"");if(tableId!=="modSecurityTable"||protectionFilter==="all")return true;const row=rowData||(settings.aoData&&settings.aoData[dataIndex]?settings.aoData[dataIndex]._aData:null);if(!row)return true;return protectionFilter==="protected"?row.modsecurity_enabled:!row.modsecurity_enabled});
const table=$("#modSecurityTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'all_domains_data' %}",dataSrc:function(response){const rows=Array.isArray(response.data)?response.data:[],protectedCount=rows.filter(row=>row.modsecurity_enabled).length;$("#modSecurityTotal").text(rows.length);$("#modSecurityProtected").text(protectedCount);$("#modSecurityDisabled").text(rows.length-protectedCount);return rows}},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 status.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[
{data:"domain",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 gap-2"><i data-lucide="external-link"></i><span>'+esc(value)+'</span></a>'},
{data:"document_root",responsivePriority:4,className:"text-nowrap",render:(value,type)=>{const root=String(value||"").replace(/^\/+/,"");if(type!=="display")return root;return '<span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/'+esc(root)+'</span></span>'}},
{data:"type",responsivePriority:4,className:"text-nowrap",render:(value,type)=>{const types={main:["{% translate 'Primary' %}","eenos-badge-primary"],addon_domain:["{% translate 'Addon' %}","eenos-badge-success"],alias_domain:["{% translate 'Alias' %}","eenos-badge-info"],sub_domain:["{% translate 'Subdomain' %}","eenos-badge-neutral"]},item=types[value]||[value,"eenos-badge-neutral"];return type!=="display"?item[0]:'<span class="badge '+item[1]+'">'+esc(item[0])+'</span>'}},
{data:"app_info",responsivePriority:3,render:(value,type,row)=>{const label=value||row.app||"{% translate 'Default' %}";return type!=="display"?label:'<span class="badge eenos-badge-neutral">'+esc(label)+'</span>'}},
{data:"modsecurity_enabled",responsivePriority:2,width:"150px",className:"text-center text-nowrap",render:(enabled,type,row)=>{if(type!=="display")return enabled;const allowed=!row.actions||row.actions.change_modsecurity!==false;return '<div class="d-inline-flex align-items-center gap-2"><span class="badge '+(enabled?'eenos-badge-success':'eenos-badge-neutral')+'">'+(enabled?"{% translate 'Protected' %}":"{% translate 'Disabled' %}")+'</span><div class="form-check form-switch d-inline-flex m-0"><input type="checkbox" class="form-check-input eenos-switch-success modsecurity-switch" role="switch" data-row="'+encodeURIComponent(JSON.stringify(row))+'" title="'+(enabled?"{% translate 'Disable ModSecurity' %}":"{% translate 'Enable ModSecurity' %}")+'" aria-label="{% translate 'Change ModSecurity status' %}" '+(enabled?'checked ':'')+(allowed?'':'disabled')+'></div></div>'}}
],drawCallback:()=>lucide.createIcons()});
table.on("responsive-display",()=>lucide.createIcons());
$("#modSecurityStatusFilter").on("change",function(){protectionFilter=this.value;table.draw()});
$(document).on("change",".modsecurity-switch",function(){const row=JSON.parse(decodeURIComponent(this.dataset.row)),enable=!row.modsecurity_enabled;this.checked=row.modsecurity_enabled;$("#modSecurityDomain").val(row.domain);$("#modSecurityDomainLabel").text(row.domain);$("#modSecurityAction").val(enable?"on":"off");$("#modSecurityModalHeading").text(enable?"{% translate 'Enable ModSecurity' %}":"{% translate 'Disable ModSecurity' %}");$("#confirmModSecurityText").text(enable?"{% translate 'Enable Protection' %}":"{% translate 'Disable Protection' %}");$("#modSecurityNotice").removeClass("eenos-notice-info eenos-notice-warning eenos-notice-danger").addClass(enable?"eenos-notice-info":"eenos-notice-warning");$("#modSecurityNoticeTitle").text(enable?"{% translate 'Web application firewall will be enabled' %}":"{% translate 'Web application firewall will be disabled' %}");$("#modSecurityNoticeText").text(enable?"{% translate 'ModSecurity will inspect incoming web requests and help block common attacks.' %}":"{% translate 'The website will no longer be protected by ModSecurity rules. Disable protection only when required for troubleshooting or application compatibility.' %}");$("#confirmModSecurity").removeClass("btn-primary btn-danger").addClass(enable?"btn-primary":"btn-danger");modal.show();lucide.createIcons()});
$("#confirmModSecurity").on("click",function(){document.getElementById("modSecurityForm").submit()});
})})(jQuery);
</script>
{% endblock %}