<PageHeader as |p|>
  <p.top>
    <KeyValueHeader
      @baseKey={{this.model}}
      @path="vault.cluster.secrets.backend.list"
      @mode={{this.mode}}
      @root={{this.root}}
      @showCurrent={{true}}
    />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-secret-header="true">
      {{#if (eq this.mode "create")}}
        Create a PKI Role
      {{else if (eq this.mode "edit")}}
        Edit PKI Role
      {{else}}
        PKI Role
        <code>{{this.model.id}}</code>
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if (eq this.mode "show")}}
  <Toolbar>
    <ToolbarActions>
      {{#if this.model.canDelete}}
        <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}} data-test-role-delete="true">
          Delete role
        </ConfirmAction>
        <div class="toolbar-separator"></div>
      {{/if}}
      {{#if this.model.canGenerate}}
        <ToolbarSecretLink
          @secret={{this.model.id}}
          @mode="credentials"
          @queryParams={{hash action="issue"}}
          data-test-credentials-link={{true}}
        >
          Generate Certificate
        </ToolbarSecretLink>
      {{/if}}
      {{#if this.model.canSign}}
        <ToolbarSecretLink
          @secret={{this.model.id}}
          @mode="credentials"
          @queryParams={{hash action="sign"}}
          data-test-sign-link={{true}}
        >
          Sign Certificate
        </ToolbarSecretLink>
      {{/if}}
      {{#if this.model.canEdit}}
        <ToolbarSecretLink @secret={{this.model.id}} @mode="edit" data-test-edit-link={{true}} @replace={{true}}>
          Edit role
        </ToolbarSecretLink>
      {{/if}}
    </ToolbarActions>
  </Toolbar>
{{/if}}
{{#if (or (eq this.mode "edit") (eq this.mode "create"))}}
  <form onsubmit={{action "createOrUpdate" "create"}}>
    <div class="box is-sideless is-fullwidth is-marginless">
      <MessageError @model={{this.model}} />
      <NamespaceReminder @mode={{this.mode}} @noun="PKI role" />
      <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
    </div>
    <div class="field is-grouped-split box is-fullwidth is-bottomless">
      <div class="control">
        <button type="submit" disabled={{this.buttonDisabled}} class="button is-primary" data-test-role-create={{true}}>
          {{#if (eq this.mode "create")}}
            Create role
          {{else if (eq this.mode "edit")}}
            Save
          {{/if}}
        </button>
        <SecretLink @mode={{if (eq this.mode "create") "list" "show"}} class="button" @secret={{this.model.id}}>
          Cancel
        </SecretLink>
      </div>
    </div>
  </form>
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless">
    {{#each this.model.fieldGroups as |fieldGroup|}}
      {{#each-in fieldGroup as |group fields|}}
        {{#if (or (eq group "default") (eq group "Options"))}}
          {{#each fields as |attr|}}
            <InfoTableRow
              @alwaysRender={{true}}
              @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
              @value={{get this.model attr.name}}
            />
          {{/each}}
        {{else}}
          <div class="box is-sideless is-fullwidth is-marginless">
            <h2 class="title is-5">
              {{group}}
            </h2>
            {{#each fields as |attr|}}
              <InfoTableRow
                @alwaysRender={{true}}
                @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
                @value={{get this.model attr.name}}
              />
            {{/each}}
          </div>
        {{/if}}
      {{/each-in}}
    {{/each}}
  </div>
{{/if}}