<div class="clearfix">
  <label class="acc-label">{{t 'formSslTermination.hosts'}}</label>
  {{#if editing}}
    <button class="btn bg-link icon-btn" {{action "addHost"}}>
      <span class="darken"><i class="icon icon-plus text-small"></i></span>
      <span>{{t 'formSslTermination.addHostLabel'}}</span>
    </button>
  {{/if}}
</div>

{{#if hostArray.length}}
  <table class="fixed mt-20">
    <thead>
      <tr>
        <th>{{t 'formSslTermination.host.label'}}</th>
        {{#if editing}}
          <th width="40">&nbsp;</th>
        {{/if}}
      </tr>
    </thead>

    <tbody>
      {{#each hostArray as |host|}}
        <tr>
          <td class="p-5" data-title="{{t 'formSslTermination.host.label'}}">
            {{#input-or-display editable=editing value=host.value classesForDisplay="clip"}}
              {{input type="text" class="input-sm" value=host.value placeholder=(t 'formSslTermination.host.placeholder')}}
            {{/input-or-display}}
          </td>

          {{#if editing}}
            <td class="text-right">
              <button class="btn bg-primary btn-sm" {{action "removeHost" host}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
            </td>
          {{/if}}
        </tr>
      {{/each}}
    </tbody>
  </table>
{{else}}
  <div class="row text-center mt-20 mb-20 pt-10">
    <span class="text-muted">{{t 'formSslTermination.noHosts'}}</span>
  </div>
{{/if}}
