{{define "form/fallbacks"}}
<div :style="{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px', margin: '8px 0' }">
  <span :style="{ fontWeight: 500 }">
    <a-tooltip title="Route incoming TLS traffic to a backend when it doesn't match a valid VLESS/Trojan handshake. Match by SNI, ALPN, and HTTP path; the most precise rule wins. Fallbacks require TCP+TLS transport.">
      Fallbacks ([[ inbound.settings.fallbacks.length ]])
      <a-icon type="question-circle"></a-icon>
    </a-tooltip>
  </span>
  <span :style="{ flex: 1 }"></span>
  <a-button icon="plus" type="primary" size="small" @click="inbound.settings.addFallback()">Add</a-button>
</div>

<a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false"
  :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
  <a-divider :style="{ margin: '0' }">
    Fallback [[ index + 1 ]]
    <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
      :style="{ color: 'rgb(255, 77, 79)', cursor: 'pointer', marginLeft: '6px' }"></a-icon>
  </a-divider>

  <a-form-item>
    <template slot="label">
      <a-tooltip title="Match TLS SNI (server name). Leave empty to match any SNI.">
        SNI <a-icon type="question-circle"></a-icon>
      </a-tooltip>
    </template>
    <a-input v-model.trim="fallback.name" placeholder="any (leave empty)"></a-input>
  </a-form-item>

  <a-form-item>
    <template slot="label">
      <a-tooltip title="Match TLS ALPN. 'any' = no ALPN constraint. Use h2/http/1.1 split when the inbound advertises both.">
        ALPN <a-icon type="question-circle"></a-icon>
      </a-tooltip>
    </template>
    <a-select v-model="fallback.alpn" :style="{ width: '100%' }">
      <a-select-option value="">any</a-select-option>
      <a-select-option value="h2">h2</a-select-option>
      <a-select-option value="http/1.1">http/1.1</a-select-option>
    </a-select>
  </a-form-item>

  <a-form-item
    :validate-status="fallback.path && !fallback.path.startsWith('/') ? 'error' : ''"
    :help="fallback.path && !fallback.path.startsWith('/') ? 'Path must start with /' : ''">
    <template slot="label">
      <a-tooltip title="Match the HTTP request path of the first packet. Must start with '/'. Leave empty to match any.">
        Path <a-icon type="question-circle"></a-icon>
      </a-tooltip>
    </template>
    <a-input v-model.trim="fallback.path" placeholder="any (leave empty) or /ws"></a-input>
  </a-form-item>

  <a-form-item
    :validate-status="!fallback.dest ? 'error' : ''"
    :help="!fallback.dest ? 'Destination is required' : ''">
    <template slot="label">
      <a-tooltip>
        <template slot="title">
          <span>
            Where matching traffic is forwarded. Accepts a port number (<code>80</code>),
            an <code>addr:port</code> (<code>127.0.0.1:8080</code>), or a Unix socket path
            (<code>/dev/shm/x.sock</code> or <code>@abstract</code>).
          </span>
        </template>
        Destination <a-icon type="question-circle"></a-icon>
      </a-tooltip>
    </template>
    <a-input v-model.trim="fallback.dest" placeholder="80 | 127.0.0.1:8080 | /dev/shm/x.sock"></a-input>
  </a-form-item>

  <a-form-item>
    <template slot="label">
      <a-tooltip title="PROXY protocol version sent to the destination. Off (0) for plain TCP; v1/v2 to preserve client IP if the backend supports it.">
        PROXY <a-icon type="question-circle"></a-icon>
      </a-tooltip>
    </template>
    <a-select v-model="fallback.xver" :style="{ width: '100%' }">
      <a-select-option :value="0">Off</a-select-option>
      <a-select-option :value="1">v1</a-select-option>
      <a-select-option :value="2">v2</a-select-option>
    </a-select>
  </a-form-item>
</a-form>
{{end}}