{% extends "base.html" %}

{% block title %}{{ 'Edit' if subscription else 'New' }} Webhook Subscription - LSMC Hub{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <div class="mb-6">
        <a href="/webhooks" class="text-blue-600 hover:text-blue-800">&larr; Back to Webhooks</a>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <h1 class="text-3xl font-bold mb-6">{{ 'Edit' if subscription else 'New' }} Webhook Subscription</h1>

        <form method="POST" action="{{ '/webhooks/' + subscription.euid|string + '/edit' if subscription else '/webhooks/new' }}">
            <div class="space-y-6">
                {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
                {% endif %}
                <!-- Subscription Name -->
                <div>
                    <label for="subscription_name" class="block text-sm font-medium text-gray-700 mb-1">
                        Subscription Name *
                    </label>
                    <input
                        type="text"
                        id="subscription_name"
                        name="subscription_name"
                        value="{{ subscription.subscription_name if subscription else '' }}"
                        required
                        maxlength="100"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="e.g., Production Webhook"
                    />
                </div>

                {% if not subscription %}
                <div>
                    <label for="site_id" class="block text-sm font-medium text-gray-700 mb-1">
                        Site{% if site_options|length > 1 %} *{% endif %}
                    </label>
                    <select
                        id="site_id"
                        name="site_id"
                        {% if site_options|length > 1 %}required{% endif %}
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                        {% if site_options|length != 1 %}
                        <option value="">-- Select Site --</option>
                        {% endif %}
                        {% for site in site_options %}
                        <option value="{{ site.id }}" {% if selected_site_id and selected_site_id == site.id %}selected{% endif %}>
                            {{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <!-- URL -->
                <div>
                    <label for="url" class="block text-sm font-medium text-gray-700 mb-1">
                        Webhook URL *
                    </label>
                    <input
                        type="url"
                        id="url"
                        name="url"
                        value="{{ revision.url if revision else '' }}"
                        required
                        maxlength="500"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="https://example.com/webhooks/lsmc"
                    />
                </div>

                <!-- Secret -->
                <div>
                    <label for="secret" class="block text-sm font-medium text-gray-700 mb-1">
                        Secret Key * <span class="text-xs text-gray-500">(for HMAC signature)</span>
                    </label>
                    <input
                        type="password"
                        id="secret"
                        name="secret"
                        value="{{ revision.secret if revision else '' }}"
                        required
                        minlength="8"
                        maxlength="100"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Enter a secure secret key"
                    />
                </div>

                <!-- Event Types -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Event Types * <span class="text-xs text-gray-500">(select at least one)</span>
                    </label>
                    <div class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded p-3">
                        {% for event_type in available_event_types %}
                        <label class="flex items-center">
                            <input
                                type="checkbox"
                                name="event_types"
                                value="{{ event_type }}"
                                {% if revision and event_type in revision.event_types %}checked{% endif %}
                                class="mr-2"
                            />
                            <span class="text-sm">{{ event_type }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>

                <!-- Timeout -->
                <div>
                    <label for="timeout_seconds" class="block text-sm font-medium text-gray-700 mb-1">
                        Timeout (seconds)
                    </label>
                    <input
                        type="number"
                        id="timeout_seconds"
                        name="timeout_seconds"
                        value="{{ revision.timeout_seconds if revision else 30 }}"
                        min="5"
                        max="300"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                </div>

                <!-- Max Retries -->
                <div>
                    <label for="max_retries" class="block text-sm font-medium text-gray-700 mb-1">
                        Max Retries
                    </label>
                    <input
                        type="number"
                        id="max_retries"
                        name="max_retries"
                        value="{{ revision.max_retries if revision else 3 }}"
                        min="0"
                        max="10"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                </div>

                <!-- Active Status (only for edit) -->
                {% if subscription %}
                <div>
                    <label class="flex items-center">
                        <input
                            type="checkbox"
                            name="is_active"
                            value="true"
                            {% if revision.is_active %}checked{% endif %}
                            class="mr-2"
                        />
                        <span class="text-sm font-medium text-gray-700">Active</span>
                    </label>
                </div>
                {% endif %}

                <!-- Note -->
                <div>
                    <label for="note" class="block text-sm font-medium text-gray-700 mb-1">
                        Note (optional)
                    </label>
                    <textarea
                        id="note"
                        name="note"
                        rows="3"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Add any notes about this webhook..."
                    >{{ revision.note if revision else '' }}</textarea>
                </div>

                <!-- Submit -->
                <div class="flex gap-3">
                    <button
                        type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-medium"
                    >
                        {{ 'Update' if subscription else 'Create' }} Subscription
                    </button>
                    <a href="/webhooks" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded font-medium inline-block">
                        Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}