{$layout}
{$template "/first-menu"}

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

        <div class="base-container">
            <second-menu>
                <menu-item @click.prevent="createAccount">
                    <i class="pi pi-pen-to-square"></i>
                    {{t('acme_accounts_index@创建账号')}}
                </menu-item>
            </second-menu>

            <!-- {{t('acme_users_index@空数据提示')}} -->
            <b-empty v-if="accounts.length == 0">{{t('acme_accounts_index@暂无服务商账号')}}</b-empty>

            <!-- {{t('acme_users_index@数据表格区域')}} -->
            <div class="base-form" v-if="accounts.length > 0">
                <b-table
                    :columns="columns"
                    :data-source="accounts"
                    row-key="id"
                    :bordered="false"
                    size="middle"
                    :pagination="false">
                    
                    <!-- {{t('acme_accounts_index@名称列')}} -->
                    <template slot="name" slot-scope="{ text, record }">
                        <a href="" @click.prevent="updateAccount(record.id)">{{record.name}} <i class="icon expand small"></i></a>
                    </template>
                    
                    <!-- {{t('acme_accounts_index@证书服务商列')}} -->
                    <template slot="provider" slot-scope="{ text, record }">
                        <span v-if="record.provider != null">{{record.provider.name}}</span>
                        <span v-else class="disabled">-</span>
                    </template>
                    
                    <!-- {{t('acme_accounts_index@EABKid列')}} -->
                    <template slot="eabKid" slot-scope="{ text, record }">
                        <span v-if="record.eabKid.length > 0">{{record.eabKid}}</span>
                        <span v-else class="disabled">-</span>
                    </template>
                    
                    <!-- {{t('acme_accounts_index@EABHMACKey列')}} -->
                    <template slot="eabKey" slot-scope="{ text, record }">
                        <span v-if="record.eabKey.length > 0">{{record.eabKey}}</span>
                        <span v-else class="disabled">-</span>
                    </template>
                    
                    <!-- {{t('certs_index@操作')}} -->
                    <template slot="actions" slot-scope="{ text, record }">
                        <div class="action-buttons">
                            <a href="" @click.prevent="updateAccount(record.id)" class="action-button"><i class="icon edit"></i>{{t('certs_index@修改')}}</a>
                            <a href="" @click.prevent="deleteAccount(record.id)" class="action-button"><i class="icon trash"></i>{{t('certs_index@删除')}}</a>
                        </div>
                    </template>
                </b-table>
            </div>

            <!-- {{t('acme_users_index@分页')}} -->
            <div class="page" v-html="filterPageContent(page)"></div>
        </div>
    </div>
</div>