<div class="dropdown is-hoverable is-up is-right">
    <div class="dropdown-trigger">
        <button class="button is-small {% if not AnyExists %} is-danger{% endif %}" aria-haspopup="true"
            aria-controls="dropdown-menu4">
            <span class="icon"><i class="fa-solid fa-key"></i></span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu4" 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">
                            <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">
                            <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">
                            <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" title="Gemini is unavailable because of Europe">
                            <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">
                            <p class="control has-icons-left is-expanded">
                                <input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
                                    placeholder="Gooseai API key" {%if not IsLogin %}disabled{% endif %}
                                    name="goose_key" autocomplete="off">
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <div class="field has-addons">
                            <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">
                            <p class="control">
                                <button {% if not IsLogin %}disabled{% endif %} type="submit" class="button is-small">
                                    <span class="icon is-small">
                                        <i class="fas fa-check"></i>
                                    </span>
                                    <span>Save</span>
                                </button>
                            </p>
                        </div>
                    </form>
                    <p id="api-keys-status"></p>
                </div>
            </div>
        </div>
    </div>
</div>