<!-- Exchange Config Form Popup -->
<div class="form-popup" id="exchanges_config_form" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 380px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="exchange_draggable_header">
        <h1>Configure Exchanges</h1>
        <button class="dialog-close-btn" onclick="UI.exchanges.closeForm()">&times;</button>
    </div>

    <!-- Main Content -->
    <form action="/config_exchange" class="form-container" style="padding: 15px; overflow-y: auto;">
        <!-- Exchange selector -->
        <div style="margin-bottom: 12px;">
            <label for="c_exchanges" style="display: block; margin-bottom: 5px;"><b>Exchange:</b></label>
            <select name="c_exchanges" id="c_exchanges" style="width: 100%; padding: 6px; height: 32px;">
                {% for each in exchanges %}
                <option>{{each}}</option>
                {% endfor %}
            </select>
        </div>

        <!-- API Key -->
        <div style="margin-bottom: 12px;">
            <label for="api_key" style="display: block; margin-bottom: 5px;"><b>API Key:</b></label>
            <input name="api_key" id="api_key" style="width: 100%; padding: 6px; box-sizing: border-box;">
        </div>

        <!-- API Secret -->
        <div style="margin-bottom: 12px;">
            <label for="api_secret_key" style="display: block; margin-bottom: 5px;"><b>API Secret:</b></label>
            <input name="api_secret_key" id="api_secret_key" type="password" style="width: 100%; padding: 6px; box-sizing: border-box;">
        </div>

        <!-- API Passphrase (KuCoin and similar exchanges) -->
        <div style="margin-bottom: 12px;">
            <label for="api_passphrase" style="display: block; margin-bottom: 5px;"><b>API Passphrase:</b></label>
            <input name="api_passphrase" id="api_passphrase" type="password" style="width: 100%; padding: 6px; box-sizing: border-box;" placeholder="Not required for all exchanges">
        </div>

        <!-- Status message area -->
        <div id="exchange_status" style="text-align: center; padding: 10px; margin-top: 10px; display: none;">
            <span id="exchange_status_text"></span>
        </div>

        <!-- Buttons -->
        <div style="text-align: center; margin-top: 15px;">
            <button type="button" class="btn cancel" onclick="UI.exchanges.closeForm()">Close</button>
            <button type="button" id="exchange_connect_btn" class="btn next" onclick="UI.exchanges.submitApi()">Connect</button>
        </div>
    </form>

    <!-- Resizer -->
    <div id="resize-exchange" class="resize-handle"></div>
</div>
