{$layout}
{$template "../user_menu"}

<second-menu>
    <menu-item @click.prevent="createAccessKey()">
        <i class="pi pi-pen-to-square"></i>
        {{t('users_accesskeys_index@创建AccessKey')}}
    </menu-item>
</second-menu>

<div class="right-box">
    <b-empty v-if="accessKeys.length == 0">{{t('users_accesskeys_index@暂时还没有AccessKey。')}}</b-empty>

    <b-table
        v-if="accessKeys.length > 0"
        :columns="columns"
        :data-source="accessKeys"
        :row-key="'id'"
        size="middle"
    >
        <template slot="uniqueIdSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.uniqueId}}</span>
        </template>

        <template slot="secretSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.secret}}</span>
        </template>

        <template slot="descriptionSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">{{record.description}}</span>
        </template>

        <template slot="accessedTimeSlot" slot-scope="{ text, record }">
            <span :class="{disabled: !record.isOn}">
                <span v-if="record.accessedTime.length > 0">{{record.accessedTime}}</span>
                <span v-else class="disabled">{{t('users_accesskeys_index@尚无访问')}}</span>
            </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" v-if="record.isOn" @click.prevent="updateAccessKeyIsOn(record.id, false)">{{t('users_accesskeys_index@禁用')}}</a-button>
            <a-button type="link" v-if="!record.isOn" @click.prevent="updateAccessKeyIsOn(record.id, true)">{{t('users_accesskeys_index@启用')}}</a-button>
            <a-button type="link" @click.prevent="deleteAccessKey(record.id)">{{t('users_accesskeys_index@删除')}}</a-button>
        </template>
    </b-table>
</div>