{{define "title"}}Monitoring - Email Server{{end}}

{{define "content"}}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-graph-up me-2"></i>Monitoring</h2>
        <span class="text-muted small">Last {{.hours}} hours</span>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0"><i class="bi bi-bar-chart-line me-2"></i>Message volume</h6></div>
                <div class="card-body">
                    {{if .volume}}
                    <div class="d-flex align-items-end gap-1" style="height: 140px;">
                        {{range .volume}}
                        {{$total := add (add .Relayed .Partial) .Failed}}
                        <div class="flex-fill d-flex flex-column-reverse" style="height: 100%;" title="{{strftime "%Y-%m-%d %H:00" .Hour}} — {{$total}} message(s)">
                            {{if gt .Failed 0}}<div class="bg-danger" style="width:100%; height: {{pct .Failed $.max_volume}}%; min-height: 2px;"></div>{{end}}
                            {{if gt .Partial 0}}<div class="bg-warning" style="width:100%; height: {{pct .Partial $.max_volume}}%; min-height: 2px;"></div>{{end}}
                            {{if gt .Relayed 0}}<div class="bg-success" style="width:100%; height: {{pct .Relayed $.max_volume}}%; min-height: 2px;"></div>{{end}}
                        </div>
                        {{end}}
                    </div>
                    <div class="d-flex justify-content-between text-muted small mt-2">
                        <span>{{strftime "%H:00" (index .volume 0).Hour}}</span>
                        <span>now</span>
                    </div>
                    <div class="small mt-2">
                        <span class="badge bg-success">&nbsp;</span> Relayed
                        <span class="badge bg-warning ms-2">&nbsp;</span> Partial
                        <span class="badge bg-danger ms-2">&nbsp;</span> Failed
                    </div>
                    {{else}}
                    <p class="text-muted mb-0">No messages logged yet.</p>
                    {{end}}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0"><i class="bi bi-check2-circle me-2"></i>Delivery success rate</h6></div>
                <div class="card-body">
                    {{$deliveryTotal := add .delivery_success .delivery_failed}}
                    {{if gt $deliveryTotal 0}}
                    <div class="progress mb-2" style="height: 1.5rem;">
                        <div class="progress-bar bg-success" style="width: {{pct .delivery_success $deliveryTotal}}%"></div>
                        <div class="progress-bar bg-danger" style="width: {{pct .delivery_failed $deliveryTotal}}%"></div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-success"><strong>{{.delivery_success}}</strong> delivered</span>
                        <span class="text-danger"><strong>{{.delivery_failed}}</strong> failed</span>
                    </div>
                    {{else}}
                    <p class="text-muted mb-0">No recipient deliveries logged yet.</p>
                    {{end}}
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0"><i class="bi bi-globe me-2"></i>Busiest sending domains</h6></div>
                <div class="card-body">
                    {{if .domain_counts}}
                    {{range .domain_counts}}
                    <div class="mb-2">
                        <div class="d-flex justify-content-between small"><span>{{.Domain}}</span><span class="text-muted">{{.Count}}</span></div>
                        <div class="progress" style="height: 0.5rem;">
                            <div class="progress-bar bg-info" style="width: {{pct .Count $.max_domain_count}}%"></div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p class="text-muted mb-0">No messages logged yet.</p>
                    {{end}}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><h6 class="mb-0"><i class="bi bi-hdd-stack me-2"></i>Mailboxes closest to quota</h6></div>
                <div class="card-body">
                    {{if .quota_usage}}
                    {{range .quota_usage}}
                    {{$pct := pct .UsedBytes .QuotaBytes}}
                    <div class="mb-2">
                        <div class="d-flex justify-content-between small"><span>{{.Email}}</span><span class="text-muted">{{filesize .UsedBytes}} / {{filesize .QuotaBytes}}</span></div>
                        <div class="progress" style="height: 0.5rem;">
                            <div class="progress-bar {{if ge $pct 90}}bg-danger{{else if ge $pct 75}}bg-warning{{else}}bg-success{{end}}" style="width: {{$pct}}%"></div>
                        </div>
                    </div>
                    {{end}}
                    {{else}}
                    <p class="text-muted mb-0">No mailboxes yet.</p>
                    {{end}}
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}