{{ define "home_player_list" }}

<div class="row">
    <div class="col">
        <div id="home-player-list" class="border border-secondary 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('home-player-list')" data-bs-action="tooltip" data-bs-title="Alle auswählen">
                <i class="bi bi-check-square fs-4"></i>
            </button>
            <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('home-player-list')" data-bs-action="tooltip" data-bs-title="Nichts auswählen">
                <i class="bi bi-square fs-4"></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="home-player-add"
                    data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-target="#addPlayerModal" data-bs-action="tooltip" data-bs-title="Spieler hinzufügen" disabled>
                <i class="bi bi-person-fill-add fs-4"></i>
            </button>
        {{ end }}
        <br>
        <div class="vstack text-center border border-secondary rounded mt-2" data-bs-action="tooltip" data-bs-title="Ausgewählte Spieler">
            <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
            <span class="badge fs-5 mb-2" id="home-player-selected">0</span>
        </div>
    </div>
</div>

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

{{ end }}