@php
    $squadsRows = collect($soldPlayers)->merge($unsoldPlayers)->values();
@endphp

<div class="figma_final_squads" id="figmaFinalSquads">
    <h3 class="figma_final_squads__title">Final Squads &amp; Player List</h3>

    <div class="figma_final_squads__toolbar">
        <div class="figma_final_squads__tabs" role="tablist" aria-label="Player sale status">
            <button type="button" class="figma_final_squads__tab is-active" data-status-filter="sold" role="tab" aria-selected="true">
                Sold ({{ count($soldPlayers) }})
            </button>
            <button type="button" class="figma_final_squads__tab" data-status-filter="unsold" role="tab" aria-selected="false">
                Unsold ({{ count($unsoldPlayers) }})
            </button>
        </div>

        <div class="figma_final_squads__controls">
            <label class="figma_final_squads__filter">
                <select id="figmaSquadsRoleFilter" aria-label="Filter by role">
                    <option value="">All Role</option>
                </select>
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
            </label>
            <input type="search" id="figmaSquadsSearch" class="figma_final_squads__search" placeholder="Search players..." autocomplete="off">
        </div>
    </div>

    <div class="figma_final_squads__head" aria-hidden="true">
        <div>Player Name</div>
        <div>New Team</div>
        <div>Role</div>
        <div>Category</div>
        <div>Sold Price</div>
        <div>Status</div>
    </div>

    <div class="figma_final_squads__body" id="figmaSquadsBody">
        @forelse ($squadsRows as $row)
            <article
                class="figma_squad_row"
                data-status="{{ $row['status'] }}"
                data-role="{{ $row['role'] }}"
                data-search="{{ strtolower($row['playerName'] . ' ' . $row['teamName'] . ' ' . $row['role']) }}"
            >
                <div class="figma_squad_row__player">
                    <x-safe-image :src="$row['avatarUrl'] ?? null" type="player" :alt="$row['playerName']" />
                    <span>{{ $row['playerName'] }}</span>
                </div>
                <div class="figma_squad_row__team">{{ $row['teamName'] }}</div>
                <div class="figma_squad_row__role">{{ $row['role'] }}</div>
                <div>
                    <span class="figma_cat_badge figma_cat_badge--{{ $row['categoryClass'] }}">
                        {{ $row['categoryLabel'] ?? $row['categoryName'] }}
                    </span>
                </div>
                <div class="figma_squad_row__price {{ $row['status'] === 'unsold' ? 'is-muted' : '' }}">
                    {{ $row['soldPrice'] }}
                </div>
                <div class="figma_squad_row__status">
                    @if ($row['status'] === 'sold')
                        <span class="figma_status figma_status--sold" title="Sold" aria-label="Sold">
                            <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
                        </span>
                    @else
                        <span class="figma_status figma_status--unsold" title="Unsold" aria-label="Unsold">
                            <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                        </span>
                    @endif
                </div>
            </article>
        @empty
            <p class="figma_final_squads__empty">No players found for this auction.</p>
        @endforelse
        <p class="figma_final_squads__empty is-hidden" id="figmaSquadsEmpty">No players match your filters.</p>
    </div>

    <div class="figma_final_squads__footer" id="figmaSquadsFooter" hidden>
        <span id="figmaSquadsInfo">Showing 0 players</span>
        <div class="figma_final_squads__pager" id="figmaSquadsPager"></div>
    </div>
</div>