{{define "title"}}Incidents{{end}}
{{define "page"}}incident{{end}}
{{define "content"}}
    <div class="page-header mb-3">
        <div class="row align-items-center">
            <div class="col-auto"><h2 class="page-title">Incidents</h2></div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-timeline-event"></i>&nbsp;Incident Timeline</h3>
            <div class="card-actions d-flex gap-2 align-items-center flex-wrap">
                <input type="text" id="incident-query" class="form-control form-control-sm csm-input-lg" placeholder="IP or account name...">
                <div class="btn-group btn-group-sm" role="group" aria-label="Time range">
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="24">24h</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn active" data-hours="72">3d</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="168">7d</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="720">30d</button>
                </div>
                <button class="btn btn-primary btn-sm" id="incident-search-btn"><i class="ti ti-search"></i>&nbsp;Search</button>
            </div>
        </div>
        <div id="incident-content">
            <div class="card-body text-center text-muted py-4">
                <div class="mb-2">Enter an IP address or cPanel account name to view the incident timeline.</div>
                <div class="small">Examples: <code>192.168.1.1</code>, <code>2001:db8::1</code>, <code>username</code></div>
            </div>
        </div>
    </div>
{{end}}
{{define "scripts"}}
<script src="/static/js/incident.js"></script>
{{end}}
{{template "layout" .}}