{{template "base" .}}

{{define "title"}}Webhooks - Webhooker{{end}}

{{define "content"}}
<div class="max-w-6xl mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-medium text-gray-900">Webhooks</h1>
        <a href="/hooks/new" class="btn-primary">
            <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            New Webhook
        </a>
    </div>

    {{if .Webhooks}}
    <div class="grid gap-4">
        {{range .Webhooks}}
        <a href="/hook/{{.ID}}" class="card-elevated p-6 block">
            <div class="flex justify-between items-start">
                <div>
                    <h2 class="text-lg font-medium text-gray-900">{{.Name}}</h2>
                    {{if .Description}}
                    <p class="text-sm text-gray-500 mt-1">{{.Description}}</p>
                    {{end}}
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="badge-info">Retention: {{.RetentionLabel}}</span>
                    <!-- A label, not a control of its own: the whole card
                         is the link. -->
                    <span class="btn-small">Open &rarr;</span>
                </div>
            </div>
            <div class="flex flex-wrap gap-6 mt-4 text-sm text-gray-500">
                <span>{{.EntrypointCount}} entrypoint{{if ne .EntrypointCount 1}}s{{end}}{{if .InactiveEntrypointCount}}, {{.InactiveEntrypointCount}} inactive{{end}}</span>
                <span>{{.TargetCount}} target{{if ne .TargetCount 1}}s{{end}}{{if .InactiveTargetCount}}, {{.InactiveTargetCount}} inactive{{end}}</span>
                {{if .EventsUnreadable}}
                <span class="text-red-600">The event figures could not be read.</span>
                {{else}}
                <span>{{.EventCount}} event{{if ne .EventCount 1}}s{{end}} within retention</span>
                <span>{{with .LastEventAt}}Last event {{.UTC.Format "2006-01-02 15:04:05 UTC"}}{{else}}No events yet{{end}}</span>
                <span class="{{if .FailedLast24Hours}}font-medium text-red-600{{end}}">{{.FailedLast24Hours}} failed deliver{{if eq .FailedLast24Hours 1}}y{{else}}ies{{end}} in the last 24 hours</span>
                {{end}}
            </div>
        </a>
        {{end}}
    </div>
    {{else}}
    <div class="card p-12 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
        </svg>
        <h2 class="text-lg font-medium text-gray-900 mb-2">No webhooks yet</h2>
        <p class="text-gray-500 mb-6">Create your first webhook to start receiving and forwarding events.</p>
        <a href="/hooks/new" class="btn-primary">Create Webhook</a>
    </div>
    {{end}}
</div>
{{end}}