<table class="grid fixed no-lines no-top-padding tight" style="margin-bottom: 0;">
  {{#if listenersArray.length}}
    <thead>
      <tr>
        <th>Source Port{{#unless editing}}*{{/unless}}</th>
        <th width="20"></th>
        <th width="60">Protocol</th>
        <th width="50" class="text-center">SSL</th>
        <th>Default Target Port</th>
        <th width="20"></th>
        <th width="80">Access</th>
        <th width="40">&nbsp;</th>
      </tr>
    </thead>
  {{/if}}
  <tbody>
    {{#each listenersArray as |listener|}}
      <tr>
        {{#if editing}}
          <td>{{listener.sourcePort}}</td>
          <td>&nbsp;</td>
          <td>{{listener.sourceProtocol}}</td>
          <td class="text-center">{{#if listener.ssl}}<i class="icon icon-check"></i>{{/if}}</td>
          <td>
            {{listener.targetPort}}
          </td>
          <td>&nbsp;</td>
          <td>{{if listener.isPublic "Public" "Internal"}}</td>
          <td class="text-right">&nbsp;</td>
        {{else}}
          <td>
            {{input type="text" classNames="form-control lb-listener-source-port input-sm" min="1" max="65535" step="1" value=listener.sourcePort placeholder="On Host, e.g. 80"}}
          </td>
          <td>&nbsp;</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">{{listener.sourceProtocol}} <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li role="presentation" class="dropdown-header">
                  Select a protocol:
                </li>
                {{#each sourceProtocolOptions as |choice|}}
                  <li {{action "chooseProtocol" listener "sourceProtocol" choice}}>
                    <a>{{choice}}</a>
                  </li>
                {{/each}}
              </ul>
            </div>
          </td>
          <td class="text-center">
            {{input safeStyle="margin-top: 10px;" type="checkbox" checked=listener.ssl}}
          </td>
          <td>
            {{input type="text" classNames="form-control lb-listener-target-port input-sm" min="1" max="65535" step="1" value=listener.targetPort placeholder="In Container, e.g. 8080"}}
          </td>
          <td>&nbsp;</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">{{if listener.isPublic "Public" "Internal"}} <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li role="presentation" class="dropdown-header">
                  Select access:
                </li>
                <li {{action "setPublic" listener true}}><a>Public</a></li>
                <li {{action "setPublic" listener false}}><a>Internal</a></li>
              </ul>
            </div>
          </td>
          <td class="text-right">
            <button {{action "removeListener" listener}} class="btn-circle-x" type="button" tabindex="-1"></button>
          </td>
        {{/if}}
      </tr>
    {{/each}}
  </tbody>
</table>
