<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb">
      <ul>
        <li>
          <span class="sep">
            /
          </span>
          <LinkTo @route="vault.cluster.access.method.item.list" @model={{this.itemType}}>
            {{pluralize this.itemType}}
          </LinkTo>
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    {{#if (eq this.mode "show")}}
      <h1 class="title is-3">
        {{this.model.id}}
      </h1>
    {{else}}
      <h1 class="title is-3">
        {{capitalize this.mode}}
        {{singularize this.itemType}}
        {{#if (eq this.mode "edit")}}
          {{this.model.id}}
        {{/if}}
      </h1>
    {{/if}}
  </p.levelLeft>
</PageHeader>
{{#if (eq this.mode "show")}}
  <Toolbar>
    <ToolbarActions>
      <ConfirmAction
        @buttonClasses="toolbar-link"
        @onConfirmAction={{action "deleteItem"}}
        @confirmMessage={{concat "Are you sure you want to delete " this.itemType " " this.model.id "?"}}
        @cancelButtonText="Cancel"
        data-test-secret-delete="true"
      >
        Delete
        {{this.itemType}}
      </ConfirmAction>
      <div class="toolbar-separator"></div>
      <ToolbarLink
        @route="vault.cluster.access.method.item.edit"
        @models={{array this.itemType this.model.id}}
        data-test-configure-link="true"
      >
        Edit
        {{singularize this.itemType}}
      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>
{{/if}}
{{#if (eq this.mode "show")}}
  <FieldGroupShow @model={{this.model}} @showAllFields={{true}} />
{{else}}
  <form {{action (perform this.saveModel) on="submit"}}>
    <div class="box is-sideless is-fullwidth is-marginless">
      <NamespaceReminder @mode="save" @noun={{this.itemType}} />
      <MessageError @model={{this.model}} />
      <FormFieldGroups
        @model={{this.model}}
        @mode={{this.mode}}
        @onKeyUp={{action "onKeyUp"}}
        @modelValidations={{this.modelValidations}}
      />
    </div>
    <div class="field is-grouped-split box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          data-test-save-config="true"
          class="button is-primary {{if this.saveModel.isRunning 'loading'}}"
          disabled={{or this.saveModel.isRunning this.isFormInvalid}}
        >
          Save
        </button>
        {{#if (eq this.mode "create")}}
          <LinkTo @route="vault.cluster.access.method.item.list" class="button" data-test-cancel-link={{true}}>
            Cancel
          </LinkTo>
        {{else}}
          <LinkTo
            @route="vault.cluster.access.method.item.show"
            @model={{this.model.id}}
            class="button"
            data-test-cancel-link={{true}}
          >
            Cancel
          </LinkTo>
        {{/if}}
      </div>
    </div>
  </form>
{{/if}}