{{template "base" .}}

{{define "title"}}New Webhook - Webhooker{{end}}

{{define "content"}}
<div class="max-w-2xl mx-auto px-6 py-8">
    <div class="mb-6">
        <a href="/sources" class="text-sm text-primary-600 hover:text-primary-700">&larr; Back to webhooks</a>
        <h1 class="text-2xl font-medium text-gray-900 mt-2">Create Webhook</h1>
    </div>

    <div class="card p-6">
        {{if .Error}}
        <div class="alert-error">{{.Error}}</div>
        {{end}}

        <form method="POST" action="/sources/new" class="space-y-6">
            <div class="form-group">
                <label for="name" class="label">Name</label>
                <input type="text" id="name" name="name" required autofocus placeholder="My Webhook" class="input">
            </div>

            <div class="form-group">
                <label for="description" class="label">Description</label>
                <textarea id="description" name="description" rows="3" placeholder="Optional description" class="input"></textarea>
            </div>

            <div class="form-group">
                <label for="retention_days" class="label">Retention (days)</label>
                <input type="number" id="retention_days" name="retention_days" value="30" min="1" max="365" class="input">
                <p class="text-xs text-gray-500 mt-1">How long to keep event data.</p>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="btn-primary">Create Webhook</button>
                <a href="/sources" class="btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
{{end}}