{% extends 'layouts/base.html' %}
{% load static %}
{% block title %} STOCK MARKET | Dashboare {% endblock title %}
{% block extrastyle %}
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            max-width: 400px;
            width: 100%;
        }
        .search-container {
            padding: 16px;
            border-bottom: 1px solid #e0e0e0;
        }
        .search-input {
            width: 100%;
            padding: 8px 8px 8px 40px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 16px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
            background-repeat: no-repeat;
            background-position: 10px center;
        }
        .crypto-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .crypto-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #e0e0e0;
        }
        .crypto-item:last-child {
            border-bottom: none;
        }
        .crypto-info {
            display: flex;
            flex-direction: column;
        }
        .crypto-symbol {
            font-weight: 600;
        }
        .crypto-name {
            font-size: 14px;
            color: #666;
        }
        .crypto-price {
            text-align: right;
        }
        .crypto-price-value {
            font-weight: 600;
        }
        .crypto-price-change {
            font-size: 14px;
        }
        .positive-change {
            color: #4caf50;
        }
        .negative-change {
            color: #f44336;
        }
        .pagination {
            display: flex;
            justify-content: center;
            padding: 16px;
            border-top: 1px solid #e0e0e0;
        }
        .pagination button {
            margin: 0 4px;
            padding: 8px 12px;
            border: none;
            background-color: #e0e0e0;
            color: #333;
            cursor: pointer;
            border-radius: 4px;
        }
        .pagination button.active {
            background-color: #4caf50;
            color: white;
        }
        /* col-md-9 */
        .trading-card {
            background-color: #343a40;
            color: white;
        }
        .price-display {
            background-color: #212529;
            color: white;
        }
        .table-dark {
            background-color: #343a40;
        }
        .btn-sell {
            background-color: #28a745;
        }
        .btn-buy {
            background-color: #dc3545;
        }
        /*table */
        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
        }
        .trader-section {
            background-color: #263238;
            color: white;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .trader-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #37474F;
        }
        .trader-name {
            font-size: 18px;
            font-weight: bold;
        }
        .position-info {
            font-size: 14px;
        }
        .position-open {
            color: #4CAF50;
        }
        .position-closed {
            color: #FFC107;
        }
        .trader-stats {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #2E3B42;
            font-size: 14px;
        }
        .stat-item {
            text-align: right;
        }
        .stat-label {
            color: #B0BEC5;
        }
        .stat-value {
            font-weight: bold;
        }
        .trades-table {
            width: 100%;
            border-collapse: collapse;
        }
        .trades-table th,
        .trades-table td {
            padding: 10px;
            text-align: right;
            border-bottom: 1px solid #37474F;
        }
        .trades-table th {
            background-color: #2E3B42;
            color: #B0BEC5;
            font-weight: normal;
        }
        .trades-table td {
            font-size: 14px;
        }
        .positive {
            color: #4CAF50;
        }
        .negative {
            color: #F44336;
        }
        /*table*/

    </style>
    {% endblock extrastyle %}


{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="container">
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Search...">
        </div>
        <ul class="crypto-list">
            <li class="crypto-item">
                <div class="crypto-info">
                    <span class="crypto-symbol">BTCUSD</span>
                    <span class="crypto-name">Bitcoin / U.S. Dollar</span>
                </div>
                <div class="crypto-price">
                    <div class="crypto-price-value">67,871.00</div>
                    <div class="crypto-price-change negative-change">-0.22%</div>
                </div>
            </li>
            <li class="crypto-item">
                <div class="crypto-info">
                    <span class="crypto-symbol">ETHUSD</span>
                    <span class="crypto-name">Ethereum / U.S. Dollar</span>
                </div>
                <div class="crypto-price">
                    <div class="crypto-price-value">3,271.20</div>
                    <div class="crypto-price-change positive-change">+0.52%</div>
                </div>
            </li>
            <li class="crypto-item">
                <div class="crypto-info">
                    <span class="crypto-symbol">XRPUSD</span>
                    <span class="crypto-name">XRP / U.S. Dollar</span>
                </div>
                <div class="crypto-price">
                    <div class="crypto-price-value">0.60215</div>
                    <div class="crypto-price-change positive-change">+0.89%</div>
                </div>
            </li>
            <li class="crypto-item">
                <div class="crypto-info">
                    <span class="crypto-symbol">BCHUSD</span>
                    <span class="crypto-name">Bitcoin Cash / U.S. Dollar</span>
                </div>
                <div class="crypto-price">
                    <div class="crypto-price-value">394.65</div>
                    <div class="crypto-price-change positive-change">+0.56%</div>
                </div>
            </li>
            <li class="crypto-item">
                <div class="crypto-info">
                    <span class="crypto-symbol">LTCUSD</span>
                    <span class="crypto-name">Litecoin / U.S. Dollar</span>
                </div>
                <div class="crypto-price">
                    <div class="crypto-price-value">70.73</div>
                    <div class="crypto-price-change negative-change">-0.86%</div>
                </div>
            </li>
        </ul>
        <div class="pagination">
            <button class="active">1</button>
            <button>2</button>
            <button>Next</button>
        </div>
    </div>
            </div>
            <!--  -->
           <div class="col-md-9">
                <div class="col-12 col-md-12">
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        Today's Positions
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-3">
                                <strong>Net P&L</strong>
                                <p class="text-danger">₹ -50,060.00</p>
                            </div>
                            <div class="col-3">
                                <strong>Day's P&L</strong>
                                <p>₹ 0.00</p>
                            </div>
                            <div class="col-3">
                                <strong>Realized P&L</strong>
                                <p>₹ 0.00</p>
                            </div>
                            <div class="col-3">
                                <strong>Unrealized P&L</strong>
                                <p class="text-danger">₹ -50,060.00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      
        
        <div class="row mt-3">
            <div class="col-md-6">
                <div class="card trading-card">
                    <div class="card-body">
                        <h5 class="card-title">SUNTV AUG 820 CE</h5>
                        <div class="table-responsive">
                            <table class="table table-sm table-dark">
                                <thead>
                                    <tr>
                                        <th>Bid</th>
                                        <th>Orders</th>
                                        <th>Qty</th>
                                        <th>Offer</th>
                                        <th>Orders</th>
                                        <th>Qty</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-danger">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td class="text-success">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td class="text-danger">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td class="text-success">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td class="text-danger">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td class="text-success">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td class="text-danger">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td class="text-success">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td class="text-danger">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td class="text-success">0.00</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">SUNTV AUG FUT</h5>
                        <div class="price-display p-3 mb-3">
                            <h2 class="mb-0">94.75</h2>
                            <small>Market • Limit</small>
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <button class="btn btn-sell text-white">Sell</button>
                            <button class="btn btn-buy text-white">Buy</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Quantity</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Dharmender</td>
                                        <td>1</td>
                                        <td>1,98,000</td>
                                    </tr>
                                    <tr>
                                        <td>Ricky</td>
                                        <td>1</td>
                                        <td>2,05,586</td>
                                    </tr>
                                    <tr>
                                        <td>Aman</td>
                                        <td>1</td>
                                        <td>3,65,146</td>
                                    </tr>
                                    <tr>
                                        <td>Mahender</td>
                                        <td>1</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>Dharmender</td>
                                        <td>1</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>Ricky</td>
                                        <td>1</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-12 text-right">
                <button class="btn btn-danger">EXIT POSITIONS</button>
            </div>
        </div>
           </div>
        <div class="col-md-12">
            <div class="dashboard">
        <div class="trader-section">
            <div class="trader-header">
                <div class="trader-name">Dharmender Mangla</div>
                <div class="position-info">
                    Position: <span class="position-open">Open (5)</span> <span class="position-closed">Closed (4)</span>
                </div>
            </div>
            <div class="trader-stats">
                <div class="stat-item">
                    <div class="stat-label">NET P&L</div>
                    <div class="stat-value positive">46,897.65</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Realised</div>
                    <div class="stat-value">23,267.75</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Unrealised</div>
                    <div class="stat-value">23,629.90</div>
                </div>
            </div>
            <table class="trades-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Instrument</th>
                        <th>Qty</th>
                        <th>Buy Avg</th>
                        <th>Sell Avg</th>
                        <th>LTP</th>
                        <th>Day's P&L</th>
                        <th>Net P&L</th>
                        <th>Net chg %</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>NRML</td>
                        <td>NESTLEIND AUG FUT</td>
                        <td>200</td>
                        <td>2,532.80</td>
                        <td>0.00</td>
                        <td>2509.60</td>
                        <td>0.00</td>
                        <td class="negative">-4,640.00</td>
                        <td class="negative">-0.92 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>MARUTI AUG FUT</td>
                        <td>50</td>
                        <td>12,400.00</td>
                        <td>0.00</td>
                        <td>12276.40</td>
                        <td>0.00</td>
                        <td class="negative">-6,180.00</td>
                        <td class="negative">-1.00 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>CUMMINSIND AUG FUT</td>
                        <td>-300</td>
                        <td>0.00</td>
                        <td>3,666.45</td>
                        <td>3732.95</td>
                        <td>0.00</td>
                        <td class="negative">-19,950.00</td>
                        <td class="negative">-1.81 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>ACC AUG FUT</td>
                        <td>300</td>
                        <td>2,420.15</td>
                        <td>0.00</td>
                        <td>2355.85</td>
                        <td>0.00</td>
                        <td class="negative">-19,290.00</td>
                        <td class="negative">-2.66 %</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="trader-section">
            <div class="trader-header">
                <div class="trader-name">Ricky Gupta</div>
                <div class="position-info">
                    Position: <span class="position-open">Open (5)</span> <span class="position-closed">Closed (4)</span>
                </div>
            </div>
            <div class="trader-stats">
                <div class="stat-item">
                    <div class="stat-label">NET P&L</div>
                    <div class="stat-value positive">46,897.65</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Realised</div>
                    <div class="stat-value">23,267.75</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">Unrealised</div>
                    <div class="stat-value">23,629.90</div>
                </div>
            </div>
            <table class="trades-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Instrument</th>
                        <th>Qty</th>
                        <th>Buy Avg</th>
                        <th>Sell Avg</th>
                        <th>LTP</th>
                        <th>Day's P&L</th>
                        <th>Net P&L</th>
                        <th>Net chg %</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>NRML</td>
                        <td>NESTLEIND AUG FUT</td>
                        <td>200</td>
                        <td>2,532.80</td>
                        <td>0.00</td>
                        <td>2509.60</td>
                        <td>0.00</td>
                        <td class="negative">-4,640.00</td>
                        <td class="negative">-0.92 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>MARUTI AUG FUT</td>
                        <td>50</td>
                        <td>12,400.00</td>
                        <td>0.00</td>
                        <td>12276.40</td>
                        <td>0.00</td>
                        <td class="negative">-6,180.00</td>
                        <td class="negative">-1.00 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>CUMMINSIND AUG FUT</td>
                        <td>-300</td>
                        <td>0.00</td>
                        <td>3,666.45</td>
                        <td>3732.95</td>
                        <td>0.00</td>
                        <td class="negative">-19,950.00</td>
                        <td class="negative">-1.81 %</td>
                    </tr>
                    <tr>
                        <td>NRML</td>
                        <td>ACC AUG FUT</td>
                        <td>300</td>
                        <td>2,420.15</td>
                        <td>0.00</td>
                        <td>2355.85</td>
                        <td>0.00</td>
                        <td class="negative">-19,290.00</td>
                        <td class="negative">-2.66 %</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        </div>
    </div>
</div>

    {% endblock content %}