<div class="dropdown is-up is-right" id="settings-dropdown">
    <div class="dropdown-trigger">
        <button class="button is-small {% if not AnyExists %} is-danger{% endif %} 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-bars"></i></i></span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
        <div class="dropdown-content">
            <div class="dropdown-item">
                <div class="field">
                    <form id="api-keys-form" hx-post="/addKeys" hx-trigger="submit" hx-target="#api-keys-status">
                        <div class="field has-addons is-hidden" id="openai-field">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if OpenaiExists %}is-success{% endif %}" type="text"
                                    {%if not IsLogin %}disabled{% endif %} placeholder="OpenAI API key"
                                    name="openai_key" autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons is-hidden" id="anthropic-field">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if AnthropicExists %}is-success{% endif %}" type="text"
                                    {% if not IsLogin %}disabled{% endif %} placeholder="Anthropic API key"
                                    name="anthropic_key" autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons is-hidden" id="mistral-field">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if MistralExists %}is-success{% endif %}" type="text"
                                    {%if not IsLogin %}disabled{% endif %} placeholder="Mistral API key"
                                    name="mistral_key" autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons is-hidden" id="groq-field">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if GroqExists %}is-success{% endif %}" type="text"
                                    placeholder="Groq API key" {%if not IsLogin %}disabled{% endif %} name="groq_key"
                                    autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons is-hidden" title="Gemini is unavailable because of Europe"
                            id="gemini-field">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
                                    disabled placeholder="Google API key" name="google_key" autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons is-hidden" id="goose-field"
                            title="GooseAI chat API soon to be available">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
                                    {%if not IsLogin %}disabled{% endif %} placeholder="Gooseai API key"
                                    name="goose_key" autocomplete="off" disabled>
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons" id="save-field">
                            <p class="control">
                                <button disabled id="save-keys-button" type="submit" class="button is-small">
                                    <span class="icon is-small">
                                        <i class="fas fa-check"></i>
                                    </span>
                                    <span>Save keys</span>
                                </button>
                            </p>
                            <p class="control">
                                <button id="toggle-keys-button" type="button"
                                    class="button is-small {% if not AnyExists %}is-danger{% endif %}">
                                    <span class="icon is-small">
                                        <i class="fa-solid fa-chevron-down"></i>
                                    </span>
                                </button>
                            </p>
                        </div>
                    </form>
                    <p id="api-keys-status"></p>
                </div>
                {% if IsSub %}
                <a class="button is-small mt-1" href="{{ StripeSubLink }}" target="_blank">
                    <span class="icon is-small" style="color: #b00202">
                        <i class="fa-solid fa-heart"></i>
                    </span>
                    <span>Manage subscription</span>
                </a>
                {% else %}
                <a class="button is-small mt-1" hx-get="/pricingTable" hx-target="#chat-container" hx-swap="outerHTML"
                    hx-trigger="click">
                    <span class="icon is-small">
                        <i class="fa-solid fa-heart"></i>
                    </span>
                    <span>Subscribe to JADE</span>
                </a>
                {% endif %}
                <a class="button is-small mt-1" hx-get="/generateTermAndService" hx-target="#chat-container"
                    hx-swap="outerHTML" hx-trigger="click">
                    <span class="icon is-small">
                        <i class="fa-regular fa-file-lines"></i>
                    </span>
                    <span>Terms and conditions</span>
                </a>
                <a class="button is-small mt-1" href="mailto:adrien.bouvais.pro@gmail.com">
                    <span class="icon is-small">
                        <i class="fa-solid fa-address-card"></i>
                    </span>
                    <span>Contact</span>
                </a>
                <a class="button is-small mt-1" href="/signout">
                    <span class="icon is-small">
                        <i class="fa-solid fa-right-from-bracket"></i>
                    </span>
                    <span>Sign out</span>
                </a>
            </div>
        </div>
    </div>
</div>

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

    document.getElementById('toggle-keys-button').addEventListener('click', function () {
        // Do not take the id="save-field"
        var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
        var saveButton = document.getElementById('save-keys-button');
        var toggleIcon = this.querySelector('i');

        fields.forEach(function (field) {
            if (field.id == "save-field") return;
            field.classList.toggle('is-hidden');
        });

        saveButton.disabled = !saveButton.disabled;
        toggleIcon.classList.toggle('fa-chevron-up');
        toggleIcon.classList.toggle('fa-chevron-down');
    });
</script>