{% extends "base.html" %}
{% block content %}
<nav class="navbar navbar-expand-md fixed-top navbar-transparent" color-on-scroll="150">
    <div class="container">
        <div class="navbar-translate">
            <button class="navbar-toggler navbar-toggler-right navbar-burger" type="button" data-toggle="collapse"
                    data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-bar"></span>
                <span class="navbar-toggler-bar"></span>
                <span class="navbar-toggler-bar"></span>
            </button>
            <a class="navbar-brand" href={{"/"+token}}>Token Explorer</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="https://ranchimall.net" target="_blank" class="nav-link"><i
                            class="nc-icon nc-shop"></i> Ranchi Mall</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom"
                       href="https://www.facebook.com/ranchimall" target="_blank">
                        <i class="fa fa-facebook-square"></i>
                        <p class="d-lg-none">Facebook</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
                       href="https://www.medium.com/ranchimall" target="_blank">
                        <i class="fa fa-medium"></i>
                        <p class="d-lg-none">Medium</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom"
                       href="https://www.github.com/ranchimall" target="_blank">
                        <i class="fa fa-github"></i>
                        <p class="d-lg-none">GitHub</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="wrapper">
    <div class="page-header page-header-xs" data-parallax="true"
         style="background-image: url('../static/img/abstract-art-astronomy.jpg');">
        <div class="filter"></div>
        <div class="content-center">
            <div class="container">
                <div class="title-brand">
                    <!--<h7 class="presentation-title">RMT Explorer</h7>-->
                </div>
            </div>
        </div>
    </div>

    <!-- Stuff below the top image -->
    <div class="main">
        <div class="section section-buttons">
            <div class="container">
                <div class="tim-title">
                    <h2>{{token.upper()}} Token Balance</h2>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <form action="" method="post" novalidate>
                            <div class="form-group">
                                <!--<input type="text" class="form-control" placeholder="Enter FLO address">-->
                                {{ form.hidden_tag() }}
                                {{ form.address(class="form-control", placeholder="Enter FLO address", length=34) }}
                                {% for error in form.address.errors %}
                                <span style="color: red;">[{{ error }}]</span>
                                {% endfor %}
                                {% if balance %}
                                <div class="ml-auto mr-auto">
                                    <br/>
                                    <p>Balance - {{balance}} RMT<a href={{token+'/transactions?sourceFloAddress='+form.address.data+'&destFloAddress='+form.address.data}} class="btn btn-link btn-info">Related transactions</a></p>
                                </div>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Start of tables  -->
                <div class="content">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-plain">
                                <div class="tim-title">
                                    <h3>Latest Transactions</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead class=" text-primary">
                                            <th>
                                                Block no.
                                            </th>
                                            <th>
                                                Sender
                                            </th>
                                            <th>
                                                Receiver
                                            </th>
                                            <th>
                                                Amount
                                            </th>
                                            <th>
                                                View @ Block explorer
                                            </th>
                                            </thead>
                                            <tbody>
                                            {% for item in transactionHistoryTable %}
                                            <tr>
                                                <td>{{item[1]}}</td>
                                                <td>{{item[2]}}</td>
                                                <td>{{item[3]}}</td>
                                                <td>{{item[4]}}</td>
                                                <td class="text-center">
                                                    <a href={{item[5]}} target="_blank"
                                                       class="nc-icon nc-alert-circle-i">
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                        <div class="col-md-6 ml-auto mr-auto text-center">
                                            <a href={{token+'/transactions'}}> <btn class="btn btn-outline-default btn-round"><i
                                                    class="nc-icon nc-paper"></i>
                                                View all
                                            </btn>
                                                </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Table 2 -->
                        <div class="col-md-12">
                            <div class="card card-plain">
                                <div class="tim-title">
                                    <h3>Balances</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead class=" text-primary">
                                            <th>
                                                Address
                                            </th>
                                            <th>
                                                Balance
                                            </th>
                                            </thead>
                                            <tbody>
                                            {% for item in balanceTable %}
                                            <tr>
                                                <td>{{item[0]}}</td>
                                                <td>{{item[1]}}</td>
                                            </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- End of tables  -->
            </div>
        </div>

        <!-- START OF BUTTON SHIZ-->
        <!--END OF BUTTON SHIZ-->
    </div>
</div>
{% endblock %}