@props([
    'assets',
    'variant' => 'banner',
    'title' => 'Twój sprzęt (inwentarz)',
    'selectable' => false,
    'selectAction' => 'selectSnipeitAsset',
    'selectedId' => null,
    // false when embedded inside a caller-provided card (e.g. the operator's
    // "Przeszukaj inwentarz" search box + results in one container) — skips
    // this component's own wrapping card/title so the two don't nest.
    'card' => true,
])

@php
    $isSidebar = $variant === 'sidebar';
@endphp

@if (count($assets))
    @if ($card)
        <div class="card" style="{{ $isSidebar ? 'padding:16px;gap:8px' : 'padding:14px;gap:10px;background:color-mix(in srgb, var(--color-accent) 6%, transparent);border-color:color-mix(in srgb, var(--color-accent) 25%, var(--color-divider))' }}">
            @if ($isSidebar)
                <div class="card-kicker">{{ $title }}</div>
            @else
                <div style="display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600">
                    <span class="material-symbols-outlined" style="font-size:16px">devices</span>
                    {{ $title }}
                </div>
            @endif
    @endif
        <div style="display:flex;flex-direction:column;gap:2px">
            @foreach ($assets as $a)
                @php $isSelected = $selectedId === $a['id']; @endphp
                <div style="display:flex;gap:8px;align-items:center;padding:8px;border-radius:6px;{{ $isSelected ? 'background:color-mix(in srgb, var(--color-accent) 10%, transparent)' : '' }}">
                    <a
                        href="{{ $a['url'] }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        style="display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0;text-decoration:none;color:inherit"
                    >
                        <span class="material-symbols-outlined" style="font-size:18px;flex:none;margin-top:1px;color:var(--color-accent)">devices</span>
                        <span style="min-width:0;flex:1">
                            <span style="display:block;font-size:13px;font-weight:500;{{ $isSelected ? 'color:var(--color-accent)' : '' }}">{{ $a['label'] }}</span>
                            @if (! empty($a['category']))
                                <span style="display:block;font-size:11px;color:color-mix(in srgb, var(--color-text) 55%, transparent);margin-top:1px">{{ $a['category'] }}</span>
                            @endif
                        </span>
                    </a>
                    @if ($selectable)
                        @if ($isSelected)
                            <span style="flex:none;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--color-accent);white-space:nowrap">
                                <span class="material-symbols-outlined" style="font-size:16px">check_circle</span>
                                Powiązano
                            </span>
                        @else
                            <button type="button" class="btn btn-secondary" style="flex:none;font-size:11px;padding:4px 8px;white-space:nowrap" wire:click="{{ $selectAction }}({{ $a['id'] }})">Powiąż</button>
                        @endif
                    @endif
                </div>
            @endforeach
        </div>
    @if ($card)
        </div>
    @endif
@endif