<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ 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="active_shufflings_page" class="paginated page">
    <section class="content-header">
        <h1 data-i18n="active_shufflings">Active Shufflings</h1>
    </section>
    <section class="content">
        <div id="active_shufflings">
            <script type="text/x-handlebars-template">
                <div class="alert alert-info" role="alert">{{i18n "shuffling_node_running_warning"}}</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 "shuffling"}}</th>
                                <th>{{i18n "stage"}}</th>
                                <th>{{i18n "holding"}}</th>
                                <th class="numeric">{{i18n "amount"}}</th>
                                <th>{{i18n "blocks_remaining"}}</th>
                                <th>{{i18n "participants"}}</th>
                                <th>{{i18n "assignee"}}</th>
                                <th>{{i18n "status"}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each shufflings}}
                                <tr>
                                    <td>{{{shufflingFormatted}}}</td>
                                    <td>{{stageLabel}}</td>
                                    <td>{{{holdingFormatted}}}</td>
                                    <td class="numeric">{{{amountFormatted}}}</td>
                                    <td>{{blocks}}</td>
                                    <td>{{participants}}</td>
                                    <td>{{{assigneeFormatted}}}</td>
                                    <td>{{{status}}}</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_shufflings">There are no shufflings</span>.
                        </p>
                    </div>
                    <div class="data-pagination"></div>
                </div>
            </script>
        </div>
        <h3 class="box-title" data-i18n="finished_shufflings">Finished Shufflings</h3>
        <div class="box-body no-padding" id="finished_shufflings">
            <script type="text/x-handlebars-template">
                <div class="data-container {{when isLoading 'data-loading' isEmpty 'data-empty'}}">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>{{i18n "shuffling"}}</th>
                                <th>{{i18n "stage"}}</th>
                                <th>{{i18n "holding"}}</th>
                                <th class="numeric">{{i18n "amount"}}</th>
                                <th>{{i18n "participants"}}</th>
                                <th>{{i18n "issuer"}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each data}}
                                <tr>
                                    <td>{{{shufflingFormatted}}}</td>
                                    <td>{{stageLabel}}</td>
                                    <td>{{{holdingFormatted}}}</td>
                                    <td class="numeric">{{{amountFormatted}}}</td>
                                    <td>{{participants}}</td>
                                    <td>{{{issuerFormatted}}}</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_shufflings">There are no shufflings</span>.
                        </p>
                    </div>
                </div>
            </script>
        </div>
        <div class="box-footer"><button class="btn btn-primary goto-page" data-page="finished_shufflings"><i class="fa fa-caret-right"></i> <span data-i18n="view_more">View More</span></button></div>
    </section>
</div>

<div id="my_shufflings_page" class="paginated page">
    <script type="text/x-handlebars-template">
        <section class="content-header">
            <h1>{{i18n "my_shufflings"}}</h1>
            <div style="position:absolute;top:9px;right:9px;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#m_shuffling_create_modal" data-i18n="create_shuffling">Create Shuffling</button>
            </div>
        </section>
        <section class="content">
            <div class="alert alert-info" role="alert">{{i18n "shuffling_node_running_warning"}}</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 "shuffling"}}</th>
                        <th>{{i18n "stage"}}</th>
                        <th>{{i18n "holding"}}</th>
                        <th class="numeric">{{i18n "amount"}}</th>
                        <th>{{i18n "blocks"}}</th>
                        <th>{{i18n "participants"}}</th>
                        <th>{{i18n "assignee"}}</th>
                        <th>{{i18n "shuffler"}}</th>
                        <th>{{i18n "recipient"}}</th>
                        <th>{{i18n "state"}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{#each shufflings}}
                            <tr>
                                <td>{{{shufflingFormatted}}}</td>
                                <td>{{stageLabel}}</td>
                                <td>{{{holdingFormatted}}}</td>
                                <td class="numeric">{{{amountFormatted}}}</td>
                                <td>{{blocks}}</td>
                                <td>{{participants}}</td>
                                <td>{{{assigneeFormatted}}}</td>
                                <td>{{{shufflerIndicatorFormatted}}} <span>{{shufflerStatus}}</span> {{{startShufflerLinkFormatted}}}</td>
                                <td>{{{recipientFormatted}}}</td>
                                <td>{{stateLabel}}</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_shufflings">There are no shufflings</span>.
                    </p>
                </div>
                <div class="data-pagination"></div>
            </div>
        </section>
    </script>
</div>

<div id="finished_shufflings_page" class="paginated page">
    <section id="shufflings_finished_shufflings_full" class="content">
        <h3 class="box-title" data-i18n="finished_shufflings">Finished Shufflings</h3>
        <div class="box-body no-padding" id="finished_shufflings_full">
            <script type="text/x-handlebars-template">
                <div class="data-container {{when isLoading 'data-loading' isEmpty 'data-empty'}}">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>{{i18n "shuffling"}}</th>
                                <th>{{i18n "stage"}}</th>
                                <th>{{i18n "holding"}}</th>
                                <th class="numeric">{{i18n "amount"}}</th>
                                <th>{{i18n "participants"}}</th>
                                <th>{{i18n "issuer"}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each data}}
                                <tr>
                                    <td>{{{shufflingFormatted}}}</td>
                                    <td>{{stageLabel}}</td>
                                    <td>{{{holdingFormatted}}}</td>
                                    <td class="numeric">{{{amountFormatted}}}</td>
                                    <td>{{participants}}</td>
                                    <td>{{{issuerFormatted}}}</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_shufflings">There are no shufflings</span>.
                        </p>
                    </div>
                </div>
            </script>
        </div>
        <div class="data-pagination"></div>
    </section>
</div>