<div class="max-w-3xl">
    <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 bg-blue/10 text-blue font-medium">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 text-t2 hover:text-t1 hover:bg-s2">Webhooks</a>
        </nav>
    </div>

    @if(session('status'))
    <div class="mb-4 p-3 rounded-lg bg-green/10 border border-green/20 text-sm text-green">{{ session('status') }}</div>
    @endif

    {{-- Workspace Info --}}
    <div class="bg-s1 border border-white/[.06] rounded-xl p-6 mb-4">
        <h3 class="text-sm font-medium text-t1 mb-5">Workspace Settings</h3>
        <div class="space-y-4 max-w-sm">
            <div>
                <label class="block text-xs font-medium text-t2 mb-1.5">Workspace Name</label>
                <input wire:model="workspaceName" type="text"
                    class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 focus:outline-none focus:ring-1 focus:ring-blue/50">
                @error('workspaceName') <p class="mt-1 text-xs text-red">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-xs font-medium text-t2 mb-1.5">Workspace Slug</label>
                <div class="flex items-center bg-s2 border border-white/[.06] rounded-lg overflow-hidden">
                    <span class="px-3 py-2.5 text-sm text-t3 border-r border-white/[.06]">nimu.li/~</span>
                    <input wire:model="workspaceSlug" type="text"
                        class="flex-1 px-3 py-2.5 bg-transparent text-sm text-t1 font-mono focus:outline-none">
                </div>
            </div>
            <button wire:click="saveWorkspace"
                class="px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90">
                Save Changes
            </button>
        </div>
    </div>

    {{-- Danger Zone --}}
    <div class="bg-s1 border border-red/20 rounded-xl p-6">
        <h3 class="text-sm font-medium text-red mb-2">Danger Zone</h3>
        <p class="text-sm text-t2 mb-4">Permanently delete this workspace and all its data. This action cannot be undone.</p>
        <button class="px-4 py-2 bg-red/10 text-red text-sm font-medium rounded-lg hover:bg-red/20 border border-red/20">
            Delete Workspace
        </button>
    </div>
</div>
