{$layout "layout_popup"}

<!-- <h3 v-if="!isUpdating">添加端口绑定</h3>
<h3 v-if="isUpdating">修改端口绑定</h3> -->
<form
  method="post"
  class="ui form"
  data-tea-action="$"
  data-tea-success="success"
>
  <table class="ui table definition selectable">
    <tr>
      <td>网络协议</td>
      <td>
        <b-select
          name="protocol"
          v-model="protocol"
          auto-width
          :options="[
            ...protocols.map(protocol => ({
              label: protocol.name,
              value: protocol.code,
            })),
          ]"
        ></b-select>
        <!-- <select class="ui dropdown auto-width" name="protocol">
          <option v-for="protocol in protocols" :value="protocol.code">
            {{protocol.name}}
          </option>
        </select> -->
      </td>
    </tr>
    <tr>
      <td class="title">端口 *</td>
      <td>
        <input
          type="text"
          name="address"
          ref="focus"
          v-model="address"
          maxlength="5"
          style="width: 5.2em"
        />
        <p class="comment">需要在1024-65534之间。TCP和TLS端口之间不能重复。</p>
      </td>
    </tr>
  </table>
  <submit-btn></submit-btn>
</form>
