{$layout}

<div class="left-right-box-container">
    {$template "/left_menu_top"}

    <div class="right-box without-tabbar">
        {$template "../menu"}

        <second-menu>
            <menu-item @click.prevent="createAccount">
                <i class="pi pi-pen-to-square"></i>
                创建账号
            </menu-item>
        </second-menu>

        <b-empty v-if="accounts.length == 0">暂时还没有服务商账号。</b-empty>

        <table class="ui table selectable celled" v-if="accounts.length > 0">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>证书服务商</th>
                    <th class="four wide">EAB Kid</th>
                    <th class="four wide">EBA HMAC Key</th>
                    <th class="two wide">操作</th>
                </tr>
            </thead>
            <tr v-for="account in accounts">
                <td>
                    <a href="" @click.prevent="updateAccount(account.id)">{{account.name}} <i class="icon expand small"></i></a>
                </td>
                <td>
                    <span v-if="account.provider != null">{{account.provider.name}}</span>
                </td>
                <td>
                    <span v-if="account.eabKid.length > 0">{{account.eabKid}}</span>
                    <span v-else class="disabled">-</span>
                </td>
                <td>
                    <span v-if="account.eabKey.length > 0">{{account.eabKey}}</span>
                    <span v-else class="disabled">-</span>
                </td>
                <td>
                    <a href="" @click.prevent="updateAccount(account.id)">修改</a> &nbsp;
                    <a href="" @click.prevent="deleteAccount(account.id)">删除</a>
                </td>
            </tr>
        </table>

        <div class="page" v-html="filterPageContent(page)"></div>
    </div>
</div>