{{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">
        <table class="w-full text-center text-gray-900">
            <thead>
                <tr class="border-b border-gray-200 text-xs text-gray-500 uppercase tracking-wide">
                    <th></th>
                    <th class="py-2 font-medium">Lifetime</th>
                    <th class="py-2 font-medium">Within retention</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="py-2 text-left text-gray-600">Events</td>
                    <td class="py-2">{{.Lifetime.Events}}</td>
                    <td class="py-2">{{.WithinRetention.Events}}</td>
                </tr>
                <tr>
                    <td class="py-2 text-left text-gray-600">Deliveries</td>
                    <td class="py-2">{{.Lifetime.Deliveries}}</td>
                    <td class="py-2">{{.WithinRetention.Deliveries}}</td>
                </tr>
                <tr>
                    <td class="py-2 text-left text-gray-600">Failures</td>
                    <td class="py-2">{{.Lifetime.Failures}}</td>
                    <td class="py-2">{{.WithinRetention.Failures}}</td>
                </tr>
            </tbody>
        </table>
        <div>
            <table class="w-full text-center text-gray-900">
                <thead>
                    <tr class="border-b border-gray-200 text-xs text-gray-500 uppercase tracking-wide">
                        <th></th>
                        <th class="py-2 font-medium">Last 10 minutes</th>
                        <th class="py-2 font-medium">Last 24 hours</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 text-left text-gray-600">Events</td>
                        <td class="py-2">{{.Last10Minutes.Events}}</td>
                        <td class="py-2">{{.Last24Hours.Events}}</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-left text-gray-600">Failures</td>
                        <td class="py-2">{{.Last10Minutes.Failed}}</td>
                        <td class="py-2">{{.Last24Hours.Failed}}</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-left text-gray-600">Failure percentage</td>
                        <td class="py-2">{{.Last10Minutes.FailurePercent}}</td>
                        <td class="py-2">{{.Last24Hours.FailurePercent}}</td>
                    </tr>
                </tbody>
            </table>
            <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}}