{{define "title"}}Rules{{end}}
{{define "page"}}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-file-code"></i>&nbsp;Rules</h1>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-sm-6 col-lg-3"><div class="card"><div class="card-body"><div class="subheader">YAML Rules</div><div class="h1 mb-0" id="stat-yaml">-</div></div></div></div>
        <div class="col-sm-6 col-lg-3"><div class="card"><div class="card-body"><div class="subheader">YARA Rules</div><div class="h1 mb-0" id="stat-yara">-</div></div></div></div>
        <div class="col-sm-6 col-lg-3"><div class="card"><div class="card-body"><div class="subheader">Rules Version</div><div class="h1 mb-0" id="stat-version">-</div></div></div></div>
        <div class="col-sm-6 col-lg-3"><div class="card"><div class="card-body"><div class="subheader">Auto-update</div><div class="h1 mb-0" id="stat-autoupdate">-</div></div></div></div>
    </div>

    <!-- Actions -->
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-refresh"></i>&nbsp;Actions</h3>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-auto">
                    <button id="btn-reload" class="btn btn-primary">
                        <i class="ti ti-refresh"></i>&nbsp;Reload Rules
                    </button>
                    <button id="btn-test-alert" class="btn btn-outline-warning ms-2">
                        <i class="ti ti-bell-ringing"></i>&nbsp;Send Test Alert
                    </button>
                    <a href="/api/v1/export" class="btn btn-outline-secondary ms-2"><i class="ti ti-download"></i>&nbsp;Export State</a>
                    <label class="btn btn-outline-secondary ms-2 mb-0">
                        <i class="ti ti-upload" data-import-label-icon></i>&nbsp;<span data-import-label-text>Import State</span>
                        <input type="file" accept=".json" class="d-none" id="import-file">
                    </label>
                </div>
                <div class="col">
                    <span class="text-muted small">Reload all YAML and YARA rule files from the rules directory.</span>
                    <div id="rules-dir" class="text-muted small font-monospace mt-1"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rule Files Table -->
    <div class="card">
        <div class="card-header"><h3 class="card-title"><i class="ti ti-file-code"></i>&nbsp;Rule Files</h3></div>
        <div class="csm-toolbar">
            <input type="text" id="rule-files-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search by file name..." aria-label="Search rule files">
            <select id="rule-files-type-filter" class="form-select form-select-sm csm-auto-width" aria-label="Type">
                <option value="all">All types</option>
                <option value="yaml">YAML</option>
                <option value="yara">YARA</option>
            </select>
            <span class="csm-toolbar__spacer"></span>
            <span class="csm-toolbar__count" id="rule-files-count"></span>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter card-table table-sm" id="rules-table">
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Type</th>
                        <th>Size</th>
                    </tr>
                </thead>
                <tbody id="rules-tbody">
                    <tr><td colspan="3" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm"></span> Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ModSecurity Escalation Settings -->
    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-shield-off"></i>&nbsp;ModSecurity Escalation</h3>
        </div>
        <div class="card-body">
            <p class="text-muted small mb-3">CSM custom ModSecurity rules (900000-900999) can escalate to nftables firewall blocks after repeated denies. Add rule IDs here to disable escalation - the ModSecurity deny (403) still applies, but CSM won't block the IP at the firewall level.</p>
            <form id="modsec-escalation-form" class="row g-2 align-items-end mb-3">
                <div class="col-auto">
                    <label class="form-label" for="modsec-rule-id">Rule ID</label>
                    <input type="number" class="form-control" id="modsec-rule-id" placeholder="e.g. 900112" min="900000" max="900999" required>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary"><i class="ti ti-plus"></i>&nbsp;Exclude from Escalation</button>
                </div>
            </form>
            <div id="modsec-escalation-list"></div>
        </div>
    </div>

    <!-- Suppression Rules -->
    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-eye-off"></i>&nbsp;Suppression Rules</h3>
        </div>
        <div class="card-body">
            <p class="text-muted small mb-3">Suppression rules hide matching findings, stop their email/webhook alerts, and stop file, process and account remediation for them. They do not stop IP blocking or challenges; allowlist an address on the Threat page instead. Rules are stored in state, not in rule files, so they survive rule updates.</p>
            <form id="suppression-form" class="row g-2 align-items-end">
                <div class="col-sm-3">
                    <label class="form-label" for="suppress-check">Check Type</label>
                    <input type="text" class="form-control" id="suppress-check" placeholder="e.g. yara_match_realtime" list="check-types" required>
                    <datalist id="check-types"></datalist>
                </div>
                <div class="col-sm-4">
                    <label class="form-label" for="suppress-path">Path Pattern <span class="text-muted">(optional)</span></label>
                    <input type="text" class="form-control font-monospace" id="suppress-path" placeholder="e.g. /home/user/site/crud/*">
                </div>
                <div class="col-sm-3">
                    <label class="form-label" for="suppress-reason">Reason <span class="text-muted">(optional)</span></label>
                    <input type="text" class="form-control" id="suppress-reason" placeholder="e.g. False positive - JS eval">
                </div>
                <div class="col-sm-2">
                    <button type="submit" class="btn btn-primary w-100"><i class="ti ti-plus"></i>&nbsp;Add Rule</button>
                </div>
            </form>
        </div>
        <div id="suppressions-content"><div class="card-body text-center text-muted py-4"><span class="spinner-border spinner-border-sm"></span> Loading...</div></div>
    </div>
{{end}}
{{define "scripts"}}
<script src="/static/js/rules.js"></script>
{{end}}
{{template "layout" .}}