{{define "account"}}
{{template "header" .HeaderData}}

<noscript style="display:inherit;">
    <div class="snackbar snackbar-warning">
        <div class="snackbar-message">
            <p>Javascript seems to be disabled. This will break some site features.</p>
        </div>
    </div>
</noscript>

<div class="pool-overview pt-4 pb-3 mb-3">
    <div class="container">

        <h1>Account Information</h1>

        <div class="row">
            <div class="col-lg-7 col-12 py-2">
                <div class="d-flex flex-column">
                    <div class="account-info-title pb-2">Account</div>
                    <div><span class="dcr-label">{{.AccountID}}</span></div>
                </div>
            </div>

            <div class="col-lg-5 col-12 py-2">
                <div class="d-flex flex-column">
                    <div class="account-info-title pb-2">Address</div>
                    <div><span class="dcr-label">{{.Address}}</span></div>
                </div>
            </div>
        </div>

    </div>
</div>


<div class="container">
    
    {{ if .PendingPayments }}
    <div class="row">
        <div class="col-12 p-3">
            <div class="block__content">

                <h1>Pending Payments</h1>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>Work Height</th>
                            <th>Created On</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody id="pending-payments-table">
                        {{ range .PendingPayments }}
                        <tr>
                            <td><a href="{{ .WorkHeightURL }}"
                                    rel="noopener noreferrer">{{ .WorkHeight }}</a></td>
                            <td>{{ .CreatedOn }}</td>
                            <td>{{ .Amount }}</td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>

                <div id="pending-payments-page-select" class="page-select"></div>

            </div>
        </div>
    </div>
    {{end}}

    <div class="row">
        <div class="col-12 p-3">
            <div class="block__content">
                <h1>Payments Received</h1>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>Work Height</th>
                            <th>Payment Height</th>
                            <th>Created On</th>
                            <th>Amount</th>
                            <th>Tx ID</th>
                        </tr>
                    </thead>
                    <tbody id="archived-payments-table">
                        {{ range .ArchivedPayments }}
                        <tr>
                            <td><a href="{{ .WorkHeightURL }}"
                                    rel="noopener noreferrer">{{ .WorkHeight }}</a></td>
                            <td><a href="{{ .PaidHeightURL }}"
                                    rel="noopener noreferrer">{{ .PaidHeight }}</a></td>
                            <td>{{ .CreatedOn }}</td>
                            <td>{{ .Amount }}</td>
                            <td><a href="{{ .TxURL }}"
                                    rel="noopener noreferrer">{{ .TxID }}</a>
                            </td>
                        </tr>
                        {{else}}
                        <tr>
                            <td colspan="100%"><span class="no-data">No payments received by account</span></td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
                
                <div id="archived-payments-page-select" class="page-select"></div>

            </div>
        </div>

    </div>
    
    <div class="row">
    
        <div class="col-lg-6 col-12 p-3">
            <div class="block__content">
                <h1>Blocks Mined</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Height</th>
                            <th>Confirmed</th>
                            <th>Miner</th>
                        </tr>
                    </thead>
                    <tbody id="blocks-by-account-table">
                        {{ range .MinedWork }}
                        <tr>
                            <td><a href="{{ .BlockURL}}" rel="noopener noreferrer">{{.BlockHeight}}</a></td>
                            <td>{{.Confirmed}}</td>
                            <td>{{.Miner}}</td>
                        </tr>
                        {{else}}
                        <tr>
                            <td colspan="100%"><span class="no-data">No mined blocks</span></td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>

                <div id="blocks-by-account-page-select" class="page-select"></div>

            </div>
        </div>


        <div class="col-lg-6 col-12 p-3">
            <div class="block__content">
                <h1>Connected Clients</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Miner</th>
                            <th>Hash Rate</th>
                        </tr>
                    </thead>
                    <tbody id="account-clients-table">
                        {{ range .ConnectedClients }}
                        <tr>
                            <td>{{.Miner}}</td>
                            <td>{{.HashRate}}</td>
                        </tr>
                        {{else}}
                        <tr>
                            <td colspan="100%"><span class="no-data">No connected clients</span></td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>

                <div id="account-clients-page-select" class="page-select"></div>

            </div>
        </div>

</div>

<script>
    var accountID = "{{.AccountID}}";
</script>
<script src='/assets/js/modal.js'></script>
<script src='/assets/js/pagination.js'></script>

</body>
</html>
{{end}}