<div class="dropdown is-up is-right" id="models-dropdown">
    <div class="dropdown-trigger">
        <button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
            onclick="this.parentElement.parentElement.classList.toggle('is-active')">
            <span class="icon"><i class="fa-solid fa-robot"></i></span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
        <div class="dropdown-content">
            <div class="dropdown-item" id="models-list">
                <div id="llm-list">
                    {% for LLM in LLMs %}
                    <div class="icon-text has-text unselected icon-llm" data-id="{{ LLM.ID.String() }}"
                        style="cursor: pointer;" onclick="toggleSelection(this)">
                        <span class="icon">
                            <img src="{{ LLM.Model.Company.Icon }}" />
                        </span>
                        <span>{{ LLM.Name }}</span>
                    </div>
                    {% endfor %}
                </div>
                <div class="is-flex is-justify-content-space-between mt-4">
                    <button disabled class="button is-small is-danger" hx-get="/deleteLLM" hx-swap="outerHTML"
                        hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
                        hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" id="delete-model-button">
                        <span class="icon">
                            <i class="fa-solid fa-trash"></i>
                        </span>
                    </button>
                    <div>
                        <button disabled class="button is-small is-primary mr-2 ml-5">
                            <span class="icon">
                                <i class="fa-solid fa-pen"></i>
                            </span>
                        </button>
                        <button class="button is-small is-success is-outlined" id="create-model-button">
                            <span class="icon">
                                <i class="fa-solid fa-plus"></i>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="dropdown-item is-hidden" id="models-creation">
                <form id="create-model-form" hx-post="/createLLM" hx-target="#models-dropdown" hx-swap="outerHTML">
                    <input class="input is-small mb-3" type="text" id="model-name-input" name="model-name-input"
                        placeholder="Model name" autocomplete="off">
                    <div class="select is-fullwidth is-small mb-3" id="model-id-input">
                        <select name="selectedLLMId">
                            {% for modelInfo in ModelInfos %}
                            <option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option>
                            {% endfor %}
                            <option value="{% if IsSub %}custom{% else %}none{% endif %}">Inference Endpoints</option>
                        </select>
                    </div>
                    <p class="is-hidden" style="color: red;" id="endpoint-error">
                        <small>Need subscription</small>
                    </p>
                    <input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
                        placeholder="Model id" autocomplete="off">
                    <input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input"
                        placeholder="URL (with /v1/chat/completions)" autocomplete="off">
                    <input class="input is-small mb-3 is-hidden" type="text" id="model-key-input" name="model-key-input"
                        placeholder="Token" autocomplete="off">
                    <p><small>Temperature:</small></p>
                    <input class="slider is-small mb-3" step="0.05" min="0" max="2" value="0" type="range"
                        id="temperature-slider" name="temperature-slider">
                    <output id="temperature-slider-output">0</output>
                    <p><small>System prompt:</small></p>
                    <textarea class="textarea is-small mb-5 has-fixed-size" id="model-prompt-input"
                        name="model-prompt-input"></textarea>
                    <div class="is-flex is-justify-content-flex-end">
                        <button class="button is-small is-danger is-outlined mr-3" id="cancel-create-model-button"
                            type="button">
                            <span class="icon">
                                <i class="fa-solid fa-xmark"></i>
                            </span>
                        </button>
                        <button disabled class="button is-small is-success" id="confirm-create-model-button"
                            type="submit">
                            <span class="icon">
                                <i class="fa-solid fa-check"></i>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        var sortable = new Sortable(document.getElementById('llm-list'), {
            animation: 150,
            onEnd: function (evt) {
                var items = evt.to.children;
                var updates = [];
                for (var i = 0; i < items.length; i++) {
                    var id = items[i].getAttribute('data-id');
                    var position = i + 1;
                    updates.push({ id: id, position: position });
                }

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/updateLLMPositionBatch', true);
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                xhr.send(JSON.stringify(updates));
            }
        });

        document.getElementById('model-name-input').addEventListener('input', function () {
            document.getElementById('confirm-create-model-button').disabled = this.value === '' || !document.getElementById('endpoint-error').classList.contains('is-hidden');
        })

        document.addEventListener('click', function (event) {
            if (!document.getElementById('models-dropdown').contains(event.target)) {
                document.getElementById('models-dropdown').classList.remove('is-active');
            }
        });

        document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
            const customEndpoint = this.value === 'custom';
            document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint);
            document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint);
            document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);

            if (this.value === 'none') {
                document.getElementById('endpoint-error').classList.remove('is-hidden');
                document.getElementById('confirm-create-model-button').disabled = true;
            } else {
                document.getElementById('endpoint-error').classList.add('is-hidden');
                document.getElementById('confirm-create-model-button').disabled = false;
            }
        });

        document.getElementById('temperature-slider').addEventListener('input', function () {
            document.getElementById('temperature-slider-output').innerHTML = this.value;
        })

        document.getElementById('create-model-button').addEventListener('click', function () {
            console.log('create model');
            document.getElementById('models-list').classList.add('is-hidden');
            document.getElementById('models-creation').classList.remove('is-hidden');
        });

        document.getElementById('cancel-create-model-button').addEventListener('click', function () {
            console.log('cancel create model');
            document.getElementById('models-list').classList.remove('is-hidden');
            document.getElementById('models-creation').classList.add('is-hidden');
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
                document.body.classList.add('shift-pressed');
            }
        });

        document.addEventListener('keyup', function (event) {
            if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
                document.body.classList.remove('shift-pressed');
                lastSelectedIndex = null;

                const elements = Array.from(document.getElementsByClassName('icon-text'));
                for (let i = 0; i < elements.length; i++) {
                    elements[i].classList.remove('shiftselected');
                }

                window.getSelection().removeAllRanges();
            }
        });

        document.addEventListener('click', function (event) {
            if (event.shiftKey) {
                event.preventDefault();
            }
        });
    </script>
</div>