function setupClanButtons(dropdownId, delBtnId, editBtnId) {
    const dropdown = document.getElementById(dropdownId);
    const deleteButton = document.getElementById(delBtnId);
    const editButton = document.getElementById(editBtnId);

    dropdown.addEventListener('change', function () {
        deleteButton.disabled = !this.value;
        deleteButton.classList.toggle("bg-secondary-subtle");
        editButton.disabled = !this.value;
        editButton.classList.toggle("bg-secondary-subtle");
    });
}

function getSelectedClanId(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    const selectedClanId = dropdown.options[dropdown.selectedIndex].value;
    return parseInt(selectedClanId);
}

function setupPlayerButtons(dropdownId, listId, addBtnId) {
    const dropdown = document.getElementById(dropdownId);
    const addButton = document.getElementById(addBtnId);

    dropdown.addEventListener('change', function () {
        addButton.disabled = !this.value && (dropdown.selectedIndex !== -1);
        addButton.classList.toggle("bg-secondary-subtle");
    });
}

function getClanLists(event) {
    const button = event.relatedTarget;
    const clanListId = button.getAttribute('data-bs-list');
    const clanList = document.querySelector(clanListId);

    let otherClanListId;
    if (clanListId === '#home-clan')
        otherClanListId = '#opponent-clan'
    else
        otherClanListId = '#home-clan'
    const otherClanList = document.querySelector(otherClanListId);

    return [clanList, otherClanList];
}

function getPlayerLists(event) {
    const button = event.relatedTarget;
    const playerListId = button.getAttribute('data-bs-list');
    const playerList = document.querySelector(playerListId);

    let otherPlayerListId;
    if (playerListId === '#home-player-list')
        otherPlayerListId = '#opponent-player-list'
    else
        otherPlayerListId = '#home-player-list'
    const otherPlayerList = document.querySelector(otherPlayerListId);

    return [playerList, otherPlayerList];
}

function getSelectedClan(event) {
    const button = event.relatedTarget;
    const playerListId = button.getAttribute('data-bs-list');

    let clanListId;
    if (playerListId === '#home-player-list')
        clanListId = '#home-clan'
    else
        clanListId = '#opponent-clan'
    const clanList = document.querySelector(clanListId);

    return clanList.options[clanList.selectedIndex];
}

function loadClans() {
    const homeClanList = document.getElementById('home-clan');
    const oppClanList = document.getElementById('opponent-clan');

    fetch('/clans_html')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(data => {
            homeClanList.innerHTML = data;
            oppClanList.innerHTML = data;
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}