{{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 Rule Configuration</h1>
    </div>
    <div class="csm-page-header__actions">
        <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-sm-4"><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-sm-4"><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-sm-4"><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">
            <h3 class="card-title"><i class="ti ti-shield"></i>&nbsp;CSM Custom Rules (900xxx)</h3>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter card-table" id="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="rules-tbody"></tbody>
            </table>
        </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="/static/js/modsec-rules.js"></script>
{{end}}
{{template "layout" .}}