@props([
    'templates',
    'planAllowed' => [],
    'model',
    'defaultModel',
    'selected' => [],
    'keyPrefix' => 'tpl',
    'label' => null,
    'hint' => null,
    'defaultLabel' => null,
    'defaultEmptyHint' => null,
    'defaultHint' => null,
])

{{-- THE DESIGNS (SKINS) A RESELLER CAN USE.

     ONE SINGLE COMPONENT FOR BOTH FAMILIES: the client-panel designs and the
     public-landing skins. The copy and the record passed in change; the doctrine
     is the same, and writing it down ONCE is exactly what keeps the two sections
     of the same form from contradicting each other. The copy props are optional
     and fall back to the client-panel text, which was the first one to exist.

     The plan says which designs the tier includes; here the owner decides which
     of them THIS reseller may use and which one it opens with. All ticked = no
     restriction, which is the default state for anyone nobody has limited yet
     (the set that gets saved is the BLOCKED one, not the allowed one, so a new
     product design becomes available on its own).

     THE PLAN RULES. A design outside the plan still shows up — with its badge,
     so the owner can see what this tier is missing — but its checkbox is
     DISABLED and unticked: it is not a restriction this form can lift. It gets
     granted by upgrading their plan, and then it enables itself, because what
     gets saved are refusals WITHIN the tier and the upgrade does not trip over
     an old block. It used to be possible to "pre-authorize", and that made the
     screen contradict the tier the reseller actually pays for.

     The checkboxes use .live because the selector below only offers the ticked
     ones: the default cannot end up pointing at a design the owner just removed
     on this same screen. --}}
<div>
    <label class="rf-label">{{ $label ?? __('Client panel designs') }}</label>
    <p class="rf-hint mb-2">{{ $hint ?? __('The portal designs this reseller may offer their clients — everything their plan carries, unless you untick one.') }}</p>

    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
        @foreach ($templates as $key => $tpl)
            @php $inPlan = (bool) ($planAllowed[$key] ?? true); @endphp
            <label class="flex items-center gap-2 rounded-lg border p-2 text-sm" wire:key="{{ $keyPrefix }}-{{ $key }}"
                   style="border-color:var(--color-border);cursor:{{ $inPlan ? 'pointer' : 'not-allowed' }};{{ $inPlan ? '' : 'opacity:.55;' }}">
                <input type="checkbox" class="rf-checkbox" value="{{ $key }}" wire:model.live="{{ $model }}" @disabled(! $inPlan)>
                <span class="flex-1">{{ $tpl['label'] ?? $key }}</span>
                @unless ($inPlan)
                    <span class="rf-badge rf-badge-neutral" title="{{ __('Their plan does not include this design. Move them to a plan that carries it to make it selectable.') }}">
                        <span class="rf-badge-dot"></span>{{ __('Not in plan') }}
                    </span>
                @endunless
            </label>
        @endforeach
    </div>

    @php
        // Only the ticked ones AND within the plan can be the default; the order
        // follows the record.
        $ticked = array_map('strval', (array) $selected);
        $options = array_values(array_filter(
            array_keys($templates),
            fn ($k) => ($planAllowed[$k] ?? true) && in_array((string) $k, $ticked, true),
        ));
    @endphp

    <div class="mt-3">
        <label class="rf-label">{{ $defaultLabel ?? __('Default design') }}</label>
        @if ($options === [])
            <p class="rf-hint">{{ $defaultEmptyHint ?? __('Tick at least one design to choose a default. With none ticked their portal keeps working on the system default.') }}</p>
        @else
            <select class="rf-select" wire:model="{{ $defaultModel }}">
                @foreach ($options as $key)
                    <option value="{{ $key }}">{{ $templates[$key]['label'] ?? $key }}</option>
                @endforeach
            </select>
            <p class="rf-hint mt-1">{{ $defaultHint ?? __('The design their portal opens on, and what it falls back to if their own choice stops being available.') }}</p>
        @endif
    </div>
</div>