{{define "form/vmess"}}
<a-form layout="inline" v-for="(vmess, index) in inbound.settings.vmesses"
:key="`vmess-${index}`">
    <a-form layout="inline">
        <a-form-item label="Email">
            <a-input v-model.trim="vmess.email"></a-input>
        </a-form-item>
        <a-form-item>
            <span slot="label">
                IP Count Limit
                <a-tooltip>
                    <template slot="title">
                        disable inbound if more than entered count (0 for disable limit ip)
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                </a-tooltip>
            </span>
        
            <a-input type="number" v-model.number="vmess.limitIp"></a-input>
        </a-form-item>
        <a-form-item v-if="vmess.email && vmess.limitIp > 0 && isEdit">
            <span slot="label">
                IP Log 
                <a-tooltip>
                    <template slot="title">
                        IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                </a-tooltip>
            </span>
            
            <a-textarea readonly @click="getDBClientIps(vmess.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
            </a-textarea>

            <a-button type="danger" @click="clearDBClientIps(vmess.email,$event)" >clear log</a-button>
        </a-form-item>

    </a-form>
    <a-form-item label="id">
        <a-input v-model.trim="vmess.id"></a-input>
    </a-form-item>
    <a-form-item label='{{ i18n "additional" }} ID'>
        <a-input type="number" v-model.number="vmess.alterId"></a-input>
    </a-form-item>
        <!--Add Svg Icon-->
            <svg

            @click="addClient(inbound.protocol,vmess, inbound.settings.vmesses)"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            class="ml-2 cursor-pointer"
            >
            <path fill="none" d="M0 0h24v24H0z" />
            <path
            fill="green"
            d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
            />
        </svg>
    
        <!--Remove Svg Icon-->
        <svg
            v-show="inbound.settings.vmesses.length > 1"
            @click="removeClient(index, inbound.settings.vmesses)"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            class="ml-2 cursor-pointer"
            >
            <path fill="none" d="M0 0h24v24H0z" />
            <path
            fill="#EC4899"
            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
            />
        </svg>
        <a-divider style="height: 2px; background-color: #7e7e7e" />
    
    </a-form>
</a-form>
<a-form layout="inline">
    <a-form-item label='{{ i18n "pages.inbounds.disableInsecureEncryption" }}'>
        <a-switch v-model.number="inbound.settings.disableInsecure"></a-switch>
    </a-form-item>
</a-form>

{{end}}