<!-- 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="circle-btn btn btn-light-blue" onclick="openscreen('setup1', 'FADE');">
    <img src="icons/ic_add.svg" />
</div>
<div id="noaccounts">
    <div class="app-dock-container">
        <div class="app-dock" id="app-dock">
            <div style="margin-top: 50px; text-align: center; font-size: 120%;">
                <img src="img/noaccounts.svg" alt="" style="max-width: 80%; max-height: 25%;" />
                <br /><br />
                <p style="max-width: 80%; margin: 0 auto;">You haven't added any Business Apps accounts yet.  Press <i class="fa fa-plus"></i> to add one.</p>
            </div>
        </div>
    </div>
</div>
<div class="list-group" id="accountlist">
</div>
<script>
    setnavbar("app", "Accounts", "settings");

    var accounts = getaccounts();
    if (accounts.length > 0) {
        $("#noaccounts").css("display", "none");
    }
    for (var i = 0; i < accounts.length; i++) {
        // Escape HTML characters
        var username = $('<div/>').html(accounts[i]["username"]).html();
        var syncurl = $('<div/>').html(accounts[i]["syncurl"].replace("/mobile/index.php", "")).html();
        var synckey = accounts[i]["key"];
        var stars = "";
        for (var j = 0; j < synckey.length - 6; j++) {
            stars += "*";
        }
        synckey = $('<div/>').html(synckey.slice(0, 3) + stars + synckey.slice(-3)).html();
        $("#accountlist").append("<div class=\"list-group-item\" id=\"accountitem_" + i + "\">"
                + "<span class=\"pull-right\" style=\"color: red;\" onclick=\"deleteAccount(" + i + ")\"><i class=\"fa fa-trash-o\"></i></span>"
                + "<div onclick=\"switchAccount(" + i + ")\" class=\"h3\" style=\"font-weight: bold;\"><i class=\"fa fa-user\"></i> " + username + "</div>"
                + "<p onclick=\"switchAccount(" + i + ")\">"
                + "<i class=\"fa fa-key\"></i> Pairing Code: " + synckey + "<br />"
                + "<i class=\"fa fa-server\"></i> Server: " + syncurl + "</p>"
                + "</div>");
    }

    function deleteAccount(id) {
        navigator.notification.confirm("Really delete account?  You'll need to re-add the account to use it on this device again.", function (result) {
            if (result != 1) {
                return;
            }
            rmaccount(id);
            openscreen("accounts");
        }, "Delete " + accounts[id]['username'] + "?");
    }

    function switchAccount(id) {
        switchaccount(id);
        openscreen("home");
        navigator.notification.alert("Successfully switched accounts.", null, "Switched", 'OK');
    }
</script>
