<div class="clearfix {{unless editing 'box'}}">
  <label class="{{if editing 'acc-label'}}">{{t 'formServicePorts.header'}}</label>
  {{#if ports.length}}
    <table class="table fixed no-lines small mb-10">
      <thead>
        <tr class="hidden-sm">
          <th class="{{unless editing 'acc-label'}}">{{t 'formServicePorts.name.label'}}{{#if editing}}{{field-required}}{{/if}}</th>
          <th width="10"></th>
          <th class="{{unless editing 'acc-label'}}">{{t 'formServicePorts.port.label'}}{{#if editing}}{{field-required}}{{/if}}</th>
          <th width="10"></th>
          <th class="{{unless editing 'acc-label'}}" width="80">{{t 'formServicePorts.protocol.label'}}</th>
          <th width="10"></th>
          <th class="{{unless editing 'acc-label'}}">{{t 'formServicePorts.targetPort.label'}}</th>
          {{#if (or (eq model.kind 'LoadBalancer') (eq model.kind 'NodePort')) }}
            <th width="10"></th>
            <th class="{{unless editing 'acc-label'}}">{{t 'formServicePorts.nodePort.label'}}</th>
          {{/if}}
          <th width="40">&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        {{#each ports as |port|}}
          <tr>
            <td data-title="{{t 'formServicePorts.name.label'}}">
              {{#if editing}}
                {{input class="form-control input-sm public" value=port.name placeholder=(t 'formServicePorts.name.placeholder')}}
              {{else}}
                {{port.name}}
              {{/if}}
            </td>
            <td>&nbsp;</td>

            <td data-title="{{t 'formServicePorts.port.label'}}">
              {{#if editing}}
                {{input-integer class="form-control input-sm" min="1" max="65535" value=port.port placeholder=(t 'formServicePorts.port.placeholder')}}
              {{else}}
                {{port.port}}
              {{/if}}
            </td>
            <td>&nbsp;</td>

            <td data-title="{{t 'formServicePorts.protocol.label'}}">
              {{#if editing}}
                {{new-select
                    class="form-control input-sm"
                    content=protocolOptions
                    value=port.protocol
                }}
              {{else}}
                {{port.protocol}}
              {{/if}}
            </td>
            <td>&nbsp;</td>

            <td data-title="{{t 'formServicePorts.targetPort.label'}}">
              {{#if editing}}
                {{input-random-port
                    value=port.targetPort
                    placeholder=(t 'formServicePorts.targetPort.placeholder')
                    standardKey="formServicePorts.targetPort.default"
                }}
              {{else}}
                {{port.targetPort}}
              {{/if}}
            </td>

            {{#if (or (eq model.kind 'LoadBalancer') (eq model.kind 'NodePort')) }}
              <td>&nbsp;</td>
              <td>
                {{#if editing}}
                  {{input-random-port value=port.nodePort placeholder=(t 'formServicePorts.nodePort.placeholder') standardKey="generic.random"}}
                {{else}}
                  {{port.nodePort}}
                {{/if}}
              </td>
            {{/if}}

            <td>
              {{#if editing}}
                <button class="btn bg-primary btn-sm" {{action "removePort" port}}>
                  <i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span>
                </button>
              {{/if}}
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  {{else}}
    {{#unless editing}}
      <span class="text-center text-muted">{{t 'formServicePorts.noPorts'}}</span>
    {{/unless}}
  {{/if}}
</div>

<div>
  {{#if editing}}
    <button class="btn bg-link icon-btn p-0" {{action "addPort"}}>
      <span class="darken"><i class="icon icon-plus text-small"/></span>
      <span>{{t 'formServicePorts.addAction'}}</span>
    </button>
  {{/if}}
</div>
