<!-- The popup for trade details -->
<div class="form-popup" id="trade_details_form" style="display: none; overflow: hidden; position: absolute; border-radius: 10px;">

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

    <!-- Main Content -->
    <div class="form-container" style="padding: 15px;">
        <div style="display: grid; grid-template-areas:
                                      '. b g c h .'
                                      '. b g c h .'
                                      'f f f f f f'
                                      '. d i e j .'
                                      '. d i e j .'
                                      'z z z z z z';">
            <div id='td_labels' style="grid-area: b;">
                <p class = 'd_lbl'>ID:</p>
                <p class = 'd_lbl'>Owner:</p>
                <p class = 'd_lbl'>Order type:</p>
                <p class = 'd_lbl'>TIF:</p>
                <p class = 'd_lbl'>Side:</p>
                <p class = 'd_lbl'>Quantity:</p>
                <p class = 'd_lbl'>Symbol:</p>
            </div>
            <div id='td' style="grid-area: g;">
                <p class = 'details' id="id_d">3f23ff2323f423</p>
                <p class = 'details' id="onr_d">exchange</p>
                <p class = 'details' id="ot_d">Market</p>
                <p class = 'details' id="tif_d">FOK</p>
                <p class = 'details' id="sd_d">Buy</p>
                <p class = 'details' id="qty_d">0.0041</p>
                <p class = 'details' id="sym_d">BTCUSDT</p>
            </div>

            <div id='tradeUp_lbl' style="grid-area: c;">
                <p class = 'd_lbl'>Opening price:</p>
                <p class = 'd_lbl'>Current price:</p>
                <p class = 'd_lbl'>Opening Value:</p>
                <p class = 'd_lbl'>Current Value:</p>
                <p class = 'd_lbl'>Profit/loss:</p>
                <p class = 'd_lbl'>P/L %:</p>
                <p class = 'd_lbl'>Fees Paid:</p>
            </div>
            <div id='tradeUp' style="grid-area: h;">
                <p class = 'details' id="op_d">27,765.00</p>
                <p class = 'details' id="cp_d">24,765.00</p>
                <p class = 'details' id="ov_d">500.00</p>
                <p class = 'details' id="cv_d">600.00</p>
                <p class = 'details' id="pl_d">100.00</p>
                <p class = 'details' id="plp_d">87</p>
                <p class = 'details' id="fp_d">12.00</p>
            </div>
            <hr style="grid-area: f; width:80%">
            <div id='stus_lbl' style="grid-area: d;">
                <p class = 'd_lbl'>Status:</p>
                <p class = 'd_lbl'>Qty Filled:</p>
            </div>
            <div id='status' style="grid-area: i;">
                <p class = 'details' id="status_d">Active</p>
                <p class = 'details' id="q_fld_d">0.0012</p>
            </div>
            <div id='stld_lbl' style="grid-area: e;">
                <p class = 'd_lbl'>Qty Settled:</p>
                <p class = 'd_lbl'>Settled Price:</p>
                <p class = 'd_lbl'>Settled Value:</p>
            </div>
            <div id='settled' style="grid-area: j;">
                <p class = 'details' id="q_set">0.0023</p>
                <p class = 'details' id="price_set">24,300</p>
                <p class = 'details' id="val_set">53,987</p>
            </div>
            <div style="grid-area: z; text-align: center; margin-top: 15px;">
                <button style="margin-left:0;" type="button" class="btn cancel" onclick="UI.trade.close_tradeDetails_Form()">Close</button>
            </div>
        </div>
    </div>

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