<!DOCTYPE html>
<html>

<head>
    <title>delphi.market</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="stylesheet" href="/css/index.css" />
    <link rel="stylesheet" href="/market.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#091833" />
    {{ if eq .ENV "development" }}
    <script defer src="/hotreload.js"></script>
    {{ end }}
</head>

<body>
    <header class="flex flex-row text-center justify-center pt-1">
        <nav>
            <a href="/">home</a>
            {{ if .session }}
            <a href='/user'>user</a>
            {{ else }} <a href="/login">login</a> {{ end }}
        </nav>
    </header>
    <div class="container flex flex-column text-center">
        <code>
        <strong>
          <pre>
                      _        _   
 _ __ ___   __ _ _ __| | _____| |_ 
| '_ ` _ \ / _` | '__| |/ / _ \ __|
| | | | | | (_| | |  |   <  __/ |_ 
|_| |_| |_|\__,_|_|  |_|\_\___|\__|</pre>
        </strong>
      </code>
        <div class="font-mono mb-1">{{.Description}}</div>
        <div class="align-left">
            <span class="font-mono mb-1"><strong>Order Book</strong></span>
            <table class="w-100p mb-1">
                <tr>
                    <th class="align-left"></th>
                    <th class="align-right"></th>
                </tr>
                {{ range .Orders }}
                <tr class='{{ if eq .Side "BUY" }}yes{{ else }}no{{ end }}'>
                    <td class="align-center">{{ .Side }}</td>
                    <td class="align-center">{{ .Share.Description }}</td>
                    <td class="align-right">{{.Quantity}} @ {{.Price}} ⚡</td>
                </tr>
                {{ end }}
            </table>
        </div>
        <hr />
        <div class="align-left">
            <span class="font-mono mb-1"><strong>Order Form</strong></span>
            <form id="form" class="order-form" action="/market/{{$.Id}}/order" method="post">
                <button id="buy" type="button" class="order-button yes w-100p selected">BUY</button>
                <button id="sell" type="button" class="order-button no w-100p">SELL</button>
                <input id="market-id" hidden name="market_id" value="{{$.Id}}" />
                <input id="side" hidden name="side" value="BUY" />
                <label>share</label>
                <select name="share_id">
                    <option value="{{.YesShare.Id}}">YES</option>
                    <option value="{{.NoShare.Id}}">NO</option>
                </select>
                <label>quantity</label>
                <input id="quantity" type="number" name="quantity" placeholder="quantity" />
                <label>price [sats ⚡]</label>
                <input id="price" type="number" name="price" placeholder="price" />
                <label id="submit-label"></label>
                <button type="submit">SUBMIT</button>
            </form>
        </div>
    </div>
</body>
<script src="/order.js"></script>

</html>