<x-layouts.user :title="__('New Webhook')" nav-key="more" page="user-webhooks-create">

    <!-- Sticky toolbar -->
    <div class="border-b border-paper-200 bg-paper-0 sticky top-0 z-20">
        <div class="max-w-none mx-auto px-4 sm:px-6 lg:px-7 py-3 flex items-center justify-between gap-4">
            <div class="flex items-center gap-3 min-w-0">
                <a href="{{ url('/webhooks') }}"
                    class="w-8 h-8 rounded-full border border-paper-200 bg-paper-0 hover:bg-paper-50 flex items-center justify-center"
                    title="{{ __('Back') }}"><svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none"
                        stroke="currentColor" stroke-width="1.6">
                        <path d="M10 4l-4 4 4 4" />
                    </svg></a>
                <div class="min-w-0">
                    <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">
                        {{ __('Webhooks / New') }}</div>
                    <div class="font-serif text-[20px] leading-tight truncate">{{ __('Add a') }} <span
                            class="italic text-wa-deep">{{ __('webhook') }}</span> endpoint</div>
                </div>
            </div>
            <div class="flex items-center gap-2 flex-wrap justify-end">
                <span
                    class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium bg-paper-50 text-ink-700 font-mono">{{ __('Draft / unsaved') }}</span>
                <button type="button"
                    class="px-3.5 py-1.5 border border-paper-200 rounded-full bg-paper-0 hover:bg-paper-50 text-[12px] font-medium inline-flex items-center gap-1.5">
                    <svg viewBox="0 0 16 16" class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="1.7">
                        <path d="M3 11h10M8 4v9M5 7l3-3 3 3" />
                    </svg>
                    Test fire
                </button>
                <button type="submit" form="webhookForm"
                    class="px-3.5 py-1.5 rounded-full bg-wa-deep hover:bg-wa-teal text-paper-0 text-[12px] font-semibold flex items-center gap-2">
                    <svg viewBox="0 0 16 16" class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M2 8l5 5 7-9" />
                    </svg>
                    Save webhook
                </button>
            </div>
        </div>
    </div>

    <section class="max-w-none mx-auto px-4 sm:px-6 lg:px-7 py-6">
        <form id="webhookForm" class="grid grid-cols-1 xl:grid-cols-[1fr_360px] gap-5 items-start">

            <div class="bg-white border border-paper-200 rounded-2xl shadow-card overflow-hidden">

                <!-- 01 Endpoint -->
                <div class="px-5 py-4 border-b border-paper-200">
                    <div class="flex items-center gap-2.5 mb-4">
                        <span
                            class="w-[23px] h-[23px] rounded-[7px] bg-paper-50 text-wa-deep inline-flex items-center justify-center text-[10px] font-semibold font-mono shrink-0">01</span>
                        <span
                            class="font-serif text-[18px] leading-none text-ink-900 flex-1">{{ __('Endpoint') }}</span>
                        <span class="font-mono text-[10px] text-ink-500">{{ __('required') }}</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-[1fr_140px] gap-3 mb-3">
                        <div>
                            <label class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block"
                                for="wh-url">{{ __('Webhook URL') }} <span class="text-accent-coral">*</span></label>
                            <input id="wh-url" type="url" placeholder="https://api.brand.example/wadesk/events"
                                class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] font-mono focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10"
                                required oninput="document.getElementById('rv-url').textContent=this.value||'—'">
                            <div class="text-[10.5px] text-ink-500 mt-1">
                                {{ __("Must be HTTPS. We'll POST a signed JSON payload to this URL.") }}</div>
                        </div>
                        <div>
                            <label
                                class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Method') }}</label>
                            <select
                                class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10">
                                <option>{{ __('POST') }}</option>
                                <option>{{ __('PUT') }}</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block"
                            for="wh-name">{{ __('Internal name') }} <span
                                class="text-[10.5px] font-normal text-ink-500">(optional)</span></label>
                        <input id="wh-name" type="text" placeholder="{{ __('Production CRM relay') }}"
                            class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10"
                            oninput="document.getElementById('rv-name').textContent=this.value||'—'">
                    </div>
                </div>

                <!-- 02 Events -->
                <div class="px-5 py-4 border-b border-paper-200">
                    <div class="flex items-center gap-2.5 mb-4">
                        <span
                            class="w-[23px] h-[23px] rounded-[7px] bg-paper-50 text-wa-deep inline-flex items-center justify-center text-[10px] font-semibold font-mono shrink-0">02</span>
                        <span
                            class="font-serif text-[18px] leading-none text-ink-900 flex-1">{{ __('Events to subscribe') }}</span>
                        <span class="font-mono text-[10px] text-ink-500">{{ __('at least one') }}</span>
                    </div>

                    <div class="flex items-center gap-2 mb-3">
                        <button type="button" id="ev-all"
                            class="px-3 py-1.5 border border-paper-200 rounded-full bg-paper-0 hover:bg-paper-50 text-[11.5px] font-medium">{{ __('Select all') }}</button>
                        <button type="button" id="ev-none"
                            class="px-3 py-1.5 border border-paper-200 rounded-full bg-paper-0 hover:bg-paper-50 text-[11.5px] font-medium">{{ __('Clear') }}</button>
                        <span class="ml-auto text-[10.5px] font-mono text-ink-500"><span id="ev-count">0</span>
                            selected</span>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2" id="event-list">
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="message.delivered">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition" fill="none"
                                    stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('message.delivered') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __("Fired once a message lands on the recipient's device.") }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="message.read">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition" fill="none"
                                    stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('message.read') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('Recipient opened the message — both ticks turned blue.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="message.received">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('message.received') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('Inbound message from a contact — text, media, location.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="message.failed">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('message.failed') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __("Send didn't reach WhatsApp — payload includes failure reason.") }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="contact.opt_in">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('contact.opt_in') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('A contact agreed to receive messages from your business.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="contact.opt_out">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('contact.opt_out') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('Contact replied STOP or blocked — stop messaging immediately.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="contact.updated">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('contact.updated') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('Profile changes — name, phone, custom fields.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="campaign.completed">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('campaign.completed') }}</div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('All recipients in a scheduled blast have been processed.') }}</div>
                            </div>
                        </label>
                        <label
                            class="flex items-start gap-3 px-3 py-2.5 border border-paper-200 rounded-lg hover:border-wa-deep cursor-pointer">
                            <input type="checkbox" class="ev peer sr-only" data-ev="template.status_changed">
                            <span
                                class="w-5 h-5 rounded border-[1.5px] border-paper-200 grid place-items-center peer-checked:bg-wa-deep peer-checked:border-wa-deep peer-checked:[&>svg]:opacity-100 transition shrink-0 mt-0.5"><svg
                                    viewBox="0 0 16 16" class="w-3 h-3 text-paper-0 opacity-0 transition"
                                    fill="none" stroke="currentColor" stroke-width="2.4">
                                    <path d="M3 8l3 3 7-8" />
                                </svg></span>
                            <div class="min-w-0">
                                <div class="font-mono text-[12px] text-ink-900">{{ __('template.status_changed') }}
                                </div>
                                <div class="text-[10.5px] text-ink-500">
                                    {{ __('A template was approved, rejected, or paused by Meta.') }}</div>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- 03 Security -->
                <div class="px-5 py-4 border-b border-paper-200">
                    <div class="flex items-center gap-2.5 mb-4">
                        <span
                            class="w-[23px] h-[23px] rounded-[7px] bg-paper-50 text-wa-deep inline-flex items-center justify-center text-[10px] font-semibold font-mono shrink-0">03</span>
                        <span
                            class="font-serif text-[18px] leading-none text-ink-900 flex-1">{{ __('Security') }}</span>
                        <span class="font-mono text-[10px] text-ink-500">{{ __('recommended') }}</span>
                    </div>
                    <label
                        class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Signing secret') }}</label>
                    <div class="flex gap-2">
                        <input id="wh-secret" type="text" readonly value="whsec_3a8f7e2c91b54d0fa7a1d6c8e4b9f2c0"
                            class="flex-1 px-3 py-2 border border-paper-200 rounded-lg bg-paper-50/40 text-[12.5px] font-mono text-ink-700 focus:outline-none">
                        <button type="button"
                            onclick="navigator.clipboard&&navigator.clipboard.writeText(document.getElementById('wh-secret').value)"
                            class="px-3 py-2 border border-paper-200 rounded-lg bg-paper-0 hover:bg-paper-50 text-[12px] font-medium">{{ __('Copy') }}</button>
                        <button type="button"
                            class="px-3 py-2 border border-paper-200 rounded-lg bg-paper-0 hover:bg-paper-50 text-[12px] font-medium">{{ __('Rotate') }}</button>
                    </div>
                    <div class="text-[10.5px] text-ink-500 mt-1.5">{{ __('Verify each request via') }} <span
                            class="font-mono">{{ __('X-WaDesk-Signature: t=...,v1=...') }}</span> using HMAC-SHA256.
                    </div>

                    <label
                        class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block mt-4">{{ __('Custom headers') }}
                        <span class="text-[10.5px] font-normal text-ink-500">(optional)</span></label>
                    <div id="hdr-list" class="space-y-2">
                        <div class="flex items-center gap-2">
                            <input type="text" placeholder="{{ __('X-API-Key') }}"
                                class="w-1/3 px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] font-mono focus:outline-none focus:border-wa-deep">
                            <input type="text" placeholder="{{ __('value') }}"
                                class="flex-1 px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] font-mono focus:outline-none focus:border-wa-deep">
                            <button type="button" onclick="this.parentElement.remove()"
                                class="w-9 h-9 rounded-lg hover:bg-accent-coral/15 text-accent-coral grid place-items-center"><svg
                                    viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                    stroke-width="1.7">
                                    <path d="M4 4l8 8M12 4l-8 8" />
                                </svg></button>
                        </div>
                    </div>
                    <button type="button" onclick="addHeader()"
                        class="mt-2 text-[12px] text-wa-deep font-semibold hover:underline inline-flex items-center gap-1"><svg
                            viewBox="0 0 16 16" class="w-3 h-3" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M8 3v10M3 8h10" />
                        </svg>{{ __('Add header') }}</button>
                </div>

                <!-- 04 Retry policy -->
                <div class="px-5 py-4 border-b border-paper-200">
                    <div class="flex items-center gap-2.5 mb-4">
                        <span
                            class="w-[23px] h-[23px] rounded-[7px] bg-paper-50 text-wa-deep inline-flex items-center justify-center text-[10px] font-semibold font-mono shrink-0">04</span>
                        <span
                            class="font-serif text-[18px] leading-none text-ink-900 flex-1">{{ __('Retry policy') }}</span>
                        <span class="font-mono text-[10px] text-ink-500">{{ __('defaults are sane') }}</span>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                            <label
                                class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Max attempts') }}</label>
                            <select
                                class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] focus:outline-none focus:border-wa-deep">
                                <option>3 (default)</option>
                                <option>5</option>
                                <option>8</option>
                                <option>{{ __('None — fire once') }}</option>
                            </select>
                        </div>
                        <div>
                            <label
                                class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Backoff') }}</label>
                            <select
                                class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] focus:outline-none focus:border-wa-deep">
                                <option>{{ __('Exponential (default)') }}</option>
                                <option>{{ __('Linear') }}</option>
                                <option>{{ __('Fixed 30 s') }}</option>
                            </select>
                        </div>
                        <div>
                            <label
                                class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Timeout') }}</label>
                            <div class="flex items-center gap-2">
                                <input type="number" min="1" value="10"
                                    class="w-full px-3 py-2 border border-paper-200 rounded-lg bg-white text-[12.5px] focus:outline-none focus:border-wa-deep">
                                <span class="text-[11px] font-mono text-ink-500">{{ __('sec') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="text-[10.5px] text-ink-500 mt-2">
                        {{ __('We mark a delivery successful on any 2xx response. 4xx and 5xx will be retried per the policy above.') }}
                    </div>
                </div>

                <!-- 05 Status -->
                <div class="px-5 py-4">
                    <div class="flex items-center gap-2.5 mb-3">
                        <span
                            class="w-[23px] h-[23px] rounded-[7px] bg-paper-50 text-wa-deep inline-flex items-center justify-center text-[10px] font-semibold font-mono shrink-0">05</span>
                        <span
                            class="font-serif text-[18px] leading-none text-ink-900 flex-1">{{ __('Status') }}</span>
                    </div>
                    <div
                        class="flex items-center justify-between bg-paper-50/60 border border-paper-200 rounded-lg p-3">
                        <div>
                            <div class="text-[13px] font-semibold">{{ __('Activate immediately') }}</div>
                            <div class="text-[11px] text-ink-500">
                                {{ __('Endpoint will start receiving the events you selected as soon as you save.') }}
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked>
                            <span
                                class="w-10 h-[22px] rounded-full bg-paper-200 peer-checked:bg-wa-deep transition-colors"></span>
                            <span
                                class="absolute top-0.5 left-0.5 w-[18px] h-[18px] rounded-full bg-paper-0 shadow transition-transform peer-checked:translate-x-[18px]"></span>
                        </label>
                    </div>
                </div>

            </div>

            <!-- Right rail: payload preview + summary -->
            <aside class="space-y-4 xl:sticky xl:top-[78px] xl:self-start">
                <div class="bg-white border border-paper-200 rounded-2xl shadow-card overflow-hidden">
                    <div class="px-4 py-3 border-b border-paper-200 flex items-center justify-between">
                        <span
                            class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">{{ __('Sample payload') }}</span>
                        <span class="font-mono text-[10px] text-wa-deep"
                            id="rv-event">{{ __('message.delivered') }}</span>
                    </div>
                    <pre
                        class="p-4 text-[11px] font-mono leading-snug text-ink-700 bg-paper-50/40 max-h-[360px] overflow-auto whitespace-pre-wrap">{
 "id": "evt_01HRJX2Y9C3T8",
 "type": "message.delivered",
 "created": 1714122488,
 "data": {
 "message_id": "wamid.HBgL...8c4321",
 "to": "+919876543210",
 "device": "+919876500000",
 "delivered_at": "2026-04-26T18:32:08Z",
 "template": "spring_promo_v3",
 "campaign": "Spring promo / VIP"
 }
}</pre>
                    <div
                        class="px-4 py-3 border-t border-paper-200 bg-paper-50/40 flex items-center justify-between text-[11px]">
                        <span class="font-mono text-ink-500">{{ __('Content-Type: application/json') }}</span>
                        <button type="button"
                            class="text-wa-deep font-semibold hover:underline">{{ __('Copy') }}</button>
                    </div>
                </div>

                <div class="bg-paper-0 border border-paper-200 rounded-2xl p-4 shadow-card">
                    <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500 mb-3">
                        {{ __('Summary') }}</div>
                    <dl class="space-y-2 text-[12px]">
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('Name') }}</dt>
                            <dd class="font-mono text-ink-900 truncate ml-2" id="rv-name">—</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('URL') }}</dt>
                            <dd class="font-mono text-ink-900 truncate ml-2" id="rv-url">—</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('Events') }}</dt>
                            <dd class="font-mono text-ink-900" id="rv-events">0</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('Method') }}</dt>
                            <dd class="font-mono text-ink-900">{{ __('POST') }}</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('Retries') }}</dt>
                            <dd class="font-mono text-ink-900">3 · exponential</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="text-ink-500">{{ __('Timeout') }}</dt>
                            <dd class="font-mono text-ink-900">10 s</dd>
                        </div>
                    </dl>
                </div>

                <div class="bg-wa-deep rounded-2xl p-4 shadow-soft text-paper-0">
                    <div class="font-serif text-[18px] leading-tight">{{ __('Verify the signature') }}</div>
                    <p class="mt-2 text-[12px] text-paper-0/80 leading-relaxed">{{ __('Every request includes') }}
                        <span class="font-mono">{{ __('X-WaDesk-Signature') }}</span>. Compute HMAC-SHA256 with your
                        secret over the raw body — discard requests that don't match.</p>
                </div>
            </aside>

        </form>
    </section>

</x-layouts.user>
