{{!-- <p>This is my handlebars home page</p>
<p>{{stuff}}</p>
<p>{{ jArray.cars}}</p> --}}

<div class="container text-center">
    <div class="row">
        <div class="col-sm-12">
            <h1>Stocks Dashboard</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-2">
            <h3>Top Gainers</h3>
        </div>
        <div class="col-sm-10">&nbsp;</div>
    </div>

    <div class="row">
        <div class="col-3"><h5>Stock Name</h6></div>
        <div class="col-3"><h5>Price</h6></div>
        <div class="col-3"><h5>Percent Change</h6></div>
        <div class="col-3"><h5>Overall Rating</h6></div>
    </div>

    {{#each trendingStocks.trending_stocks.top_gainers}}
        <div class="row">
            <div class="col-3">{{company_name}}</div>
            <div class="col-3">{{price}}</div>
            <div class="col-3">{{percent_change}}</div>
            <div class="col-3">{{overall_rating}}</div>
        </div>
    {{/each}}

    <div class="row">
        <div class="col-sm-2">
            <h3>Top Losers</h3>
        </div>
        <div class="col-sm-10">&nbsp;</div>
    </div>

    <div class="row">
        <div class="col-3"><h5>Stock Name</h6></div>
        <div class="col-3"><h5>Price</h6></div>
        <div class="col-3"><h5>Percent Change</h6></div>
        <div class="col-3"><h5>Overall Rating</h6></div>
    </div>

    {{#each trendingStocks.trending_stocks.top_losers}}
        <div class="row">
            <div class="col-3">{{company_name}}</div>
            <div class="col-3">{{price}}</div>
            <div class="col-3">{{percent_change}}</div>
            <div class="col-3">{{overall_rating}}</div>
        </div>
    {{/each}}
    
</div>