<div class="dropdown is-hoverable is-up is-right">
    <div class="dropdown-trigger">
        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
            <span class="icon"><i class="fa-solid fa-robot"></i></span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
        <div class="dropdown-content is-small">
            <div class="dropdown-item">
                {% for LLM in LLMs %}
                <!-- Added "has-text" as a default class -->
                <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
                    value="{{ LLM.ID.String() }}">
                    <span class="icon">
                        <img src="{{ LLM.Model.Company.Icon }}" />
                    </span>
                    <span>{{ LLM.Name }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
    function toggleSelection(element) {
        // Check if the element currently has the 'has-text-info' class
        if (element.classList.contains('selected')) {
            // It has 'has-text-info', so remove it and add 'has-text'
            element.classList.add('unselected');
            element.classList.remove('selected');
        } else {
            // It doesn't have 'has-text-info', so add it and remove 'has-text'
            element.classList.remove('unselected');
            element.classList.add('selected');
        }
        toggleSendButton();
    }

    function getSelectedModelsIDs() {
        var selectedModelsIDs = [];
        var selectedModels = document.getElementsByClassName('selected');
        for (var i = 0; i < selectedModels.length; i++) {
            selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
        }
        return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
    }
</script>

<style>
    .selected {
        border: 2px solid #3273dc;
        /* Bulma's primary color */
        border-radius: 4px;
        padding: 1px;
        margin: 2px;
    }

    .unselected {
        border-radius: 4px;
        padding: 3px;
    }
</style>