<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          {{#link-to "vault.cluster.secrets.backend" backend.id data-test-link="role-list"}}
            {{backend.id}}
          {{/link-to}}
        </li>
        <li class="is-active">
          <span class="sep">&#x0002f;</span>
          {{#link-to "vault.cluster.secrets.backend" backend.id}}
            creds
          {{/link-to}}
        </li>
        <li>
          <span class="sep">&#x0002f;</span>
          {{#link-to "vault.cluster.secrets.backend.show" model.role.name}}
            {{model.role.name}}
          {{/link-to}}
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 data-test-title class="title is-3">
      {{options.title}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if model.hasGenerated}}
  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
    {{message-error model=model}}
    {{#unless model.isError}}
      {{#message-in-page type="warning" data-test-warning=true}}
        You will not be able to access this information later, so please copy the information below.
      {{/message-in-page}}
    {{/unless}}
    {{#each model.attrs as |attr|}}
      {{#if (eq attr.type "object")}}
        {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(stringify (get model attr.name))}}
      {{else}}
        {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
      {{/if}}
    {{/each}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      {{#copy-button
        clipboardText=model.toCreds
        class="button is-primary"
        buttonType="button"
        success=(action (set-flash-message "Credentials copied!"))
      }}
        Copy credentials
      {{/copy-button}}
    </div>
    {{#if model.leaseId}}
      <div class="control">
        {{#copy-button
          clipboardText=model.leaseId
          class="button"
          buttonType="button"
          success=(action (set-flash-message "Lease ID copied!"))
        }}
          Copy Lease ID
        {{/copy-button}}
      </div>
    {{/if}}
    <div class="control">
      {{#if options.backIsListLink}}
        {{#link-to
          "vault.cluster.secrets.backend.list-root"
          backend.id
          data-test-secret-generate-back=true
          class="button"
        }}
          Back
        {{/link-to}}
      {{else}}
        <button
          type="button"
          {{action "newModel"}}
          class="button"
          data-test-secret-generate-back="true"
          >
          Back
        </button>
      {{/if}}
    </div>
  </div>
{{else}}
  <form {{action "create" on="submit"}} data-test-secret-generate-form="true">
    <div class="box is-sideless is-fullwidth is-marginless">
      <NamespaceReminder @mode="generate" @noun="credential" />
      {{message-error model=model}}
      {{#if model.helpText}}
        <p>{{model.helpText}}</p>
      {{/if}}
      {{#if model.fieldGroups}}
        {{partial "partials/form-field-groups-loop"}}
      {{else}}
        {{#each model.attrs as |attr|}}
          {{form-field data-test-field attr=attr model=model}}
        {{/each}}
      {{/if}}
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          disabled={{loading}}
          class="button is-primary {{if loading 'is-loading'}}"
          data-test-secret-generate=true
        >
          Generate
        </button>
      </div>
      <div class="control">
        {{#link-to
          "vault.cluster.secrets.backend.list-root"
          backend.id
          class="button"
          data-test-secret-generate-cancel=true
        }}
          Cancel
        {{/link-to}}
      </div>
    </div>
  </form>
{{/if}}
