    <div id="trade_content" class="content">
        <div class="broker-status-bar" id="brokerStatusBar">
            <span id="brokerModeIndicator" class="mode-badge mode-paper">PAPER</span>
            <span id="brokerBalance">Available: --</span>
        </div>

        <button class="btn" id="new_trade" onclick="UI.trade.open_tradeForm()">New Order</button>
        <hr>

        <!-- Open Orders Section -->
        <section class="trade-section">
            <h3>Open Orders</h3>
            <div id="openOrdersContainer" class="orders-container">
                <p class="no-data-msg">No open orders</p>
            </div>
        </section>

        <!-- Positions Section -->
        <section class="trade-section">
            <h3>Positions</h3>
            <div id="positionsContainer" class="positions-container">
                <p class="no-data-msg">No open positions</p>
            </div>
        </section>

        <!-- Trade History Section -->
        <section class="trade-section">
            <h3>Trade History</h3>
            <div id="historyContainer" class="trades-container">
                <p class="no-data-msg">No trade history</p>
            </div>
        </section>

        <!-- Legacy container for backwards compatibility -->
        <div id="tradesContainer" class="trades-container" style="display:none;"></div>
    </div>

    <style>
        .trades-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 5px 0;
            min-height: 50px;
        }

        .trade-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 140px;
            max-width: 180px;
            padding: 10px;
            border-radius: 8px;
            background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
            border: 2px solid #ccc;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 12px;
        }

        .trade-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Paper trade styling */
        .trade-card.trade-paper {
            border-style: dashed;
            border-color: #9e9e9e;
            background: linear-gradient(135deg, #fafafa, #f0f0f0);
        }

        .trade-paper-badge {
            position: absolute;
            top: -8px;
            left: 10px;
            background: #9e9e9e;
            color: white;
            font-size: 9px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
        }

        /* Side-based accent colors */
        .trade-card.trade-buy {
            border-left: 4px solid #4caf50;
        }

        .trade-card.trade-sell {
            border-left: 4px solid #f44336;
        }

        /* Close button */
        .trade-close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: transparent;
            border: none;
            color: #999;
            font-size: 14px;
            cursor: pointer;
            padding: 2px 5px;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .trade-card:hover .trade-close-btn {
            opacity: 1;
        }

        .trade-close-btn:hover {
            color: #f44336;
        }

        /* Trade info */
        .trade-info {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .trade-symbol-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .trade-side {
            font-weight: bold;
            font-size: 11px;
            padding: 2px 5px;
            border-radius: 3px;
        }

        .trade-side.buy {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .trade-side.sell {
            background: #ffebee;
            color: #c62828;
        }

        .trade-symbol {
            font-weight: bold;
            color: #333;
        }

        .trade-row {
            display: flex;
            justify-content: space-between;
            padding: 2px 0;
        }

        .trade-label {
            color: #666;
        }

        .trade-value {
            font-weight: 500;
            font-family: monospace;
        }

        /* P/L colors */
        .trade-pl.positive {
            color: #2e7d32;
        }

        .trade-pl.negative {
            color: #c62828;
        }

        /* P/L flash animation */
        @keyframes plFlash {
            0% { background: rgba(255,235,59,0.5); }
            100% { background: transparent; }
        }

        .trade-pl-flash {
            animation: plFlash 0.3s ease;
        }

        /* Hover panel */
        .trade-hover {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 100;
            min-width: 200px;
            padding: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 11px;
        }

        .trade-card:hover .trade-hover {
            display: block;
        }

        .trade-details {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-top: 5px;
        }

        .trade-paper-indicator {
            color: #9e9e9e;
            font-style: italic;
        }

        /* Removing animation */
        .trade-card-removing {
            animation: cardRemove 0.3s ease forwards;
        }

        @keyframes cardRemove {
            to {
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .no-data-msg {
            color: #888;
            font-style: italic;
            font-size: 12px;
            margin: 10px 0;
        }

        /* Broker status bar */
        .broker-status-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 10px;
            background: #f5f5f5;
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 12px;
        }

        .mode-badge {
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
        }

        .mode-badge.mode-paper {
            background: #9e9e9e;
            color: white;
        }

        .mode-badge.mode-testnet {
            background: #4caf50;
            color: white;
        }

        .mode-badge.mode-live {
            background: #f44336;
            color: white;
        }

        #brokerBalance {
            color: #333;
            font-family: monospace;
        }

        /* Trade sections */
        .trade-section {
            margin-bottom: 15px;
        }

        .trade-section h3 {
            font-size: 13px;
            margin: 8px 0 5px 0;
            color: #555;
            border-bottom: 1px solid #eee;
            padding-bottom: 3px;
        }

        /* Orders container */
        .orders-container {
            min-height: 30px;
        }

        .orders-table {
            width: 100%;
            font-size: 11px;
            border-collapse: collapse;
        }

        .orders-table th,
        .orders-table td {
            padding: 4px 6px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .orders-table th {
            background: #f9f9f9;
            font-weight: 600;
            color: #666;
        }

        .order-row.order-buy {
            border-left: 3px solid #4caf50;
        }

        .order-row.order-sell {
            border-left: 3px solid #f44336;
        }

        .btn-cancel {
            background: #ff5252;
            color: white;
            border: none;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            cursor: pointer;
        }

        .btn-cancel:hover {
            background: #ff1744;
        }

        /* Positions container */
        .positions-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 30px;
        }

        .position-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 8px 10px;
            min-width: 150px;
            font-size: 11px;
        }

        .position-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .position-symbol {
            font-weight: bold;
            color: #333;
        }

        .position-broker {
            font-size: 9px;
            color: #888;
            background: #eee;
            padding: 1px 4px;
            border-radius: 2px;
        }

        .position-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .position-row {
            display: flex;
            justify-content: space-between;
        }

        .position-row span:first-child {
            color: #666;
        }

        .position-row span:last-child {
            font-family: monospace;
            font-weight: 500;
        }

        .position-pl {
            font-weight: bold;
        }

        .position-pl.positive {
            color: #2e7d32;
        }

        .position-pl.negative {
            color: #c62828;
        }

        .position-actions {
            display: flex;
            gap: 5px;
            margin-top: 6px;
        }

        .btn-close-position {
            background: #2196f3;
            color: white;
            border: none;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 10px;
            cursor: pointer;
            flex: 1;
        }

        .btn-close-position:hover {
            background: #1976d2;
        }

        .btn-cancel-orders {
            background: #ff9800;
            color: white;
            border: none;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 10px;
            cursor: pointer;
        }

        .btn-cancel-orders:hover {
            background: #f57c00;
        }
    </style>
