{{define "form/inbound"}}
<!-- base -->
<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
    <a-form-item label='{{ i18n "enable" }}'>
        <a-switch v-model="dbInbound.enable"></a-switch>
    </a-form-item>
    <a-form-item label='{{ i18n "remark" }}'>
        <a-input v-model.trim="dbInbound.remark"></a-input>
    </a-form-item>

    <a-form-item label='{{ i18n "protocol" }}'>
        <a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
        </a-select>
    </a-form-item>

    <a-form-item>
        <template slot="label">
            <a-tooltip>
                <template slot="title">
                    <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
                </template>
                {{ i18n "monitor" }}
                <a-icon type="question-circle"></a-icon>
            </a-tooltip>
        </template>
        <a-input v-model.trim="inbound.listen"></a-input>
    </a-form-item>

    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
        <a-input-number v-model.number="inbound.port" :min="1" :max="65535"></a-input-number>
    </a-form-item>

    <a-form-item v-if="multiNodeMode" label="Nodes">
        <template slot="extra">
            <a-tooltip>
                <template slot="title">
                    Select worker nodes where this inbound will run. You can select multiple nodes. Only available in multi-node mode.
                </template>
                <a-icon type="question-circle"></a-icon>
            </a-tooltip>
        </template>
        <a-select v-model="inbound.nodeIds" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme" 
            placeholder="Select nodes (optional)" allow-clear>
            <a-select-option v-for="node in availableNodes" :key="node.id" :value="node.id">
                [[ node.name ]] <a-tag :color="node.status === 'online' ? 'green' : 'red'" size="small" style="margin-left: 8px;">[[ node.status ]]</a-tag>
            </a-select-option>
        </a-select>
        <div v-if="availableNodes.length === 0" style="margin-top: 4px; color: #ff4d4f; font-size: 12px;">
            No nodes available. Please add nodes first.
        </div>
    </a-form-item>

    <a-form-item>
        <template slot="label">
            <a-tooltip>
                <template slot="title">
                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
                </template>
                {{ i18n "pages.inbounds.totalFlow" }}
                <a-icon type="question-circle"></a-icon>
            </a-tooltip>
        </template>
        <a-input-number v-model.number="dbInbound.totalGB" :min="0" :step="0.01" :precision="2"></a-input-number>
    </a-form-item>

    <a-form-item>
        <template slot="label">
            <a-tooltip>
                <template slot="title">
                    <span>{{ i18n "pages.inbounds.periodicTrafficResetDesc" }}</span>
                    <br v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
                    <span v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
                        <strong>{{ i18n "pages.inbounds.lastReset" }}:</strong>
                        <span>[[ IntlUtil.formatDate(dbInbound.lastTrafficResetTime) ]]</span>
                    </span>
                </template>
                {{ i18n "pages.inbounds.periodicTrafficResetTitle" }}
                <a-icon type="question-circle"></a-icon>
            </a-tooltip>
        </template>
        <a-select v-model="dbInbound.trafficReset" :dropdown-class-name="themeSwitcher.currentTheme">
            <a-select-option value="never">{{ i18n "pages.inbounds.periodicTrafficReset.never" }}</a-select-option>
            <a-select-option value="daily">{{ i18n "pages.inbounds.periodicTrafficReset.daily" }}</a-select-option>
            <a-select-option value="weekly">{{ i18n "pages.inbounds.periodicTrafficReset.weekly" }}</a-select-option>
            <a-select-option value="monthly">{{ i18n "pages.inbounds.periodicTrafficReset.monthly" }}</a-select-option>
        </a-select>
    </a-form-item>

    <a-form-item>
        <template slot="label">
            <a-tooltip>
                <template slot="title">
                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
                </template>
                {{ i18n "pages.inbounds.expireDate" }}
                <a-icon type="question-circle"></a-icon>
            </a-tooltip>
        </template>
        <a-date-picker :style="{ width: '100%' }" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
            v-model="dbInbound._expiryTime"></a-date-picker>
        <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
            value="dbInbound._expiryTime" v-model="dbInbound._expiryTime">
        </a-persian-datepicker>
    </a-form-item>
</a-form>

<!-- vmess settings -->
<template v-if="inbound.protocol === Protocols.VMESS">
    {{template "form/vmess"}}
</template>

<!-- vless settings -->
<template v-if="inbound.protocol === Protocols.VLESS">
    {{template "form/vless"}}
</template>

<!-- trojan settings -->
<template v-if="inbound.protocol === Protocols.TROJAN">
    {{template "form/trojan"}}
</template>

<!-- shadowsocks -->
<template v-if="inbound.protocol === Protocols.SHADOWSOCKS">
    {{template "form/shadowsocks"}}
</template>

<!-- tunnel -->
<template v-if="inbound.protocol === Protocols.TUNNEL">
    {{template "form/tunnel"}}
</template>

<!-- mixed -->
<template v-if="inbound.protocol === Protocols.MIXED">
    {{template "form/mixed"}}
</template>

<!-- http -->
<template v-if="inbound.protocol === Protocols.HTTP">
    {{template "form/http"}}
</template>

<!-- wireguard -->
<template v-if="inbound.protocol === Protocols.WIREGUARD">
    {{template "form/wireguard"}}
</template>

<!-- stream settings -->
<template v-if="inbound.canEnableStream()">
    {{template "form/streamSettings"}}
    {{template "form/externalProxy" }}
</template>

<!-- tls settings -->
<template v-if="inbound.canEnableTls()">
    {{template "form/tlsSettings"}}
</template>

<!-- sniffing -->
<a-collapse>
    <a-collapse-panel header='Sniffing'>
        {{template "form/sniffing"}}
    </a-collapse-panel>
</a-collapse>

{{end}}