<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="page" data-name="accounts">

    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only back">
                    <i class="icon icon-back"></i>
                </a>
            </div>
            <div class="title">Accounts</div>
        </div>
    </div>

    <div class="page-content">

        {{#unless noaccounts}}
        <div class="list media-list">
            <ul id="accountlist">
                {{#each accounts}}
                <li class="swipeout accountlist-item" data-id="{{id}}">
                    <div class="item-content swipeout-content" data-id="{{id}}">
                        <div class="item-media"><img src="img/accounticons/{{icon}}.svg" width="44"/></div>
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title">
                                    <i class="fas fa-user"></i> {{username}}
                                </div>

                                {{#if active}}
                                <div class="item-after">
                                    <span class="badge color-green"><i class="fas fa-check"></i></span>
                                </div>
                                {{/if}}
                            </div>
                            {{#if showtypestring}}
                            <div class="item-text">{{type}} account</div>
                            {{/if}}
                            {{#if showsyncurl}}
                            <div class="item-text"><i class="fas fa-link"></i> {{syncurl}}</div>
                            {{/if}}
                        </div>
                    </div>
                    <div class="swipeout-actions-right">
                        <a href="#" data-confirm="Really delete account?  You'll need to re-add the account to use it on this device again." class="swipeout-delete">Delete</a>
                    </div>
                </li>
                {{/each}}
            </ul>
        </div>
        {{else}}
        <div class="card">
            <div class="card-content">
                You haven't added any accounts yet.  Press <i class="material-icons">add</i> to add one.
            </div>
        </div>
        {{/unless}}
    </div>

    <div class="fab fab-right-bottom">
        <a href="/setup/0">
            <i class="material-icons">add</i>
        </a>
    </div>

    <script>
        $(".view-main").on("swipeout:deleted", ".accountlist-item", function () {
            var id = $(this).data("id");
            rmaccount(id);
            openAccountSwitcher(true);
        });

        $(".view-main").on("click", ".accountlist-item .item-content", function () {
            var id = $(this).data("id");
            switchaccount(id);
        });
    </script>

</div>