{% extends "base.html" %}
{% block title %}Webhooks{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8 flex items-center gap-3">
        <span class="text-gold-400">&#128268;</span> Webhook Notifications
    </h1>

    <div class="glass p-6 rounded-2xl mb-8">
        <h2 class="text-lg font-bold text-white mb-4">Add New Webhook</h2>
        <form method="POST" action="{{ url_for('tasks.add_webhook') }}" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="block text-sm text-slate-400 mb-1">Endpoint URL</label>
                <input type="url" name="url" required class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600" placeholder="https://your-server.com/webhook">
            </div>
            <div>
                <label class="block text-sm text-slate-400 mb-2">Events</label>
                <div class="flex flex-wrap gap-3">
                    {% for event in ['task.completed', 'task.failed', 'report.created', 'campaign.published'] %}
                    <label class="flex items-center gap-2 text-sm text-slate-300">
                        <input type="checkbox" name="events" value="{{ event }}" class="rounded border-white/20 bg-black/30">
                        {{ event }}
                    </label>
                    {% endfor %}
                </div>
            </div>
            <button type="submit" class="bg-gold-500 text-black font-bold px-6 py-2 rounded-lg">Add Webhook</button>
        </form>
    </div>

    <div class="space-y-3">
        {% for ep in endpoints %}
        <div class="glass p-4 rounded-xl flex items-center justify-between">
            <div>
                <div class="text-white text-sm font-mono">{{ ep.url[:60] }}{% if ep.url|length > 60 %}...{% endif %}</div>
                <div class="text-xs text-slate-500 mt-1">Events: {{ ep.events | join(', ') if ep.events else 'All' }}</div>
            </div>
            <form method="POST" action="{{ url_for('tasks.delete_webhook', wh_id=ep.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="text-red-400 hover:text-red-300 text-sm">Delete</button>
            </form>
        </div>
        {% else %}
        <div class="text-center text-slate-500 py-8">No webhooks configured</div>
        {% endfor %}
    </div>
</div>
{% endblock %}