{% extends "layouts/workspace_settings.html" %}
{% comment %}
Outbound webhooks, in the shape contacts/tag_list.html established.

The add form is a modal that opens itself on an error (`open=error`), because
the view re-renders this page with the message rather than redirecting, and a
dialog that stayed shut would hide the form that produced it. The message
renders inside it.

No "…" on a row: disabling, rotating and deleting an endpoint all live on its own
page, and a second copy of them here is the seven-buttons-per-row problem coming
back. Open is the one action, and it is where the rest are.
{% endcomment %}
{% load common_extras %}
{% block title %}Webhooks · DemandTrail Messaging{% endblock %}
{% block content_wrap %}{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full">
    <div class="page-header">
        <div class="page-header-text">
            <h1 class="page-title">Outbound webhooks</h1>
            <p class="page-lede">
                DemandTrail Messaging POSTs a signed JSON document to your endpoint when something happens
                in this workspace. See the <a href="{% url 'api_docs' %}">API reference</a> for the
                payload shape and a signature-verification snippet.
            </p>
        </div>
        <button type="button" class="btn-pill-primary flex-shrink-0" @click="$modal('add-endpoint')">{% include "partials/_nav_icon.html" with name="key" icon_size=16 %} Add an endpoint</button>
    </div>

    {% modal "add-endpoint" title="Add an endpoint" open=error size="lg" %}
    <form method="post" action="{% url 'api_webhooks:create' workspace_id=request.workspace.id %}">
        {% csrf_token %}
        <div class="bb-modal-body">
        {% if error %}<div class="alert-error mb-5">{{ error }}</div>{% endif %}
        <div class="field">
            <label class="field-label" for="webhook-url">URL</label>
            <input class="form-input-styled" id="webhook-url" type="url" name="url" maxlength="500" required autofocus value="{{ submitted_url|default:'' }}" placeholder="https://example.com/hooks/brightbean">
        </div>
        <div class="field">
            <span class="field-label">Events</span>
            <div class="grid sm:grid-cols-2 gap-x-6">
                {% for choice in event_choices %}
                <label class="field-check" for="event-{{ choice.value }}">
                    <input class="bb-checkbox" id="event-{{ choice.value }}" type="checkbox" name="events" value="{{ choice.value }}" {% if choice.checked %}checked{% endif %}>
                    <span class="field-check-body"><span class="field-label">{{ choice.label }}</span><span class="field-hint"><code>{{ choice.value }}</code></span></span>
                </label>
                {% endfor %}
            </div>
        </div>
        </div>
        <div class="bb-modal-actions">
            <button type="button" class="btn-pill-secondary" @click="close()">Cancel</button>
            <button type="submit" class="btn-pill-primary">Add endpoint</button>
        </div>
    </form>
    {% endmodal %}

    <h2 class="section-title mb-3">Endpoints</h2>
    {% if webhooks %}
    <div class="card overflow-hidden">
        {% for webhook in webhooks %}
        <div class="list-row flex-wrap">
            <span class="list-row-icon">{% include "partials/_nav_icon.html" with name="key" icon_size=19 %}</span>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2.5">
                    <span class="list-row-title truncate"><code>{{ webhook.url }}</code></span>
                    {% if webhook.enabled %}<span class="status-pill status-pill-active">Enabled</span>{% else %}<span class="status-pill status-pill-disabled">Disabled</span>{% endif %}
                </div>
                <div class="list-row-meta">
                    {{ webhook.events|join:", " }} · last delivery {{ webhook.last_delivery_at|default:"never" }}{% if not webhook.enabled and webhook.disabled_at %} · disabled after repeated failures{% endif %}
                </div>
            </div>
            <a class="btn-pill-secondary btn-pill-sm flex-shrink-0" href="{% url 'api_webhooks:detail' workspace_id=request.workspace.id webhook_id=webhook.id %}">Open</a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p class="empty-state-title">No endpoints yet</p>
        <p class="empty-state-body">
            An endpoint is how something outside DemandTrail Messaging hears about a new message, a
            finished flow or a tagged contact, as it happens.
        </p>
        <button type="button" class="btn-pill-secondary mt-4" @click="$modal('add-endpoint')">Add an endpoint</button>
    </div>
    {% endif %}
</div>
{% endblock %}