<!-- New Trade Form Popup -->
<div class="form-popup" id="new_trade_form" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 580px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="trade_draggable_header">
        <h1>Create New Trade</h1>
        <button class="dialog-close-btn" onclick="UI.trade.close_tradeForm()">&times;</button>
    </div>

    <!-- Main Content -->
    <form action="/new_trade" class="form-container" style="padding: 15px; overflow-y: auto;">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;">
            <!-- Trade Mode Selection -->
            <label for="tradeTarget"><b>Trade Mode:</b></label>
            <select name="tradeTarget" id="tradeTarget">
                <option value="test_exchange">Paper Trade</option>
                <!-- Live exchanges populated dynamically -->
            </select>

            <!-- Testnet Toggle - only shown for live exchanges -->
            <div id="testnet-row" style="grid-column: 1 / span 2; display: none; padding: 8px; background: #2a2a2a; border-radius: 4px;">
                <label style="display: flex; align-items: center; gap: 8px; font-size: 12px;">
                    <input type="checkbox" id="tradeTestnet" checked>
                    <span><b>Testnet Mode</b> (Recommended for testing)</span>
                </label>
                <small id="testnet-warning" style="color: #ff6600; font-size: 10px; display: block; margin-top: 3px;">
                    Unchecking uses REAL MONEY on the exchange
                </small>
                <small id="testnet-unavailable" style="color: #888; font-size: 10px; display: none; margin-top: 3px;">
                    Testnet not available for this exchange
                </small>
            </div>

            <!-- Exchange Selection -->
            <label for="tradeExchange"><b>Exchange:</b></label>
            <select name="tradeExchange" id="tradeExchange">
                <!-- Exchanges populated dynamically, defaults to chart view -->
            </select>

            <!-- Symbol Selection -->
            <label for="tradeSymbol"><b>Symbol:</b></label>
            <select name="tradeSymbol" id="tradeSymbol" style="width: 100%; padding: 4px; height: 28px; font-size: 13px; box-sizing: border-box;">
                <!-- Populated dynamically, defaults to chart view -->
            </select>

            <!-- Side Input field -->
            <label for="side"><b>Side:</b></label>
            <select name="side" id="side">
                <option value="buy">Buy</option>
                <option value="sell">Sell</option>
            </select>

            <!-- Order Type Input field -->
            <label for="orderType"><b>Order Type:</b></label>
            <select name="orderType" id="orderType">
                <option value="MARKET">Market</option>
                <option value="LIMIT">Limit</option>
            </select>

            <!-- Price Input field -->
            <label id="price-label" for="price"><b>Price:</b></label>
            <div>
                <input type="number" min="0" value="0.1" step="0.00000001" name="price" id="price" style="display: none; width: 100%;">
                <output name="currentPrice" id="currentPrice"></output>
            </div>

            <!-- Quantity Input field -->
            <label for="quantity"><b>Quantity:</b></label>
            <input type="number" min="0" value="0" step="0.00000001" name="quantity" id="quantity" style="width: 100%;">

            <!-- Value field -->
            <label for="tradeValue"><b>Est. Value:</b></label>
            <output name="tradeValue" id="tradeValue" for="quantity price">0</output>

            <!-- Stop Loss (optional) -->
            <label for="stopLoss"><b>Stop Loss:</b></label>
            <input type="number" min="0" step="0.00000001" name="stopLoss" id="stopLoss"
                   placeholder="Optional - triggers auto-close" style="width: 100%;">

            <!-- Take Profit (optional) -->
            <label for="takeProfit"><b>Take Profit:</b></label>
            <input type="number" min="0" step="0.00000001" name="takeProfit" id="takeProfit"
                   placeholder="Optional - triggers auto-close" style="width: 100%;">

            <!-- Time in Force -->
            <label for="timeInForce"><b>Time in Force:</b></label>
            <select name="timeInForce" id="timeInForce" style="width: 100%;">
                <option value="GTC">Good 'til Cancelled (GTC)</option>
                <option value="IOC">Immediate or Cancel (IOC)</option>
                <option value="FOK">Fill or Kill (FOK)</option>
            </select>
        </div>

        <!-- Buttons -->
        <div style="text-align: center; margin-top: 15px;">
            <button type="button" class="btn cancel" onclick="UI.trade.close_tradeForm()">Close</button>
            <button type="button" class="btn next" onclick="UI.trade.submitNewTrade()">Create Trade</button>
        </div>
    </form>

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