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

    // Only sold players the replacement rules can actually act on carry a
    // button; the rest of the table renders exactly as before.
    $replaceable = $replaceablePlayers ?? [];
    $candidates = $replacementCandidates ?? [];
@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>Action</div>
    </div>

    <div class="figma_final_squads__body" id="figmaSquadsBody">
        @forelse ($squadsRows as $row)
            @php
                // Any unsold player can fill any slot, so the button turns on
                // for every sold row as soon as the league has someone left.
                $slot = $row['status'] === 'sold' && $candidates !== []
                    ? ($replaceable[$row['playerId']] ?? null)
                    : null;
            @endphp
            <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>
                <div class="figma_squad_row__action">
                    @if ($slot)
                        <button
                            type="button"
                            class="figma_replace_btn"
                            data-replace-open
                            data-player-id="{{ $row['playerId'] }}"
                            data-player-name="{{ $row['playerName'] }}"
                            data-team-name="{{ $slot['teamName'] }}"
                            data-category-name="{{ $slot['categoryName'] }}"
                            data-price-label="{{ $slot['priceLabel'] }}"
                        >Replace</button>
                    @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>

{{-- Replacement dialog. One instance for the whole table; the Replace buttons
     hand it the slot being filled and the script narrows the candidate list to
     that player's category and price. --}}
<div class="squad_replace" id="squadReplaceModal" hidden>
    <div class="squad_replace__backdrop" data-replace-close></div>

    <div class="squad_replace__panel" role="dialog" aria-modal="true" aria-labelledby="squadReplaceTitle">
        <form method="POST" action="{{ route('admin.leagues.squad.replace', $league) }}" id="squadReplaceForm">
            @csrf
            <input type="hidden" name="outgoing_player_id" id="squadReplaceOutgoing">

            <div class="squad_replace__header">
                <h4 id="squadReplaceTitle">Replace player</h4>
                <button type="button" class="squad_replace__close" data-replace-close aria-label="Close">&times;</button>
            </div>

            <p class="squad_replace__lead">
                The player leaving goes back to the unsold list. Whoever takes their slot inherits its
                category and its price, so no budget moves and the squad keeps the same shape.
            </p>

            <dl class="squad_replace__facts">
                <div>
                    <dt>Leaving</dt>
                    <dd id="squadReplaceOutgoingName">—</dd>
                </div>
                <div>
                    <dt>Team</dt>
                    <dd id="squadReplaceTeam">—</dd>
                </div>
                <div>
                    <dt>Slot category</dt>
                    <dd id="squadReplaceCategory">—</dd>
                </div>
                <div>
                    <dt>Slot price</dt>
                    <dd id="squadReplacePrice">—</dd>
                </div>
            </dl>

            <div class="squad_replace__field">
                <label for="squadReplaceSearch">Replacement <span id="squadReplaceCount"></span></label>
                <p class="squad_replace__hint" id="squadReplaceHint"></p>
                <input
                    type="search"
                    id="squadReplaceSearch"
                    class="squad_replace__search"
                    placeholder="Search unsold players..."
                    autocomplete="off"
                >
                <div class="squad_replace__list" id="squadReplaceList" role="radiogroup" aria-labelledby="squadReplaceTitle"></div>
                <p class="squad_replace__empty is-hidden" id="squadReplaceEmpty">
                    No unsold players are left in this auction.
                </p>
            </div>

            <div class="squad_replace__field">
                <label for="squadReplaceReason">Reason <span class="squad_replace__optional">(optional, kept in the auction history)</span></label>
                <input
                    type="text"
                    name="reason"
                    id="squadReplaceReason"
                    class="squad_replace__reason"
                    maxlength="200"
                    placeholder="e.g. injured, unavailable for the tournament"
                >
            </div>

            <div class="squad_replace__footer">
                <button type="button" class="squad_replace__cancel" data-replace-close>Cancel</button>
                <button type="submit" class="squad_replace__submit" id="squadReplaceSubmit" disabled>Confirm replacement</button>
            </div>
        </form>
    </div>
</div>