    <div id="bal_content" class="content">
        <div id="exc_status_div">
            <button class="btn" type="button" id="exStatusBtn" name="exStatusBtn" onclick="UI.exchanges.status()">Connect</button>
            <span id="exc_status">
                 <span>Connected:</span>
                    <div id="conned_excs" class="conned_excs">
                        <div style="text-align: left;">
                            {% for exchange in cond_exchanges %}
                                <span class="avail_exchange">{{ exchange }}</span>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                <span>Configured:</span>
                <div class="conned_excs">
                    <div style="text-align: left;">
                        {% for exchange in confd_exchanges %}
                        <span class="avail_exchange">{{ exchange }}</span>
                        {% endfor %}
                    </div>
                </div>
           </span>
        </div>
        <div>
            <h3 style="display: flex; align-items: center; gap: 10px;">
                Balances
                {% set balance_exchanges = my_balances.keys()|list %}
                {% set default_balance_exchange = selected_exchange if selected_exchange in balance_exchanges else (balance_exchanges[0] if balance_exchanges else '') %}
                {% if balance_exchanges %}
                <select id="balance_exchange_selector" onchange="UI.exchanges.onBalanceExchangeChange(this.value)"
                        style="font-size: 12px; padding: 2px 4px;">
                    {% for exchange in balance_exchanges %}
                        <option value="{{ exchange }}" {% if exchange == default_balance_exchange %}selected{% endif %}>{{ exchange }}</option>
                    {% endfor %}
                </select>
                {% endif %}
                <button id="refresh_balances_btn" onclick="UI.exchanges.refreshBalances()"
                        style="font-size: 12px; padding: 2px 8px; cursor: pointer;"
                        title="Refresh balances from exchange">&#x21bb;</button>
            </h3>
            <div id="balances" style="height: 160px">
                <div id="balances_tbl">
                    <table>
                        <tr>
                            <th>Asset</th>
                            <th>Balance</th>
                            <th>Profit & Loss</th>
                        </tr>
                        {% set selected_balances = my_balances.get(default_balance_exchange, []) %}
                        {% set valid_balances = selected_balances|selectattr('asset', 'ne', 'N/A')|list if selected_balances else [] %}
                        {% if valid_balances %}
                            {% for balance in valid_balances %}
                                <tr>
                                    <td>{{ balance['asset'] }}</td>
                                    <td>{{ balance['balance']|format_balance }}</td>
                                    <td>{{ balance['pnl']|format_balance }}</td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="3" style="text-align: center; color: #888;">No balances available</td>
                            </tr>
                        {% endif %}
                    </table>
                </div>
            </div>

        </div>
        <div>
            <h3>Active Trades</h3>
                <table>
                    <tr>
                        <th>Symbol</th>
                        <th>Side</th>
                        <th>Quantity</th>
                        <th>Price</th>
                    </tr>
                    {% for symbol, trades in active_trades.items() %}
                        {% if trades %}
                        {% for trade in trades %}
                            <tr>
                                <td>{{ symbol }}</td>
                                <td>{{ trade[0] }}</td>
                                <td>{{ trade[1] }}</td>
                                <td>{{ trade[2] }}</td>
                            </tr>
                        {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="4">No active trades</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                </table>
        </div>

        <div>
            <h3>Open Orders</h3>
                <table>
                    <tr>
                        <th>Symbol</th>
                        <th>Side</th>
                        <th>Size</th>
                        <th>Price</th>
                        <th>Status</th>
                    </tr>
                    {% if open_orders %}
                        {% for order in open_orders %}
                            <tr>
                                <td>{{ order.symbol }}</td>
                                <td>{{ order.side }}</td>
                                <td>{{ order.size }}</td>
                                <td>{{ order.price | default('-') }}</td>
                                <td>{{ order.status }}</td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="5">No open orders</td>
                        </tr>
                    {% endif %}
                </table>
        </div>


    </div>
