    <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
                <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>
                        {% for name, balances in my_balances.items() %}
                            <tr>
                                <td class="name-row" colspan="4">{{ name }}</td>
                            </tr>
                            {% if balances %}
                            {% for balance in balances %}
                                <tr>
                                    <td>{{ balance['asset'] }}</td>
                                    <td>{{ balance['balance']|format_balance }}</td>
                                    <td>{{ balance['pnl']|format_balance }}</td>
                                </tr>
                            {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </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>Quantity</th>
                        <th>Price</th>
                    </tr>
                    {% for symbol, orders in open_orders.items() %}
                        {% if orders %}
                        {% for order in orders %}
                            <tr>
                                <td>{{ symbol }}</td>
                                <td>{{ order[0] }}</td>
                                <td>{{ order[1] }}</td>
                                <td>{{ order[2] }}</td>
                            </tr>
                        {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="4">No active orders</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                </table>
        </div>


    </div>
