{{--
    Stores\Show — real settings page (Phase 3).

    Tabbed layout, URL-bound active tab. Per-section save buttons.
    Agents can view every tab; save controls render only for
    owner/admin (the server-side `Gate::authorize('manageStores')`
    is the authoritative line of defence).

    Settings-missing branch: if `$store->settings` is null (should
    never happen — Phase 1 invariant), render a defensive error
    panel and skip all forms. No create-on-read.
--}}
<section class="flex h-full w-full flex-1 flex-col gap-6" data-test="store-show">
    @php $store = $this->store; @endphp

    {{-- Back link --}}
    <div class="shrink-0">
        <flux:link :href="route('stores.index')" wire:navigate class="text-sm text-zinc-500 dark:text-zinc-400" data-test="store-back">
            ← {{ __('Back to stores') }}
        </flux:link>
    </div>

    @if ($store === null)
        <div class="rounded-xl border border-dashed border-amber-300 bg-amber-50 p-8 text-center text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200">
            {{ __('Store not available in this workspace.') }}
        </div>
    @else
        {{-- Header --}}
        <div class="flex flex-col gap-2">
            <div class="flex flex-wrap items-center gap-2">
                <flux:heading size="xl" level="1" data-test="store-show-name">{{ $store->name }}</flux:heading>
                <flux:badge
                    size="sm"
                    :color="$store->status === \App\Models\Store::STATUS_ACTIVE ? 'lime' : 'zinc'"
                    data-test="store-show-status"
                >
                    {{ $store->status }}
                </flux:badge>
            </div>
            <div class="text-xs text-zinc-500 dark:text-zinc-400">
                <span class="font-mono" data-test="store-show-slug">{{ $store->slug }}</span>
            </div>
        </div>

        {{-- Settings-missing defensive branch (Phase 1 invariant says
             this never triggers, but if it ever does we don't want
             to render forms backed by `null`). --}}
        @if ($store->settings === null)
            <div
                class="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                data-test="store-show-settings-missing"
            >
                <div class="font-medium">{{ __('Store settings record is missing') }}</div>
                <div class="mt-1 text-xs">
                    {{ __('This store has no associated store_settings row. Save actions are disabled until an operator repairs it. Contact engineering — every store should have settings created automatically.') }}
                </div>
            </div>
        @else
            {{-- Tab bar --}}
            @php
                $tabs = [
                    'general'         => __('General'),
                    'sla'             => __('SLA & support'),
                    'self-service'    => __('Customer self-service'),
                    'links'           => __('Links'),
                    'integrations'    => __('Integrations'),
                    'email-addresses' => __('Email addresses'),
                ];
                $tabBase = 'px-3 py-2 text-sm font-medium border-b-2 -mb-px transition';
                $tabActive = 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100';
                $tabIdle = 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200';
            @endphp

            <div
                class="flex flex-wrap items-center gap-1 border-b border-zinc-200 dark:border-zinc-800"
                data-test="store-show-tabs"
            >
                @foreach ($tabs as $tabKey => $tabLabel)
                    <button
                        type="button"
                        wire:click="setActiveTab('{{ $tabKey }}')"
                        class="{{ $tabBase }} {{ $activeTab === $tabKey ? $tabActive : $tabIdle }}"
                        data-test="store-show-tab"
                        data-tab="{{ $tabKey }}"
                        data-active="{{ $activeTab === $tabKey ? 'true' : 'false' }}"
                    >
                        {{ $tabLabel }}
                    </button>
                @endforeach
            </div>

            {{-- ============ GENERAL ============ --}}
            @if ($activeTab === 'general')
                <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900" data-test="store-show-tab-general">
                    <flux:heading size="sm" level="2">{{ __('General') }}</flux:heading>
                    <flux:subheading class="text-xs">
                        {{ __('Public-facing store identity. The slug appears in URLs and routing rules.') }}
                    </flux:subheading>

                    <form
                        wire:submit="saveGeneral"
                        class="mt-5 flex flex-col gap-4"
                        data-test="store-show-general-form"
                    >
                        <flux:input
                            wire:model="name"
                            :label="__('Name')"
                            type="text"
                            required
                            autocomplete="off"
                            data-test="store-general-name-input"
                            :disabled="! $this->canManage"
                        />

                        <flux:input
                            wire:model="slug"
                            :label="__('Slug')"
                            type="text"
                            required
                            autocomplete="off"
                            :description="__('Lowercase letters, numbers and single hyphens only. Must be unique within this account.')"
                            data-test="store-general-slug-input"
                            :disabled="! $this->canManage"
                        />

                        @if ($this->canManage)
                            <div>
                                <flux:button variant="primary" type="submit" data-test="store-general-save">
                                    {{ __('Save general') }}
                                </flux:button>
                            </div>
                        @endif
                    </form>
                </div>
            @endif

            {{-- ============ SLA ============ --}}
            @if ($activeTab === 'sla')
                <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900" data-test="store-show-tab-sla">
                    <flux:heading size="sm" level="2">{{ __('SLA & support') }}</flux:heading>
                    <flux:subheading class="text-xs">
                        {{ __('Numeric SLA in working days. Used by future SLA-breach detection and WISMO automation.') }}
                    </flux:subheading>

                    <form
                        wire:submit="saveSla"
                        class="mt-5 flex flex-col gap-4"
                        data-test="store-show-sla-form"
                    >
                        <flux:input
                            wire:model="dispatchSlaWorkingDays"
                            :label="__('Dispatch SLA (working days)')"
                            type="number"
                            min="0"
                            max="365"
                            required
                            :description="__('Orders are expected to dispatch within X working day(s).')"
                            data-test="store-sla-days-input"
                            :disabled="! $this->canManage"
                        />

                        @if ($this->canManage)
                            <div>
                                <flux:button variant="primary" type="submit" data-test="store-sla-save">
                                    {{ __('Save SLA') }}
                                </flux:button>
                            </div>
                        @endif
                    </form>
                </div>
            @endif

            {{-- ============ SELF-SERVICE ============ --}}
            @if ($activeTab === 'self-service')
                <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900" data-test="store-show-tab-self-service">
                    <flux:heading size="sm" level="2">{{ __('Customer self-service') }}</flux:heading>
                    <flux:subheading class="text-xs">
                        {{ __('Decide how customers cancel orders or edit delivery addresses. ClearDesk-mode requires configured Shopify + Helm integrations.') }}
                    </flux:subheading>

                    <form
                        wire:submit="saveSelfService"
                        class="mt-5 flex flex-col gap-6"
                        data-test="store-show-self-service-form"
                    >
                        {{-- Cancel order --}}
                        <div class="flex flex-col gap-2">
                            <flux:select
                                wire:model.live="cancelOrderMode"
                                :label="__('Cancel order')"
                                data-test="store-cancel-mode-select"
                                :disabled="! $this->canManage"
                            >
                                <flux:select.option value="{{ \App\Enums\CancelOrderMode::Disabled->value }}">{{ __('Disabled') }}</flux:select.option>
                                <flux:select.option value="{{ \App\Enums\CancelOrderMode::External->value }}">{{ __('External') }}</flux:select.option>
                                <flux:select.option value="{{ \App\Enums\CancelOrderMode::ClearDesk->value }}">{{ __('ClearDesk') }}</flux:select.option>
                            </flux:select>

                            @if ($cancelOrderMode === \App\Enums\CancelOrderMode::External->value)
                                <flux:input
                                    wire:model="cancelOrderExternalUrl"
                                    :label="__('External cancel URL')"
                                    type="url"
                                    required
                                    autocomplete="off"
                                    :description="__('Where customers go to cancel orders. Must be a full URL.')"
                                    data-test="store-cancel-url-input"
                                    :disabled="! $this->canManage"
                                />
                            @endif
                        </div>

                        {{-- Edit address --}}
                        <div class="flex flex-col gap-2">
                            <flux:select
                                wire:model.live="editAddressMode"
                                :label="__('Edit delivery address')"
                                data-test="store-edit-mode-select"
                                :disabled="! $this->canManage"
                            >
                                <flux:select.option value="{{ \App\Enums\EditAddressMode::Disabled->value }}">{{ __('Disabled') }}</flux:select.option>
                                <flux:select.option value="{{ \App\Enums\EditAddressMode::External->value }}">{{ __('External') }}</flux:select.option>
                                <flux:select.option value="{{ \App\Enums\EditAddressMode::ClearDesk->value }}">{{ __('ClearDesk') }}</flux:select.option>
                            </flux:select>

                            @if ($editAddressMode === \App\Enums\EditAddressMode::External->value)
                                <flux:input
                                    wire:model="editAddressExternalUrl"
                                    :label="__('External edit-address URL')"
                                    type="url"
                                    required
                                    autocomplete="off"
                                    :description="__('Where customers go to edit delivery addresses. Must be a full URL.')"
                                    data-test="store-edit-url-input"
                                    :disabled="! $this->canManage"
                                />
                            @endif
                        </div>

                        @if (
                            $cancelOrderMode === \App\Enums\CancelOrderMode::ClearDesk->value
                            || $editAddressMode === \App\Enums\EditAddressMode::ClearDesk->value
                        )
                            <div
                                class="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                                data-test="store-self-service-cleardesk-hint"
                            >
                                <flux:icon.information-circle class="mt-0.5 size-3.5 shrink-0" />
                                <span>
                                    {{ __('ClearDesk mode runs the action through Helm and Shopify. It will refuse to save unless both integrations are configured.') }}
                                </span>
                            </div>
                        @endif

                        @if ($this->canManage)
                            <div>
                                <flux:button variant="primary" type="submit" data-test="store-self-service-save">
                                    {{ __('Save self-service') }}
                                </flux:button>
                            </div>
                        @endif
                    </form>
                </div>
            @endif

            {{-- ============ LINKS ============ --}}
            @if ($activeTab === 'links')
                @php
                    $tenantAccount = app(\App\Support\CurrentAccount::class)->get();
                    $supportLink = $tenantAccount !== null
                        ? url('/self-help/'.$tenantAccount->slug.'/'.$store->slug)
                        : null;
                @endphp

                <div
                    class="flex flex-col gap-5"
                    data-test="store-show-tab-links"
                >
                    {{-- ============ CUSTOMER SUPPORT LINK ============
                         Canonical public URL for this store. The
                         operator drops this into order-confirmation
                         emails / dispatch emails / order page CTAs —
                         it's the ONLY way a customer reaches their
                         self-help portal. --}}
                    <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                        <flux:heading size="sm" level="2">{{ __('Customer support link') }}</flux:heading>
                        <flux:subheading class="text-xs">
                            {{ __('Drop this into your order confirmation + dispatch emails. It\'s the only URL customers should use to open self-help — there is no public store picker.') }}
                        </flux:subheading>

                        @if ($supportLink !== null)
                            {{-- Plain HTML button with Alpine on a
                                 wrapping div so x-on attributes bind
                                 reliably (a Flux button can wrap
                                 the click handler in a way that
                                 prevents x-on from firing). Two
                                 inline spans toggle for a brief
                                 "Copied!" confirmation. --}}
                            <div
                                x-data="{
                                    copied: false,
                                    async copy() {
                                        try {
                                            await navigator.clipboard.writeText(@js($supportLink));
                                        } catch (e) {
                                            // Fallback for older browsers /
                                            // non-secure contexts: temp textarea + execCommand.
                                            const el = document.createElement('textarea');
                                            el.value = @js($supportLink);
                                            el.setAttribute('readonly', '');
                                            el.style.position = 'absolute';
                                            el.style.left = '-9999px';
                                            document.body.appendChild(el);
                                            el.select();
                                            document.execCommand('copy');
                                            document.body.removeChild(el);
                                        }
                                        this.copied = true;
                                        setTimeout(() => { this.copied = false; }, 2000);
                                    },
                                }"
                                class="mt-3 flex flex-wrap items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950"
                                data-test="store-support-link-row"
                            >
                                <code
                                    class="break-all text-xs text-zinc-800 dark:text-zinc-200"
                                    data-test="store-support-link-url"
                                >{{ $supportLink }}</code>
                                <button
                                    type="button"
                                    x-on:click="copy()"
                                    class="inline-flex items-center gap-1 rounded-md border border-zinc-300 bg-white px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                    data-test="store-support-link-copy"
                                >
                                    <span x-show="!copied">{{ __('Copy') }}</span>
                                    <span x-show="copied" x-cloak class="text-emerald-700 dark:text-emerald-400">{{ __('Copied') }}</span>
                                </button>
                            </div>
                        @endif
                    </div>

                    {{-- ============ EXTERNAL CUSTOMER-FACING LINKS ============ --}}
                    <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                        <flux:heading size="sm" level="2">{{ __('External help links') }}</flux:heading>
                        <flux:subheading class="text-xs">
                            {{ __('Optional. URLs that point to your existing returns portal / FAQ on other systems.') }}
                        </flux:subheading>

                        <form
                            wire:submit="saveLinks"
                            class="mt-5 flex flex-col gap-4"
                            data-test="store-show-links-form"
                        >
                            <flux:input
                                wire:model="returnsPortalUrl"
                                :label="__('Returns portal URL')"
                                type="url"
                                autocomplete="off"
                                :description="__('Optional. Where customers go to start a return.')"
                                data-test="store-links-returns-input"
                                :disabled="! $this->canManage"
                            />

                            <flux:input
                                wire:model="faqUrl"
                                :label="__('FAQ URL')"
                                type="url"
                                autocomplete="off"
                                :description="__('Optional. The store\'s FAQ / help centre.')"
                                data-test="store-links-faq-input"
                                :disabled="! $this->canManage"
                            />

                            @if ($this->canManage)
                                <div>
                                    <flux:button variant="primary" type="submit" data-test="store-links-save">
                                        {{ __('Save links') }}
                                    </flux:button>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>
            @endif

            {{-- ============ INTEGRATIONS (display-only) ============ --}}
            @if ($activeTab === 'integrations')
                @php $summary = $this->integrationsSummary; @endphp

                <div class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900" data-test="store-show-tab-integrations">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div>
                            <flux:heading size="sm" level="2">{{ __('Integrations') }}</flux:heading>
                            <flux:subheading class="text-xs">
                                {{ __('Display only. CRUD lands in a later iteration.') }}
                            </flux:subheading>
                        </div>

                        {{-- "Manage integrations" is the future
                             `/integrations` page. Render disabled
                             until that route exists. --}}
                        <flux:button
                            variant="ghost"
                            size="sm"
                            disabled
                            data-test="store-integrations-manage"
                        >
                            {{ __('Manage integrations (coming soon)') }}
                        </flux:button>
                    </div>

                    @php
                        $statusColor = fn (string $s): string => match ($s) {
                            'configured' => 'lime',
                            'error'      => 'red',
                            'disabled'   => 'amber',
                            default      => 'zinc',
                        };
                        $statusLabel = fn (string $s): string => match ($s) {
                            'configured' => __('Configured'),
                            'error'      => __('Error'),
                            'disabled'   => __('Disabled'),
                            default      => __('Missing'),
                        };
                    @endphp

                    <div class="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800" data-test="store-int-shopify-account-row">
                            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                {{ __('Shopify · account-level') }}
                            </div>
                            <div class="mt-2">
                                <flux:badge
                                    size="sm"
                                    :color="$statusColor($summary['shopify_account'])"
                                    data-test="store-int-shopify-account-status"
                                    data-status="{{ $summary['shopify_account'] }}"
                                >
                                    {{ $statusLabel($summary['shopify_account']) }}
                                </flux:badge>
                            </div>
                        </div>

                        <div class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800" data-test="store-int-shopify-store-row">
                            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                {{ __('Shopify · this store') }}
                            </div>
                            <div class="mt-2">
                                <flux:badge
                                    size="sm"
                                    :color="$statusColor($summary['shopify_store'])"
                                    data-test="store-int-shopify-store-status"
                                    data-status="{{ $summary['shopify_store'] }}"
                                >
                                    {{ $statusLabel($summary['shopify_store']) }}
                                </flux:badge>
                            </div>
                        </div>

                        <div class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800" data-test="store-int-helm-account-row">
                            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                {{ __('Helm · account-level') }}
                            </div>
                            <div class="mt-2">
                                <flux:badge
                                    size="sm"
                                    :color="$statusColor($summary['helm_account'])"
                                    data-test="store-int-helm-account-status"
                                    data-status="{{ $summary['helm_account'] }}"
                                >
                                    {{ $statusLabel($summary['helm_account']) }}
                                </flux:badge>
                            </div>
                        </div>

                        <div class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800" data-test="store-int-helm-store-row">
                            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                {{ __('Helm · this store') }}
                            </div>
                            <div class="mt-2">
                                <flux:badge
                                    size="sm"
                                    :color="$statusColor($summary['helm_store'])"
                                    data-test="store-int-helm-store-status"
                                    data-status="{{ $summary['helm_store'] }}"
                                >
                                    {{ $statusLabel($summary['helm_store']) }}
                                </flux:badge>
                            </div>
                        </div>

                        <div class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800 md:col-span-2" data-test="store-int-custom-row">
                            <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                {{ __('Custom integrations') }}
                            </div>
                            <div class="mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-100" data-test="store-int-custom-count">
                                {{ trans_choice('{0} None|{1} :n enabled custom integration|[2,*] :n enabled custom integrations', $summary['custom_count'], ['n' => $summary['custom_count']]) }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- ============ EMAIL ADDRESSES (read-only) ============ --}}
            @if ($activeTab === 'email-addresses')
                <div
                    class="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900"
                    data-test="store-show-tab-email-addresses"
                >
                    <div class="flex flex-wrap items-start justify-between gap-2">
                        <div>
                            <flux:heading size="sm" level="2">{{ __('Email addresses') }}</flux:heading>
                            <flux:subheading class="mt-1">
                                {{ __('Addresses linked to this store. Set a default sender or unlink an address here, or open Channels for full management.') }}
                            </flux:subheading>
                        </div>
                        <flux:button
                            :href="route('channels.email')"
                            wire:navigate
                            size="sm"
                            variant="ghost"
                            icon="arrow-top-right-on-square"
                            data-test="store-email-tab-manage-link"
                        >
                            {{ __('Manage in Channels') }}
                        </flux:button>
                    </div>

                    {{-- Current default sender callout. Renders only
                         when a pointer is set; otherwise the empty-
                         state below covers it. --}}
                    @php $defaultRow = $this->defaultEmailAddressRow; @endphp
                    @if ($defaultRow !== null)
                        <div
                            class="mt-4 rounded-lg border border-sky-200 bg-sky-50 p-4 dark:border-sky-900/60 dark:bg-sky-950/30"
                            data-test="store-email-current-default"
                            data-address-id="{{ $defaultRow['id'] }}"
                        >
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div class="flex flex-col gap-0.5">
                                    <div class="text-xs uppercase tracking-wide text-sky-700 dark:text-sky-300">
                                        {{ __('Current default sender') }}
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="font-mono text-sm text-zinc-900 dark:text-zinc-100">
                                            {{ $defaultRow['address'] }}
                                        </span>
                                        <flux:badge
                                            size="sm"
                                            color="{{ $defaultRow['status_key'] === 'ready' ? 'lime' : ($defaultRow['status_key'] === 'disabled' ? 'zinc' : 'amber') }}"
                                            data-test="store-email-current-default-status"
                                            data-status-key="{{ $defaultRow['status_key'] }}"
                                        >
                                            {{ __($defaultRow['status_label']) }}
                                        </flux:badge>
                                    </div>
                                </div>
                                @if ($this->canManage)
                                    <flux:button
                                        wire:click="clearStoreDefaultSender"
                                        size="sm"
                                        variant="ghost"
                                        data-test="store-email-clear-default"
                                    >
                                        {{ __('Clear') }}
                                    </flux:button>
                                @endif
                            </div>
                        </div>
                    @endif

                    @php $linked = $this->linkedEmailAddresses; @endphp

                    @if ($linked->isEmpty())
                        <div
                            class="mt-4 rounded-lg border border-dashed border-zinc-300 bg-zinc-50 p-6 text-center dark:border-zinc-700 dark:bg-zinc-900/60"
                            data-test="store-email-addresses-empty"
                        >
                            <div class="mx-auto flex max-w-md flex-col items-center gap-2">
                                <flux:icon.envelope class="size-6 text-zinc-400" />
                                <div class="text-sm font-medium text-zinc-700 dark:text-zinc-300">
                                    {{ __('No email addresses linked yet') }}
                                </div>
                                <p class="text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ __('Inbound email won\'t route to this store and outbound replies will use the platform default sender. Add an address in Channels to wire this store up.') }}
                                </p>
                            </div>
                        </div>
                    @else
                        <ul class="mt-4 flex flex-col gap-2" data-test="store-email-addresses-list">
                            @foreach ($linked as $row)
                                <li
                                    class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"
                                    data-test="store-email-address-row"
                                    data-address-id="{{ $row['id'] }}"
                                    data-status-key="{{ $row['status_key'] }}"
                                >
                                    <div class="flex min-w-0 flex-1 flex-col gap-0.5">
                                        <div class="flex flex-wrap items-center gap-1.5">
                                            <span class="font-mono text-sm text-zinc-900 dark:text-zinc-100" data-test="store-email-address-value">
                                                {{ $row['address'] }}
                                            </span>
                                            <flux:badge
                                                size="sm"
                                                color="{{ $row['status_key'] === 'ready' ? 'lime' : ($row['status_key'] === 'disabled' ? 'zinc' : 'amber') }}"
                                                data-test="store-email-address-status"
                                                data-status-key="{{ $row['status_key'] }}"
                                            >
                                                {{ __($row['status_label']) }}
                                            </flux:badge>
                                            @if ($row['is_store_default'])
                                                <flux:badge size="sm" color="sky" data-test="store-email-address-default">
                                                    {{ __('Default sender') }}
                                                </flux:badge>
                                            @endif
                                        </div>
                                        @if ($row['display_name'])
                                            <span class="text-xs text-zinc-500 dark:text-zinc-400" data-test="store-email-address-display-name">
                                                {{ $row['display_name'] }}
                                            </span>
                                        @endif
                                    </div>

                                    @if ($this->canManage)
                                        <div class="flex flex-wrap items-center gap-1.5">
                                            @if (! $row['is_store_default'])
                                                @if ($row['is_ready'])
                                                    <flux:button
                                                        wire:click="setStoreDefaultSender({{ $row['id'] }})"
                                                        size="sm"
                                                        variant="ghost"
                                                        data-test="store-email-set-default"
                                                    >
                                                        {{ __('Set default') }}
                                                    </flux:button>
                                                @else
                                                    <span
                                                        class="text-xs text-zinc-400 dark:text-zinc-500"
                                                        title="{{ __('Mark this address as ready in Channels before setting it as default.') }}"
                                                        data-test="store-email-set-default-disabled"
                                                    >
                                                        {{ __('Set default') }}
                                                    </span>
                                                @endif
                                            @endif
                                            @if ($row['enabled'])
                                                <flux:button
                                                    wire:click="disableAddressFromStore({{ $row['id'] }})"
                                                    size="sm"
                                                    variant="ghost"
                                                    data-test="store-email-disable"
                                                >
                                                    {{ __('Disable') }}
                                                </flux:button>
                                            @endif
                                            <flux:button
                                                wire:click="unlinkAddressFromStore({{ $row['id'] }})"
                                                size="sm"
                                                variant="ghost"
                                                data-test="store-email-unlink"
                                            >
                                                {{ __('Unlink') }}
                                            </flux:button>
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    <p class="mt-4 text-xs text-zinc-500 dark:text-zinc-400">
                        {{ __('Outbound replies from this store use the configured default sender. If none is set or the default isn\'t ready, replies fall back to the platform default.') }}
                    </p>
                </div>
            @endif
        @endif
    @endif
</section>