<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Marketron</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/oatm.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="icon" type="image/x-icon" href="img/logo.png">
    <style>
        /* OATM card colors */
        .oatm-card.buy-order,
        .oatm-card.buy-accepted {
            background-color: rgba(0, 255, 0, 0.1) !important;
        }

        .oatm-card.sell-order,
        .oatm-card.sell-accepted {
            background-color: rgba(255, 0, 0, 0.1) !important;
        }

        .oatm-card.trade {
            background-color: rgba(0, 128, 128, 0.1) !important;
        }

        /* Increase OATM container height */
        .oatm-container {
            height: 600px !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <div class="logo-title">
                    <img src="img/logo.png" alt="Marketron Logo" class="header-logo">
                    <h1>arketron</h1>
                </div>
                <div class="header-controls">
                    <div class="header-right">
                        <button id="simulationButton" class="simulation-button" title="Simulate Trading">
                            <svg class="simulation-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                                <path d="M7 16l-4-4m0 0l4-4"></path>
                            </svg>
                            <span class="simulation-text">Simulate</span>
                        </button>
                        <button id="resetButton" class="reset-button" title="Reset Marketron">
                            <svg class="reset-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                                <path d="M3 3v5h5"></path>
                            </svg>
                            <span class="reset-text">Reset</span>
                        </button>
                        <button id="themeToggle" class="theme-toggle">
                            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                            </svg>
                            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="5"></circle>
                                <line x1="12" y1="1" x2="12" y2="3"></line>
                                <line x1="12" y1="21" x2="12" y2="23"></line>
                                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                                <line x1="1" y1="12" x2="3" y2="12"></line>
                                <line x1="21" y1="12" x2="23" y2="12"></line>
                                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                            </svg>
                            <span class="mode-text">Dark Mode</span>
                        </button>
                        <a href="https://vrushankpatel.github.io" class="profile-link" target="_blank" rel="noopener noreferrer">
                            <img src="img/android-chrome-192x192.png" alt="Vrushank Patel" class="profile-pic">
                            <span>Vrushank Patel</span>
                        </a>
                    </div>
                </div>
            </div>
        </header>
        
        <div class="main-content">
            <section class="market-data">
                <h2 class="d-flex align-items-center">Market Data
                    <button type="button" class="btn btn-outline-warning btn-sm ms-2 p-1 d-inline-flex align-items-center" 
                            style="min-width: fit-content; width: auto;"
                            data-bs-toggle="tooltip" 
                            data-bs-placement="right" 
                            title="The market data in this simulator is fictional and not intended for real-world trading or investment.">
                        <svg class="m-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                        </svg>
                    </button>
                </h2>
                <div class="ticker-container" id="tickerContainer">
                </div>
                <div class="terminal">
                    <div class="terminal-header">
                        <select id="chartSymbol">
                        </select>
                        <span class="terminal-controls">
                            <button class="time-button" data-time="1">1M</button>
                            <button class="time-button" data-time="5">5M</button>
                            <button class="time-button active" data-time="15">15M</button>
                        </span>
                    </div>
                    <canvas id="priceChart"></canvas>
                </div>
            </section>

            <section class="order-entry">
                <h2>New Order</h2>
                <form id="orderForm">
                    <div class="form-group">
                        <label for="symbol">Symbol:</label>
                        <select id="symbol" required>
                            <option value="" disabled selected>Select a symbol</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="orderType">Order Type:</label>
                        <select id="orderType" required>
                            <option value="MARKET">Market</option>
                            <option value="LIMIT">Limit</option>
                            <option value="STOP">Stop</option>
                            <option value="STOP_LIMIT">Stop Limit</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="side">Side:</label>
                        <select id="side" required>
                            <option value="BUY">Buy</option>
                            <option value="SELL">Sell</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="quantity">Quantity:</label>
                        <input type="number" id="quantity" min="1" required>
                    </div>

                    <div class="form-group price-field">
                        <label for="price">Price:</label>
                        <input type="number" id="price" step="0.01">
                    </div>

                    <div class="form-group stop-price-field">
                        <label for="stopPrice">Stop Price:</label>
                        <input type="number" id="stopPrice" step="0.01">
                    </div>

                    <div class="form-group">
                        <label for="orderCategory">Order Category:</label>
                        <select id="orderCategory" required>
                            <option value="SINGLE">Single</option>
                            <option value="COMBO">Combo</option>
                        </select>
                    </div>

                    <div class="combo-fields" style="display: none;">
                        <h3>Combo Legs</h3>
                        <div class="form-group">
                            <label for="legSymbol">Leg Symbol:</label>
                            <select id="legSymbol">
                                <option value="" disabled selected>Select a symbol</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="legRatio">Ratio:</label>
                            <input type="number" id="legRatio" value="1" min="1">
                        </div>
                        <div class="form-group">
                            <label for="legSide">Leg Side:</label>
                            <select id="legSide">
                                <option value="BUY">Buy</option>
                                <option value="SELL">Sell</option>
                            </select>
                        </div>
                        <button id="addLeg" class="secondary-button">Add Leg</button>
                        <div id="comboLegsContainer"></div>
                    </div>

                    <div class="fix-fields collapsed">
                        <div class="fix-header" onclick="orderEntry.toggleFixFields(event)">
                            <h3>FIX Protocol Fields (Optional)</h3>
                            <span class="expand-icon">+</span>
                        </div>
                        <div class="fix-content">
                            <div class="form-group">
                                <label for="senderCompId">Sender Comp ID:</label>
                                <input type="text" id="senderCompId" placeholder="CMP000001" value="CMP000001">
                            </div>
                            <div class="form-group">
                                <label for="senderSubId">Sender Sub ID:</label>
                                <input type="text" id="senderSubId" placeholder="SUB000001" value="SUB000001">
                            </div>
                            <div class="form-group">
                                <label for="targetCompId">Target Comp ID:</label>
                                <input type="text" id="targetCompId" placeholder="CMP000001" value="CMP000001">
                            </div>
                        </div>
                    </div>

                    <button type="submit">Place Order</button>
                </form>
            </section>

            <section class="order-book">
                <h2>Order Book</h2>
                <div class="order-book-container">
                    <div class="bids" id="bids">
                        <h3>Bids</h3>
                    </div>
                    <div class="asks" id="asks">
                        <h3>Asks</h3>
                    </div>
                </div>
            </section>

            <section class="trades">
                <h2>Trade Monitor</h2>
                <div class="trades-container" id="tradesContainer">
                </div>
            </section>

            <section class="oatm">
                <h2>Order Audit Trail Monitor (OATM)</h2>
                <div class="oatm-container" id="oatmContainer" style="height: 600px;">
                    <div class="oatm-header">
                        <div class="client-side">Client</div>
                        <div class="marketron-side">Marketron</div>
                    </div>
                    <div class="oatm-timeline-wrapper">
                        <div class="oatm-timeline" id="oatmTimeline">
                            <!-- Timeline entries will be added here dynamically -->
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <footer class="developer-info">
            <p>
                Developed & Maintained by 
                <a href="https://vrushankpatel.github.io" target="_blank" rel="noopener noreferrer">
                    Vrushank Patel
                </a>
            </p>
        </footer>
    </div>

    <script src="js/utils/crypto.js"></script>
    <script src="js/utils/snackbar.js"></script>
    <script src="js/services/persistenceService.js"></script>
    <script src="js/constants/marketSymbols.js"></script>
    <script src="js/orderBook.js"></script>
    <script src="js/orderEntry.js"></script>
    <script src="js/marketData.js"></script>
    <script src="js/orderMatching.js"></script>
    <script src="js/themeToggle.js"></script>
    <script src="js/resetService.js"></script>
    <script src="js/oatm.js"></script>
    <script src="js/services/simulationService.js"></script>
    <script>
        // Initialize all tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
</body>
</html> 