{$layout}
{$template "menu"}

<div class="right-box">
    <div class="margin"></div>
    <form class="ui form" method="get" action="/admins" v-show="!hasWeakPassword">
        <div class="ui fields inline">
            <div class="ui field">
                <input type="text" name="keyword" :placeholder="t('admins_index@用户名全名')" v-model="keyword"/>
            </div>
            <div class="ui field">
                <button class="ui button" type="submit">{{t('admins_index@搜索')}}</button>
                &nbsp;
                <a href="/admins" v-if="keyword.length > 0">{{t('admins_index@[清除条件]')}}</a>
            </div>
        </div>
    </form>

    <div v-if="admins.length == 0">
        <b-empty>
            {{t('admins_index@暂时还没有')}}<span v-if="keyword.length > 0">{{t('admins_index@跟关键词匹配')}}</span>{{t('admins_index@管理员。')}}
        </b-empty>
    </div>

    <div v-if="hasWeakPassword" class="margin">
         <span class="ui label small basic">{{t('admins_index@当前正在筛选弱密码管理员')}} <a href="/admins"><i class="pi pi-times"></i></a></span>
    </div>

    <div class="margin"></div>
    <b-table
        v-show="admins.length > 0"
        :columns="[
            { title: t('admins_index@用户名'), key: 'username', scopedSlots: { customRender: 'usernameSlot' } },
            { title: t('admins_index@全名'), key: 'fullname', scopedSlots: { customRender: 'fullnameSlot' } },
            { title: t('admins_index@允许登录'), key: 'canLogin', scopedSlots: { customRender: 'canLoginSlot' }, width: '10%', align: 'center' },
            { title: 'OTP' + t('admins_index@认证'), key: 'otpLoginIsOn', scopedSlots: { customRender: 'otpSlot' }, width: '10%', align: 'center' },
            { title: t('admins_index@状态'), key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '10%', align: 'center' },
            { title: t('admins_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '10%', align: 'center' }
        ]"
        :data-source="admins"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
        <template slot="usernameSlot" slot-scope="{ text, record }">
            <span :class="{disabled:!record.isOn}">
                <a :href="'/admins/admin?adminId=' + record.id"><keyword :v-word="keyword">{{record.username}}</keyword></a>
            </span>
            <b-label-group style="margin-top: 0.5em">
                <b-label
                    v-if="record.isSuper"
                    size="tiny"
                    color="olive"
                    :text="t('admins_index@超级管理员')"
                ></b-label>
                <b-label
                    v-if="record.hasWeakPassword"
                    size="tiny"
                    color="red"
                    :href="'/admins/update?adminId=' + record.id"
                    :title="t('admins_index@当前管理员已设置密码为弱密码，有极大的安全风险，请及时修改')"
                    :text="t('admins_index@弱密码')"
                ></b-label>
            </b-label-group>
        </template>

        <template slot="fullnameSlot" slot-scope="{ text, record }">
            <span :class="{disabled:!record.isOn}"><keyword :v-word="keyword">{{record.fullname}}</keyword></span>
        </template>

        <template slot="canLoginSlot" slot-scope="{ text, record }">
            <span v-if="record.canLogin" class="green">Y</span>
            <span v-else class="disabled">N</span>
        </template>

        <template slot="otpSlot" slot-scope="{ text, record }">
            <span v-if="record.otpLoginIsOn" class="green">Y</span>
            <span v-else class="disabled">N</span>
        </template>

        <template slot="statusSlot" slot-scope="{ text, record }">
             <label-on :v-is-on="record.isOn"></label-on>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
            <a-button type="link" :href="'/admins/admin?adminId=' + record.id">{{t('admins_index@详情')}}</a-button>
            <a-button type="link" @click.prevent="deleteAdmin(record.id)">{{t('admins_index@删除')}}</a-button>
        </template>
    </b-table>

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