{{-- Результат проверки ключа кабинета маркетплейса и выбор складов для наличия.
     Живёт внутри x-data="marketplaceConnect(…)".

     Какие склады считать наличием, решает продавец. Ничего не отмечено по
     умолчанию: товар на складе маркетплейса покупателю teeu не отгрузить, и
     угадывать за продавца, откуда он отправит заказ, мы не будем.

     $accountName — подпись кабинета, если площадка не назвала магазин;
     $warehouseHint — что считать наличием у этой площадки. --}}
@php($lbl = 'mb-1.5 block text-sm font-semibold text-[var(--color-ink)]')

<template x-if="account">
    <div class="rounded-[var(--radius-md)] border border-[var(--color-line)] p-4 text-sm">
        <div class="font-bold text-[var(--color-success)]">✓ <span x-text="account.company || @js($accountName)"></span></div>
        <div class="mt-1 text-xs text-[var(--color-slate)]" x-show="account.products_total !== null || account.expires_at">
            <span x-show="account.products_total !== null">Товаров в кабинете: <b x-text="(account.products_total || 0).toLocaleString('ru-RU')"></b></span>
            <span x-show="account.products_total !== null && account.expires_at"> · </span>
            <span x-show="account.expires_at">доступ действует до <b x-text="account.expires_at"></b></span>
        </div>
        <template x-for="note in (account.notes || [])" :key="note">
            <p class="mt-2 rounded-[var(--radius-sm)] bg-[#FFF7E6] px-3 py-2 text-xs text-[#9A6700]" x-text="note"></p>
        </template>
    </div>
</template>

<div x-show="warehouses.length" x-cloak class="border-t border-[var(--color-line)] pt-4">
    <span class="{{ $lbl }}">Какие склады считать наличием</span>
    <p class="text-xs text-[var(--color-muted)]">{{ $warehouseHint }}</p>

    <div class="mt-3 space-y-2">
        <template x-for="w in warehouses" :key="w.key">
            <label class="flex items-start gap-2.5 rounded-[var(--radius-md)] border border-[var(--color-line)] p-3">
                <input type="checkbox" name="stock_warehouses[]" :value="w.key" x-model="selected"
                       class="mt-0.5 h-4 w-4 shrink-0 rounded border-[#E1E4EA]">
                <span class="min-w-0 text-sm text-[var(--color-ink)]">
                    <span class="font-semibold" x-text="w.name"></span>
                    <span class="ml-1 rounded-full bg-[#F2F4F7] px-2 py-0.5 text-[11px] font-bold text-[var(--color-slate)]" x-text="w.kind"></span>
                    <span x-show="! w.active" class="ml-1 text-xs text-[var(--color-muted)]">не активен</span>
                    <span x-show="w.address" class="mt-0.5 block text-xs text-[var(--color-muted)]" x-text="w.address"></span>
                    <button type="button" x-show="w.lat && w.lng" @click.prevent="useAddress(w)"
                            class="mt-1 text-xs font-bold text-[var(--color-primary)] hover:underline">Указать этот адрес как адрес склада</button>
                </span>
            </label>
        </template>
    </div>
</div>