<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2020 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div id="funding_monitors_page" class="paginated page">
    <script type="text/x-handlebars-template">
        <section class="content-header">
            <h1>{{i18n "funding_monitors"}}</h1>
            <div style="position:absolute;top:9px;right:9px;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#start_funding_monitor_modal" data-i18n="start_monitor">Start Monitor</button>
            </div>
        </section>
        <section class="content">
            {{#if errorMessage}}
            <div class="alert alert-danger" role="alert">{{ errorMessage }}</div>
            {{/if}}
            <div class="data-container {{when isLoading 'data-loading' isEmpty 'data-empty'}}">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>{{i18n "account"}}</th>
                        <th>{{i18n "property"}}</th>
                        <th>{{i18n "amount"}}</th>
                        <th>{{i18n "threshold"}}</th>
                        <th>{{i18n "interval"}}</th>
                        <th>{{i18n "action"}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{#each monitors}}
                            <tr>
                                <td>{{{accountFormatted}}}</td>
                                <td>{{property}}</td>
                                <td>{{{amountFormatted}}}</td>
                                <td>{{{thresholdFormatted}}}</td>
                                <td>{{interval}}</td>
                                <td>{{{statusLinkFormatted}}}&nbsp{{{stopLinkFormatted}}}</td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
                <div class="data-loading-container"><img src="img/loading_indicator.gif" alt="Loading..." width="32" height="32" /></div>
                <div class="data-empty-container">
                    <p>
                        <span data-i18n="no_monitors">There are no account monitors</span>.
                    </p>
                </div>
                <div class="data-pagination"></div>                
            </div>
        </section>
    </script>
</div>

<div id="funding_monitor_status_page" class="paginated page">
    <script type="text/x-handlebars-template">
        <section class="content-header">
            <h1>{{i18n "funding_monitor_status"}}</h1>
            <div style="position:absolute;top:9px;right:9px;">
                <button type="button" class="btn btn-default" onclick="NRS.goToPage('funding_monitors')" data-i18n="funding_monitors">Funding Monitors</button>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#add_monitored_account_modal" data-i18n="add_monitored_account">Add Monitored Account</button>
            </div>
        </section>
        <section class="content">
            <div style="float:right;color: #999999;background:white;padding:5px;border:1px solid #ccc;border-radius:3px">
                <strong data-i18n="funding_account">Funding Account</strong>: <span>{{{fundingAccountFormatted}}}</span><br />
                <strong data-i18n="control_property">Control Property</strong>: <span>{{controlProperty}}</span><br />
            </div>
            {{#if errorMessage}}
            <div class="alert alert-danger" role="alert">{{ errorMessage }}</div>
            {{/if}}
            <div class="data-container {{when isLoading 'data-loading' isEmpty 'data-empty'}}">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>{{i18n "account"}}</th>
                        <th>{{i18n "amount"}}</th>
                        <th>{{i18n "threshold"}}</th>
                        <th>{{i18n "interval"}}</th>
                        <th>{{i18n "action"}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{#each monitoredAccount}}
                            <tr>
                                <td>{{{accountFormatted}}}</td>
                                <td>{{{amountFormatted}}}</td>
                                <td>{{{thresholdFormatted}}}</td>
                                <td>{{{intervalFormatted}}}</td>
                                <td>{{{removeLinkFormatted}}}</td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
                <div class="data-loading-container"><img src="img/loading_indicator.gif" alt="Loading..." width="32" height="32" /></div>
                <div class="data-empty-container">
                    <p>
                        <span data-i18n="no_monitored_accounts">There are no account monitored by this funding monitor</span>.
                    </p>
                </div>
                <div class="data-pagination"></div>
            </div>
        </section>
    </script>
</div>