{{ define "opp_clan_bar" }}

<div class="row g-2">
    <div class="col-auto pe-2">
        <label for="opponent-clan" class="col-form-label col-form-label-lg">Clans:</label>
    </div>
    <div class="col">
        <div class="input-group input-group-lg mb-3">
            <select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"clan_id": getSelectedClanId("opponent-clan")}'>
                <option disabled selected value>Auswählen...</option>
                <!-- Options will be loaded dynamically -->
            </select>
            {{ if not (eq .UserRole "READER") }}
                <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete"
                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" data-bs-action="tooltip" data-bs-title="Clan löschen" disabled>
                    <i class="bi bi-trash3-fill"></i>
                </button>
                <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" id="opponent-edit"
                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#editClanModal" data-bs-action="tooltip" data-bs-title="Clan bearbeiten" disabled>
                    <i class="bi bi-pencil-fill"></i>
                </button>
                <button class="btn btn-lg btn-outline-secondary text-success" type="button" id="opponent-add"
                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#addClanModal" data-bs-action="tooltip" data-bs-title="Clan hinzufügen">
                    <i class="bi bi-plus-lg"></i>
                </button>
            {{ end }}
        </div>
    </div>
</div>

<script lang="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');

        const oppPlayerList = document.getElementById('opponent-player-list');
        oppPlayerList.addEventListener('htmx:afterSwap', function() {
            initTooltips(oppPlayerList);
        });
    });
</script>

{{ end }}