<!-- user populate.ejs my trading page  -->

<style>
    #userInfo {
        line-height: 50px;
        text-align: center;
        color: crimson;
        margin: 5px;
    }
</style>

<div class="container">
    <section class="hero is-white">
        <div class="hero-body">
            <p class="title">
                Stock Ditalization & Simulation Trading Platform
            </p>
            <p class="subtitle">
                My Transaction Record
            </p>
        </div>
    </section>
</div>

<div class="container">
    <div class="columns is-mobile is-multiline">
        <div class="column" id="userInfo">The Wallet Balance: $<%= user.balances %>
        </div>
        <div class="column " id="userInfo">Total Assets: $<%= user.assets %>
        </div>
        <% if (user.tradeStatus==1) {%>
            <div class="column " id="userInfo">Trading Status: normal</div>
            <% } else { %>
                <div class="column " id="userInfo">Trading Status: locked</div>
                <% } %>
                    <% if (user.balances>= 25000) {%>
                        <div class="column " id="userInfo">T+0 Trading limitation: unlimited</div>
                        <% } else { %>
                            <div class="column " id="userInfo">T+0 Trading limitation (For only buying): <%=
                                    user.tradeCount %>
                            </div>
                            <% } %>
    </div>
</div>

<div class="tile is-ancestor" style="padding-top: 50px;">

    <div class="tile is-vertical">

        <div class="section">
            <div class="columns">
                <div class="column is-four-fifths is-offset-1">
                    <!-- Purchased Stocks (持有股) -->
                    <p class="title notification"><strong>Purchased Stocks</strong></p>
                    <div class="columns">
                        <div class="column is-three-fifths is-offset-one-fifth">
                            <div class="tile is-parent" style="padding-left: 50px;">
                                <div class="tile is-vertical is-4">
                                    <% user.clients.forEach( function(symbol) { %>
                                        <% if (symbol.valid==0) { %>
                                            <nav class="level is-child is-mobile is-multiline">
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">ID</p>
                                                        <p class="subtitle">
                                                            <%= symbol.id %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Stock Symbol</p>
                                                        <p class="subtitle">
                                                            <%= symbol.symbolTitle %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Total Revenue</p>
                                                        <p class="subtitle"> $<%= symbol.totalRevenue %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Total Cost</p>
                                                        <p class="subtitle"> $<%= symbol.totalCost %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Holding Volumns: </p>
                                                        <p class="subtitle">
                                                            <%= symbol.totalVolume %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Date</p>
                                                        <p class="subtitle">
                                                            <%= symbol.datetime %>
                                                        </p>
                                                    </div>
                                                </div>
                                            </nav>
                                        <% } }); %>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns">
                <div class="column is-four-fifths is-offset-1">
                    <!-- Sold Stocks - (已清仓股) -->
                    <p class="title notification"><strong>Cleared Stocks</strong></p>
                    <div class="columns">
                        <div class="column is-three-fifths is-offset-one-fifth">
                            <div class="tile is-parent" style="padding-left: 50px;">
                                <div class="tile is-vertical">
                                    <% user.clients.forEach( function(symbol) { %>
                                        <% if (symbol.valid==1) { %>
                                            <nav class="level is-child is-mobile is-multiline">
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">ID</p>
                                                        <p class="subtitle">
                                                            <%= symbol.id %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Stock Symbol</p>
                                                        <p class="subtitle">
                                                            <%= symbol.symbolTitle %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Total Revenue</p>
                                                        <p class="subtitle"> $<%= symbol.totalRevenue %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Total Cost</p>
                                                        <p class="subtitle"> $<%= symbol.totalCost %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Total Volume</p>
                                                        <p class="subtitle">
                                                            <%= symbol.totalVolume %>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered" style="padding-right: 50px;">
                                                    <div>
                                                        <p class="heading">Date</p>
                                                        <p class="subtitle">
                                                            <%= symbol.datetime %>
                                                        </p>
                                                    </div>
                                                </div>
                                            </nav>
                                            <% } }); %>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Selected Stocks -->
            <div class="columns">
                <div class="column is-four-fifths is-offset-1">
                    <p class="title notification"><strong>Selected Stocks</strong></p>
                    <div class="tile is-parent">

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

