{{ define "opp_player_list" }}

    <div class="row">
        <div class="col">
            <div id="opponent-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">

            </div>
        </div>
        <div class="col-auto ps-0">
            <div class="btn-group-vertical btn-group-lg" role="group">
                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('opponent-player-list')">
                    <i class="bi bi-check-square fs-4" data-bs-toggle="tooltip" data-bs-title="Alle auswählen"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('opponent-player-list')">
                    <i class="bi bi-square fs-4" data-bs-toggle="tooltip" data-bs-title="Nichts auswählen"></i>
                </button>
            </div>
            {{ if not (eq .UserRole "READER") }}
                <br>
                <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="opponent-player-add" data-bs-toggle="modal" data-bs-list="#opponent-player-list" data-bs-target="#addPlayerModal" disabled>
                    <i class="bi bi-person-add fs-4" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen"></i>
                </button>
            {{ end }}
            <br>
            <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen">
                <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
                <span class="badge fs-5 mb-2" id="opponent-player-selected">0</span>
            </div>
        </div>
    </div>

    <script lang="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
        });
    </script>

{{ end }}