{{-- All tenant resolution happens inside
     \App\Livewire\Settings\Account::resolveCurrentAccount() so the
     component is safe across initial load AND Livewire update
     requests (the latter do not run the `tenant` middleware). --}}
<section class="w-full">
    @include('partials.settings-heading')

    <flux:heading class="sr-only">{{ __('Account settings') }}</flux:heading>

    <x-settings.layout :heading="__('Account')" :subheading="__('Update your workspace name and URL slug.')">
        <form wire:submit="update" class="my-6 w-full space-y-6">
            <flux:input
                wire:model.live.debounce.400ms="name"
                :label="__('Company name')"
                type="text"
                required
                autofocus
                autocomplete="organization"
                data-test="account-name-input"
            />

            <div>
                <flux:input
                    wire:model.live.debounce.400ms="slug"
                    :label="__('Slug')"
                    type="text"
                    required
                    autocomplete="off"
                    :description="__('Lowercase letters, numbers and hyphens. This becomes your future workspace URL.')"
                    data-test="account-slug-input"
                />

                {{-- Workspace URL preview. Static text — no subdomain
                     routing is in place yet, this is purely a preview
                     of what the slug will eventually power. --}}
                <div class="mt-2 flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400" data-test="workspace-url-preview">
                    <flux:icon.globe-alt class="size-3.5" />
                    <span>{{ __('Future workspace URL') }}:</span>
                    <span class="font-mono">{{ $this->workspaceUrlPreview }}</span>
                </div>

                <flux:text size="sm" class="mt-2">
                    <flux:link wire:click.prevent="regenerateSlug" class="cursor-pointer">
                        {{ __('Re-suggest slug from name') }}
                    </flux:link>
                </flux:text>
            </div>

            <div class="rounded-md border border-zinc-200 bg-zinc-50 p-3 text-xs text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
                <div class="font-semibold text-zinc-700 dark:text-zinc-300">{{ __('Reserved slugs') }}</div>
                <div class="mt-1">
                    {{ __('The following slugs are reserved and cannot be used') }}:
                    <span class="font-mono">{{ implode(', ', \App\Support\AccountSlug::RESERVED) }}</span>
                </div>
            </div>

            <div class="flex items-center gap-4">
                <flux:button variant="primary" type="submit" data-test="account-save">{{ __('Save') }}</flux:button>
            </div>
        </form>
    </x-settings.layout>
</section>