{{define "webhook_stats"}}
<!-- Statistics pane at the top of the webhook page. -->
<div class="card mb-6">
    <div class="p-4 border-b border-gray-200">
        <h2 class="text-lg font-medium text-gray-900">Statistics</h2>
    </div>
    {{with .Stats}}
    <div class="p-4 flex flex-wrap gap-6 text-sm border-b border-gray-200">
        <div>
            <span class="text-gray-500">Entrypoints</span>
            <span class="font-medium text-gray-900">{{.Entrypoints}}</span>
            <span class="text-gray-500">({{.ActiveEntrypoints}} active)</span>
        </div>
        <div>
            <span class="text-gray-500">Targets</span>
            <span class="font-medium text-gray-900">{{.Targets}}</span>
            <span class="text-gray-500">({{.ActiveTargets}} active)</span>
        </div>
        <div>
            <span class="text-gray-500">Deliveries in progress</span>
            <span class="font-medium text-gray-900">{{.InProgress}}</span>
        </div>
        <div>
            <span class="text-gray-500">Last event</span>
            <span class="font-medium text-gray-900">{{with .LastEventAt}}{{.Format "2006-01-02 15:04:05 UTC"}}{{else}}none{{end}}</span>
        </div>
        <div>
            <span class="text-gray-500">Retention</span>
            <span class="font-medium text-gray-900">{{$.Webhook.RetentionLabel}}</span>
        </div>
    </div>
    <div class="p-4 grid grid-cols-1 lg:grid-cols-2 gap-6 text-sm">
        <div>
            <div class="flex py-2 border-b border-gray-200 text-xs text-gray-500 uppercase tracking-wide">
                <span class="flex-1"></span>
                <span class="w-32 text-center">Lifetime</span>
                <span class="w-32 text-center">Within retention</span>
            </div>
            <div class="divide-y divide-gray-100">
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Events</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.Events}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.EventsWithinRetention}}</span>
                </div>
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Deliveries</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.Deliveries}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.DeliveriesWithinRetention}}</span>
                </div>
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Failures</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.Failures}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Totals.FailuresWithinRetention}}</span>
                </div>
            </div>
        </div>
        <div>
            <div class="flex py-2 border-b border-gray-200 text-xs text-gray-500 uppercase tracking-wide">
                <span class="flex-1"></span>
                <span class="w-32 text-center">Last 10 minutes</span>
                <span class="w-32 text-center">Last 24 hours</span>
            </div>
            <div class="divide-y divide-gray-100">
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Events</span>
                    <span class="w-32 text-center text-gray-900">{{.Last10Minutes.Events}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Last24Hours.Events}}</span>
                </div>
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Failures</span>
                    <span class="w-32 text-center text-gray-900">{{.Last10Minutes.Failed}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Last24Hours.Failed}}</span>
                </div>
                <div class="flex py-2">
                    <span class="flex-1 text-gray-600">Failure percentage</span>
                    <span class="w-32 text-center text-gray-900">{{.Last10Minutes.FailurePercent}}</span>
                    <span class="w-32 text-center text-gray-900">{{.Last24Hours.FailurePercent}}</span>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-500">Failure percentage is the failed deliveries out of all deliveries that finished in the window. Deliveries still pending or retrying are not counted.</p>
        </div>
    </div>
    {{else}}
    <div class="p-4 text-sm text-gray-500">The statistics could not be read.</div>
    {{end}}
</div>
{{end}}