{{define "title"}}ModSecurity Rules{{end}}
{{define "page"}}modsec-rules{{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-list-check"></i>&nbsp;ModSecurity Rules</h1>
    </div>
    <div class="csm-page-header__actions">
        <div class="btn-group">
            <button type="button" class="btn btn-ghost-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Export ModSec rules">
                <i class="ti ti-download"></i>&nbsp;Export
            </button>
            <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" href="#" data-export="csv">CSV</a>
                <a class="dropdown-item" href="#" data-export="json">JSON</a>
            </div>
        </div>
        <a href="/modsec" class="btn btn-ghost-secondary btn-sm"><i class="ti ti-arrow-left"></i>&nbsp;Back to ModSecurity</a>
    </div>
</div>

<div id="modsec-rules-loading" class="csm-empty">
    <div class="csm-empty__icon"><span class="spinner-border spinner-border-sm"></span></div>
    <div class="csm-empty__reason">Loading rules...</div>
</div>

<div id="modsec-rules-unconfigured" class="d-none">
    <div class="card">
        <div class="csm-empty">
            <div class="csm-empty__icon"><i class="ti ti-settings-off"></i></div>
            <div class="csm-empty__title">ModSecurity rule management is not configured</div>
            <div class="csm-empty__reason">
                Missing settings: <code id="missing-fields"></code>. Add <code>modsec.rules_file</code>, <code>modsec.overrides_file</code>, and <code>modsec.reload_command</code> to csm.yaml.
            </div>
        </div>
    </div>
</div>

<div id="modsec-rules-content" class="d-none">
    <!-- Stats -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-6 col-lg"><div class="card"><div class="card-body"><div class="subheader">Total CSM Rules</div><div class="h1 mb-0" id="stat-total">--</div></div></div></div>
        <div class="col-6 col-lg"><div class="card"><div class="card-body"><div class="subheader">Active Rules</div><div class="h1 mb-0" id="stat-active">--</div></div></div></div>
        <div class="col-6 col-lg"><div class="card"><div class="card-body"><div class="subheader">Escalation Excluded</div><div class="h1 mb-0" id="stat-no-escalate">--</div></div></div></div>
    </div>

    <!-- Rules Table -->
    <div class="card mb-3">
        <div class="card-header">
            <h2 class="card-title"><i class="ti ti-shield"></i>&nbsp;CSM Custom Rules (900xxx)</h2>
        </div>
        <div class="csm-toolbar">
            <input type="text" id="rules-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search by ID or description..." aria-label="Search rules">
            <select id="rules-status-filter" class="form-select form-select-sm csm-auto-width" aria-label="Status">
                <option value="all">All status</option>
                <option value="enabled">Enabled</option>
                <option value="disabled">Disabled</option>
            </select>
            <select id="rules-action-filter" class="form-select form-select-sm csm-auto-width" aria-label="Action">
                <option value="all">All actions</option>
                <option value="deny">deny</option>
                <option value="block">block</option>
                <option value="pass">pass</option>
                <option value="redirect">redirect</option>
            </select>
            <select id="rules-escalate-filter" class="form-select form-select-sm csm-auto-width" aria-label="Escalation">
                <option value="all">All escalation</option>
                <option value="yes">Escalates</option>
                <option value="no">No escalation</option>
            </select>
            <span class="csm-toolbar__spacer"></span>
            <span class="csm-toolbar__count" id="rules-count"></span>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter card-table" id="modsec-rules-table">
                <thead>
                    <tr>
                        <th>Enabled</th>
                        <th>ID</th>
                        <th>Description</th>
                        <th>Action</th>
                        <th>Phase</th>
                        <th>Hits (24h)</th>
                        <th>Escalate</th>
                        <th>Last Hit</th>
                    </tr>
                </thead>
                <tbody id="modsec-rules-tbody"></tbody>
            </table>
        </div>
    </div>

</div>

<!-- Escalation exclusions: the daemon applies them with or without rule management configured. -->
<div class="card mt-3" id="escalation-card">
    <div class="card-header">
        <h2 class="card-title"><i class="ti ti-shield-off"></i>&nbsp;Escalation Exclusions</h2>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-3">CSM custom rules (900000-900999) escalate to a firewall block after repeated denies. An excluded rule still denies the request (403), but CSM does not block the IP in the firewall.</p>
        <form id="escalation-form" class="row g-2 align-items-end mb-3">
            <div class="col-auto">
                <label class="form-label" for="escalation-rule-id">Rule ID</label>
                <input type="number" class="form-control" id="escalation-rule-id" placeholder="e.g. 900112" min="900000" max="900999" required>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary" id="escalation-add-btn"><i class="ti ti-plus"></i>&nbsp;Exclude from escalation</button>
            </div>
        </form>
        <div id="escalation-list"></div>
    </div>
</div>

<!-- Sticky Apply Bar -->
<div id="apply-bar" class="csm-apply-bar d-none">
    <span><strong id="pending-count">0</strong> changes pending</span>
    <div>
        <button class="btn btn-ghost-secondary btn-sm me-2" id="btn-discard"><i class="ti ti-x"></i>&nbsp;Discard</button>
        <button class="btn btn-primary btn-sm" id="btn-apply"><i class="ti ti-check"></i>&nbsp;Apply Changes</button>
    </div>
</div>
{{end}}
{{define "scripts"}}
<script src="{{asset "js/modsec-rules.js"}}"></script>
{{end}}
{{template "layout" .}}