{{#if isView}}
  <section class="header">
    <div class="pull-left">
      <h1>
        {{t (concat "cruGateway.title." mode) name=model.displayName}}
      </h1>
    </div>
    <div class="right-buttons">
      {{badge-state model=model}}
      {{action-menu
        model=model
        showPrimary=false
        classNames="ml-10 inline-block"
        size="sm"
      }}
    </div>
  </section>

  <div class="row banner bg-info basics">
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">
        {{t "generic.name"}}:
      </label>
      {{#copy-inline clipboardText=model.displayName}}
        {{model.displayName}}
      {{/copy-inline}}
    </div>
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">
        {{t "servicePage.multistat.namespace"}}:
      </label>
      {{#copy-inline clipboardText=model.namespaceId}}
        {{model.namespaceId}}
      {{/copy-inline}}
    </div>
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">
        {{t "generic.created"}}:
      </label>
      {{date-calendar model.created}}
    </div>
  </div>
{{else}}
  <section class="header">
    <h1>
      {{t (concat "cruGateway.title." mode) name=model.displayName}}
    </h1>
  </section>
  <section class="horizontal-form container-fluid">
    <div class="row">
      <div class="col span-6">
        {{form-name-description
          model=model
          namePlaceholder="cruGateway.name.placeholder"
          descriptionShown=false
          nameDisabled=isEdit
        }}
      </div>
      <div class="col span-6">
        {{form-namespace
          namespace=namespace
          errors=namespaceErrors
          registerHook=(action "registerHook")
          editing=isNew
        }}
      </div>
    </div>
  </section>
{{/if}}

<hr />

<div class="row">
  <div class="col span-12">
    <div class="clearfix">
      <label class="acc-label">{{t "cruGateway.selector.label"}}</label>
    </div>

    {{form-labels
      initialLabels=model.selector
      editing=editing
      addActionLabel="cruGateway.selector.add"
      setLabels=(action "setSelector")
    }}
  </div>
</div>

<hr />

<section class="horizontal-form container-fluid mb-30">
  <div class="row mt-30 mb-10">
    <label class="acc-label">
      {{t "cruGateway.servers.label"}}
    </label>
  </div>

  {{#each servers as |server|}}
    {{gateway-server
      editing=editing
      server=server
      removeServer=(action "removeServer")
    }}
  {{else}}
    <div class="p-20 text-center text-muted">
      {{t "cruGateway.servers.noServers"}}
    </div>
  {{/each}}

  {{#if editing}}
    <div class="row">
      <button class="btn bg-link icon-btn pull-right" type="button" {{action "addServer" }}>
        <i class="icon icon-plus text-small"></i>
        <span>
          {{t "cruGateway.servers.add"}}
        </span>
      </button>
    </div>
  {{/if}}
</section>

{{#if isView}}
  {{#accordion-list as |al expandFn|}}
    {{config-validation-list
      resourceType="gateway"
      expandAll=al.expandAll
      expandFn=expandFn
      namespaceId=model.namespaceId
      name=model.name
    }}

    {{form-labels-annotations
      classNames="accordion-wrapper"
      model=model
      editing=editing
      expandAll=al.expandAll
      expandFn=expandFn
    }}
  {{/accordion-list}}
{{else}}
  {{form-labels-annotations
    classNames="accordion-wrapper"
    initialLabels=model.labels
    setLabels=(action "setLabels")
    model=model
    editing=editing
  }}
{{/if}}

{{#if editing}}
  {{top-errors errors=errors}}
  {{save-cancel
    editing=isEdit
    save=(action "save")
    cancel=cancel
  }}
{{/if}}