{{define "title"}}ModSecurity{{end}}
{{define "page"}}modsec{{end}}
{{define "content"}}
<div class="csm-page-header mb-3">
    <div class="csm-page-header__main">
        <h1 class="csm-page-header__title"><i class="ti ti-shield-check"></i>&nbsp;ModSecurity</h1>
        <div class="csm-page-header__subtitle" id="modsec-subtitle">Loading WAF surface...</div>
    </div>
    <div class="csm-page-header__actions">
        <select id="modsec-window-filter" class="form-select form-select-sm csm-auto-width" aria-label="Time range" title="Time range">
            <option value="24h">Last 24h</option>
            <option value="6h">Last 6h</option>
            <option value="1h">Last 1h</option>
        </select>
        <select id="modsec-severity-filter" class="form-select form-select-sm csm-auto-width" aria-label="Minimum severity" title="Minimum severity">
            <option value="">All severities</option>
            <option value="critical">Critical</option>
            <option value="high">High and up</option>
            <option value="warning">Warning and up</option>
        </select>
        <button type="button" class="btn btn-ghost-secondary btn-sm" id="modsec-refresh" title="Refresh ModSecurity surface" aria-label="Refresh ModSecurity surface">
            <i class="ti ti-refresh"></i>
        </button>
        <a href="/modsec/rules" class="btn btn-ghost-secondary btn-sm"><i class="ti ti-settings"></i>&nbsp;Manage Rules</a>
    </div>
</div>

<div class="csm-status-strip mb-3" id="modsec-status-strip"></div>

<!-- First viewport: WAF pressure (left) + top rules/domains (right) -->
<div class="row row-cards mb-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title"><i class="ti ti-flame"></i>&nbsp;Active WAF pressure</h2>
                <div class="card-actions">
                    <span class="text-muted small" id="modsec-pressure-count"></span>
                </div>
            </div>
            <div class="csm-summary-list csm-summary-list--scroll" id="modsec-pressure">
                <div class="csm-empty">
                    <div class="csm-empty__icon"><i class="ti ti-loader-2"></i></div>
                    <div class="csm-empty__reason">Loading WAF pressure...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title"><i class="ti ti-chart-bar"></i>&nbsp;Top rules and domains</h2>
            </div>
            <div class="card-body">
                <div class="subheader mb-2">Top rules by hits</div>
                <div class="mb-3" id="modsec-top-rules">
                    <div class="text-muted small">Loading...</div>
                </div>
                <hr class="my-2">
                <div class="subheader mb-2">Top affected domains</div>
                <div class="mb-3" id="modsec-top-domains">
                    <div class="text-muted small">Loading...</div>
                </div>
                <hr class="my-2">
                <div class="d-flex justify-content-between">
                    <span class="text-muted small">Status</span>
                    <span class="small">
                        <span id="modsec-escalated-pill" class="badge bg-red-lt me-1">0 escalated</span>
                        <span id="modsec-deny-pill" class="badge bg-yellow-lt">0 WAF only</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tabs: Blocked IPs / Events / Rules -->
<div class="card">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="modsec-tab-blocked" data-bs-toggle="tab" data-bs-target="#modsec-pane-blocked" type="button" role="tab" aria-controls="modsec-pane-blocked" aria-selected="true">
                <i class="ti ti-shield-lock"></i>&nbsp;Blocked IPs
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="modsec-tab-events" data-bs-toggle="tab" data-bs-target="#modsec-pane-events" type="button" role="tab" aria-controls="modsec-pane-events" aria-selected="false">
                <i class="ti ti-list"></i>&nbsp;Events
            </button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- Blocked IPs tab -->
        <div class="tab-pane fade show active" id="modsec-pane-blocked" role="tabpanel" aria-labelledby="modsec-tab-blocked" tabindex="0">
            <div class="csm-toolbar">
                <input type="text" id="modsec-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search IP, rule, domain..." aria-label="Search blocked IPs">
                <select id="modsec-status-filter" class="form-select form-select-sm csm-auto-width" aria-label="Status filter">
                    <option value="">All statuses</option>
                    <option value="escalated">Firewall blocked</option>
                    <option value="waf">WAF deny only</option>
                </select>
                <select id="modsec-country-filter" class="form-select form-select-sm csm-auto-width" aria-label="Country filter">
                    <option value="">All countries</option>
                </select>
                <span class="csm-toolbar__spacer"></span>
                <button type="button" class="btn btn-warning btn-sm d-none" id="modsec-bulk-disable" title="Disable the selected rules so they no longer block">
                    <i class="ti ti-circle-off"></i>&nbsp;Disable Selected
                </button>
                <span class="csm-toolbar__count" id="modsec-blocked-count"></span>
            </div>
            <div id="modsec-content">
                <div class="card-body text-center text-muted py-3">
                    <span class="spinner-border spinner-border-sm"></span> Loading blocked IPs...
                </div>
            </div>
        </div>

        <!-- Events tab -->
        <div class="tab-pane fade" id="modsec-pane-events" role="tabpanel" aria-labelledby="modsec-tab-events" tabindex="0">
            <div class="csm-toolbar">
                <input type="text" id="events-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search events..." aria-label="Search events">
                <select id="events-country-filter" class="form-select form-select-sm csm-auto-width" aria-label="Country filter">
                    <option value="">All countries</option>
                </select>
                <span class="csm-toolbar__spacer"></span>
                <span class="csm-toolbar__count" id="modsec-events-count"></span>
            </div>
            <div id="modsec-events">
                <div class="card-body text-center text-muted py-3">
                    <span class="spinner-border spinner-border-sm"></span> Loading events...
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script src="{{asset "js/modsec.js"}}"></script>
{{end}}

{{template "layout" .}}