{{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="/sources/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="/source/{{.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>
                <span class="badge-info">Retention: {{.RetentionLabel}}</span>
            </div>
            <div class="flex gap-6 mt-4 text-sm text-gray-500">
                <span>{{.EntrypointCount}} entrypoint{{if ne .EntrypointCount 1}}s{{end}}</span>
                <span>{{.TargetCount}} target{{if ne .TargetCount 1}}s{{end}}</span>
                <span>{{.EventCount}} event{{if ne .EventCount 1}}s{{end}}</span>
            </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="/sources/new" class="btn-primary">Create Webhook</a>
    </div>
    {{end}}
</div>
{{end}}