{% extends 'base.html' %}{% block title %}Trading desk · Quantzy{% endblock %}
{% block content %}
<div class="algo-app trading-desk" data-desk data-selected="{{ selected }}">
  <section class="algo-heading"><div><p class="eyebrow" data-i18n="your_account">YOUR TRADING ACCOUNT</p><h1 data-i18n="trading_desk">Trading desk</h1><p data-i18n="desk_intro">Your broker, orders and positions. Together, in one place.</p></div><a class="button secondary" href="/account/my-algos" data-i18n="my_algos">My Algos</a></section>
  {% if profiles %}
  <div class="desk-account-bar"><span class="broker-icon" aria-hidden="true">A</span><div><strong data-broker-name>{{ brokers.get(profiles[0].broker,profiles[0].broker) }}</strong><small data-account-label>{{ profiles[0].label }}</small></div>{% if profiles|length>1 %}<label>Account<select data-profile>{% for p in profiles %}<option value="{{ p.id }}" data-broker="{{ p.broker }}" data-broker-name="{{ brokers.get(p.broker,p.broker) }}" data-label="{{ p.label }}">{{ p.label }}</option>{% endfor %}</select></label>{% else %}<input type="hidden" data-profile value="{{ profiles[0].id }}" data-broker="{{ profiles[0].broker }}" data-broker-name="{{ brokers.get(profiles[0].broker,profiles[0].broker) }}" data-label="{{ profiles[0].label }}">{% endif %}<span class="desk-status" data-connection-state role="status">Checking connection…</span><button type="button" class="button secondary small" data-refresh-desk data-i18n="refresh">Refresh</button></div>
  <div class="desk-feedback" role="status" data-desk-feedback>Loading your broker status…</div>
  <div class="desk-tabs" role="tablist" aria-label="Trading account">
    <button id="tab-positions" type="button" role="tab" aria-controls="panel-positions" aria-selected="{{ 'true' if selected=='positions' else 'false' }}" data-tab="positions" data-i18n="positions">Positions</button>
    <button id="tab-orders" type="button" role="tab" aria-controls="panel-orders" aria-selected="{{ 'true' if selected=='orders' else 'false' }}" data-tab="orders" data-i18n="orders">Orders</button>
    <button id="tab-connection" type="button" role="tab" aria-controls="panel-connection" aria-selected="{{ 'true' if selected=='connection' else 'false' }}" data-tab="connection" data-i18n="broker_connection">Broker connection</button>
  </div>
  <section id="panel-positions" role="tabpanel" aria-labelledby="tab-positions" tabindex="0" {% if selected!='positions' %}hidden{% endif %}>
    <div class="book-toolbar"><div><h2 data-i18n="positions">Positions</h2><p>All positions in this broker account, including trades placed outside Quantzy.</p></div><span class="freshness-note" data-freshness="positions">Not checked yet</span></div>
    <div data-book="positions" class="book-container"><div class="book-empty">Checking your broker connection…</div></div>
  </section>
  <section id="panel-orders" role="tabpanel" aria-labelledby="tab-orders" tabindex="0" {% if selected!='orders' %}hidden{% endif %}>
    <div class="book-toolbar"><div><h2 data-i18n="orders">Orders</h2><p>The order book returned by Angel One. Quantzy does not generate sample orders.</p></div><span class="freshness-note" data-freshness="orders">Not checked yet</span></div>
    <div data-book="orders" class="book-container"><div class="book-empty">Checking your broker connection…</div></div>
  </section>
  <section id="panel-connection" role="tabpanel" aria-labelledby="tab-connection" tabindex="0" {% if selected!='connection' %}hidden{% endif %}>
    <div class="connect-layout"><div class="panel connect-card"><div class="connect-card-heading"><span class="broker-icon" aria-hidden="true">A</span><div><h2>Connect Angel One</h2><p>Sign in here. Your account stays with Angel One.</p></div></div>
      <div data-prepare-panel hidden><p>Prepare your connection once, then sign in here.</p><button type="button" class="button full" data-prepare-button>Prepare connection →</button><p data-prepare-message role="status"></p></div>
      <form data-broker-login autocomplete="off"><input type="hidden" name="csrf" value="{{ csrf_token() }}">
        <label>Client ID<input name="clientcode" maxlength="24" pattern="[A-Za-z0-9]{3,24}" required autocomplete="off" placeholder="Your Angel One client ID"></label>
        <div class="grid-two"><label>Trading PIN<input name="pin" type="password" inputmode="numeric" pattern="[0-9]{4,6}" minlength="4" maxlength="6" required autocomplete="off" placeholder="Your PIN"></label><label>Current TOTP<input name="totp" type="password" inputmode="numeric" pattern="[0-9]{6}" minlength="6" maxlength="6" required autocomplete="one-time-code" placeholder="6-digit code"></label></div>
        <label data-app-2fa hidden>Quantzy authenticator code<input name="app_totp" type="password" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code"></label>
        <p class="fine muted">Use the current code from your authenticator app. Your PIN and TOTP are not saved.</p>
        <button type="submit" class="button full" data-connect-button>Connect securely →</button><p class="fine" data-connect-message role="status"></p>
      </form>
    </div><div class="connection-health panel"><p class="eyebrow">CONNECTION HEALTH</p><h2>Know where you stand.</h2><dl><div><dt>Broker sign-in</dt><dd data-health="auth">Not checked</dd></div><div><dt>Order book</dt><dd data-health="orders">Not checked</dd></div><div><dt>Positions</dt><dd data-health="positions">Not checked</dd></div></dl><p class="fine muted">A working connection does not mean an algo is running. Start and stop algos in My Algos.</p><a href="/account/my-algos">Open My Algos →</a><details class="advanced-connection"><summary>Connection settings</summary><p>Verified outgoing IP: <strong>{{ profiles[0].egress_ip or 'Not available' }}</strong></p><a href="/account/broker?profile={{ profiles[0].id }}">Manage API and network settings →</a></details></div></div>
  </section>
  <p class="desk-disclosure">Read-only account view. To modify orders or close positions, use Angel One. Broker data is refreshed on request; check the timestamp before relying on it.</p>
  {% else %}
  <div class="connect-welcome panel"><span class="broker-icon" aria-hidden="true">A</span><h2>Bring your broker to Quantzy.</h2><p>Set up your Angel One API connection once. Then sign in, check health and view your orders here.</p><a href="/account/help">See how it works</a></div>{% include 'broker_form.html' %}
  {% endif %}
</div>
{% endblock %}