{{ define "home_clan_bar" }}

<div class="row g-2">
    <div class="col-auto">
        <label for="home-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="home-clan" hx-get="/players_html" hx-target="#home-player-list" hx-vals='js:{"clan_id": getSelectedClanId("home-clan")}'>
                <option disabled selected value>Auswählen...</option>
                <!-- Options will be loaded dynamically -->
            </select>
            <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="home-delete" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" disabled>
                <i class="bi bi-trash3" data-bs-toggle="tooltip" data-bs-title="Clan löschen"></i>
            </button>
            <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#editClanModal" id="home-edit" disabled>
                <i class="bi bi-pencil-fill" data-bs-toggle="tooltip" data-bs-title="Clan bearbeiten"></i>
            </button>
            <button class="btn btn-lg btn-outline-secondary text-success" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#addClanModal" id="home-add">
                <i class="bi bi-plus-lg" data-bs-toggle="tooltip" data-bs-title="Clan hinzufügen"></i>
            </button>
        </div>
    </div>
</div>

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

{{ end }}