<div class="max-w-3xl">
    @php $ws = current_workspace(); @endphp
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-t1">Settings</h1>
        <nav class="flex gap-1 mt-4">
            <a href="{{ route('w.settings.index', request()->route('workspace')) }}"
               class="px-3 py-1.5 text-sm rounded-lg text-t2 hover:text-t1 hover:bg-s2">Workspace</a>
            <a href="{{ route('w.settings.api-tokens', request()->route('workspace')) }}"
               class="px-3 py-1.5 text-sm rounded-lg text-t2 hover:text-t1 hover:bg-s2">API Tokens</a>
            <a href="{{ route('w.settings.webhooks', request()->route('workspace')) }}"
               class="px-3 py-1.5 text-sm rounded-lg bg-blue/10 text-blue font-medium">Webhooks</a>
        </nav>
    </div>

    <div class="flex items-center justify-between mb-4">
        <p class="text-sm text-t2">Receive HTTP POST notifications for workspace events</p>
        @if($ws)
        <button
            @click="$dispatch('openModal', {component: 'modals.create-webhook', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
            class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
            + Add Webhook
        </button>
        @endif
    </div>

    <div class="bg-s1 border border-white/[.06] rounded-xl p-12 text-center">
        <div class="w-14 h-14 bg-s2 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/>
            </svg>
        </div>
        <h3 class="text-base font-medium text-t1 mb-2">No webhooks configured</h3>
        <p class="text-sm text-t2">Add a webhook URL to receive real-time events.</p>
    </div>
</div>
