{{define "inboundInfoStream"}}
<table>
    <tr>
        <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
    </tr>
<template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
    <tr v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
    <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>

    <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
    <tr v-else><td>{{ i18n "path" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
</template>

<template v-if="inbound.isQuic">
    <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
    <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
    <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
</template>

<template v-if="inbound.isKcp">
    <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
    <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
</template>

<template v-if="inbound.isGrpc">
    <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
</template>
</table>
</td></tr>
<tr colspan="2">
    <td v-if="inbound.tls">
        tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
        tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
    </td>
    <td v-else-if="inbound.xtls">
        xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
        xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
    </td>
    <td v-else>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
{{end}}

{{define "component/inboundInfoComponent"}}
<div>
    <table style="margin-bottom: 10px">
        <tr><td>
            <table>
                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ dbInbound.port ]]</a-tag></td></tr>
            </table>
        </td>
        <td>
            <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                {{template "inboundInfoStream"}}
            </template>
        </td></tr>
    </table>
    <a-divider>{{ i18n "clients" }}</a-divider>
    <table v-if="dbInbound.isVMess">
        <tr>
            <th>email</th>
            <th>uuid</th>
        </tr>
        <tr v-for="(vmess, index) in inbound.settings.vmesses">
            <td><a-tag color="green">[[ vmess.email ]]</a-tag></td>
            <td><a-tag color="green">[[ vmess.id ]]</a-tag></td>
        </tr>
    </table>

    <table v-if="dbInbound.isVLess">
        <tr>
            <th>email</th>
            <th>uuid</th>
        </tr>
        <tr v-for="(vless, index) in inbound.settings.vlesses">
            <td><a-tag color="green">[[ vless.email ]]</a-tag></td>
            <td><a-tag color="green">[[ vless.id ]]</a-tag></td>
        </tr>
    </table>

    <table v-if="dbInbound.isTrojan">
        <tr>
            <th>email</th>
            <th>password</th>
        </tr>
        <tr v-for="(trojan, index) in inbound.settings.trojans">
            <td><a-tag color="green">[[ trojan.email ]]</a-tag></td>
            <td><a-tag color="green">[[ trojan.password ]]</a-tag></td>
        </tr>
    </table>

    <template v-if="dbInbound.isSS">
        <p>{{ i18n "encryption"}}: <a-tag color="green">[[ inbound.method ]]</a-tag></p>
        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
    </template>

    <template v-if="dbInbound.isSocks">
        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
    </template>

    <template v-if="dbInbound.isHTTP">
        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
    </template>

</div>
{{end}}

{{define "component/inboundInfo"}}
<script>
    Vue.component('inbound-info', {
        delimiters: ['[[', ']]'],
        props: ["dbInbound", "inbound"],
        template: `{{template "component/inboundInfoComponent"}}`,
    });

</script>
{{end}}