{{define "client_table"}}
<template slot="actions" slot-scope="text, client, index">
    <a-tooltip>
        <template slot="title">{{ i18n "qrCode" }}</template>
        <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
    </a-tooltip>
    <a-tooltip>
        <template slot="title">{{ i18n "pages.client.edit" }}</template>
        <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
    </a-tooltip>
    <a-tooltip>
        <template slot="title">{{ i18n "info" }}</template>
        <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
    </a-tooltip>
    <a-tooltip>
        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
        <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)"
            title='{{ i18n "pages.inbounds.resetTrafficContent"}}'
            :overlay-class-name="themeSwitcher.currentTheme"
            ok-text='{{ i18n "reset"}}'
            cancel-text='{{ i18n "cancel"}}'>
            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: #008771' : 'color: #008771'"></a-icon>
            <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
        </a-popconfirm>
    </a-tooltip>
    <a-tooltip>
        <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template>
        <a-popconfirm @confirm="delClient(record.id,client,false)"
            title='{{ i18n "pages.inbounds.deleteClientContent"}}'
            :overlay-class-name="themeSwitcher.currentTheme"
            ok-text='{{ i18n "delete"}}'
            ok-type="danger"
            cancel-text='{{ i18n "cancel"}}'>
            <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
            <a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
        </a-popconfirm>
    </a-tooltip>
</template>
<template slot="enable" slot-scope="text, client, index">
    <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
</template>   
<template slot="online" slot-scope="text, client, index">
    <template v-if="client.enable && isClientOnline(client.email)">
        <a-tag color="green">{{ i18n "online" }}</a-tag>
    </template>
    <template v-else>
        <a-tag>{{ i18n "offline" }}</a-tag>
    </template>
</template>
<template slot="client" slot-scope="text, client">
    <a-tooltip>
        <template slot="title">
            <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
            <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
            <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
        </template>
    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'">
    </a-badge>
    </a-tooltip>
    [[ client.email ]]
</template>                                    
<template slot="traffic" slot-scope="text, client">
    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
        <template slot="content" v-if="client.email">
            <table cellpadding="2" width="100%">
                <tr>
                    <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
                    <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
                </tr>
                <tr v-if="client.totalGB > 0">
                    <td>{{ i18n "remained" }}</td>
                    <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
                </tr>
            </table>
        </template>
        <table>
            <tr>
                <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
                    [[ sizeFormat(getSumStats(record, client.email)) ]]
                </td>
                <td width="120px" v-if="!client.enable">
                    <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
                                :show-info="false"
                                :percent="statsProgress(record, client.email)"/>
                </td>
                <td width="120px" v-else-if="client.totalGB > 0">
                    <a-progress :stroke-color="clientStatsColor(record, client.email)"
                                :show-info="false"
                                :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                                :percent="statsProgress(record, client.email)"/>
                </td>
                <td width="120px" v-else class="infinite-bar">
                    <a-progress
                    :show-info="false"
                    :status="isClientOnline(client.email)? 'active' : ''"
                    :percent="100"></a-progress>
                </td>
                <td width="60px">
                    <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
                    <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
                </td>
            </tr>
        </table>
    </a-popover>
</template>                                    
<template slot="expiryTime" slot-scope="text, client, index">
    <template v-if="client.expiryTime !=0 && client.reset >0">
        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
            <template slot="content">
                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
            </template>
            <table>
                <tr>
                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
                        [[ remainedDays(client.expiryTime) ]]
                    </td>
                    <td width="120px" class="infinite-bar">
                        <a-progress :show-info="false"
                        :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                        :percent="expireProgress(client.expiryTime, client.reset)"/>
                    </td>
                    <td width="60px">[[ client.reset + "d" ]]</td>
                </tr>
            </table>
        </a-popover>
    </template>
    <template v-else>
        <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
            <template slot="content">
                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
            </template>
        <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
            [[ remainedDays(client.expiryTime) ]]
        </a-tag>
        </a-popover>
        <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">&infin;</a-tag>
    </template>
</template>
<template slot="actionMenu" slot-scope="text, client, index">
    <a-dropdown :trigger="['click']">
        <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon>
        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
            <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
                <a-icon style="font-size: 14px;" type="qrcode"></a-icon>
                {{ i18n "qrCode" }}
            </a-menu-item>
            <a-menu-item @click="openEditClient(record.id,client);">
                <a-icon style="font-size: 14px;" type="edit"></a-icon>
                {{ i18n "pages.client.edit" }}
            </a-menu-item>
            <a-menu-item @click="showInfo(record.id,client);">
                <a-icon style="font-size: 14px;" type="info-circle"></a-icon>
                {{ i18n "info" }}
            </a-menu-item>
            <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
                <a-icon style="font-size: 14px;" type="retweet"></a-icon>
                {{ i18n "pages.inbounds.resetTraffic" }}
            </a-menu-item>
            <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
                <a-icon style="font-size: 14px;" type="delete"></a-icon>
                <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
            </a-menu-item>
            <a-menu-item>
                <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)">
                </a-switch>
                    {{ i18n "enable"}}
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</template>
<template slot="info" slot-scope="text, client, index">
    <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
        <template slot="content">
            <table>
                <tr>
                    <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
                </tr>
                <tr>
                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
                        [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]]
                    </td>
                    <td width="120px" v-if="!client.enable">
                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
                                    :show-info="false"
                                    :percent="statsProgress(record, client.email)"/>
                    </td>
                    <td width="120px" v-else-if="client.totalGB > 0">
                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                            <template slot="content" v-if="client.email">
                                <table cellpadding="2" width="100%">
                                    <tr>
                                        <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
                                        <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
                                    </tr>
                                    <tr>
                                        <td>{{ i18n "remained" }}</td>
                                        <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
                                    </tr>
                                </table>
                            </template>
                            <a-progress :stroke-color="clientStatsColor(record, client.email)"
                                        :show-info="false"
                                        :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                                        :percent="statsProgress(record, client.email)"/>
                        </a-popover>
                    </td>
                    <td width="120px" v-else class="infinite-bar">
                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'"
                        :show-info="false"
                        :status="isClientOnline(client.email)? 'active' : ''"
                        :percent="100"></a-progress>
                    </td>
                    <td width="80px">
                        <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
                        <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align: center;">
                        <a-divider style="margin: 0; border-collapse: separate;"></a-divider>
                        {{ i18n "pages.inbounds.expireDate" }}
                    </td>
                </tr>
                <tr>
                <template v-if="client.expiryTime !=0 && client.reset >0">
                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
                        [[ remainedDays(client.expiryTime) ]]
                    </td>
                    <td width="120px" class="infinite-bar">
                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                            <template slot="content">
                                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
                                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
                            </template>
                            <a-progress :show-info="false"
                            :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
                            :percent="expireProgress(client.expiryTime, client.reset)"/>
                        </a-popover>
                    </td>
                    <td width="60px">[[ client.reset + "d" ]]</td>
                </template>
                <template v-else>
                    <td colspan="3" style="text-align: center;">
                            <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
                                <template slot="content">
                                    <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
                                    <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
                                </template>
                                <a-tag style="min-width: 50px; border: none;" 
                                    :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
                                    [[ remainedDays(client.expiryTime) ]]
                                </a-tag>
                            </a-popover>
                            <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">&infin;</a-tag>
                        </template>
                    </td>
                </tr>
            </table>
        </template>
        <a-badge>
            <a-icon v-if="!client.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
            <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button>
        </a-badge>
    </a-popover>
</template>
{{end}}