<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
            ssh
          </LinkTo>
        </li>
        <li class="is-active">
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
            sign
          </LinkTo>
        </li>
        <li>
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.model.role.name}}>
            {{this.model.role.name}}
          </LinkTo>
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Sign SSH key
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if this.model.signedKey}}
  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
    <AlertBanner
      @type="warning"
      @message="You will not be able to access this information later, so please copy the information below."
      data-test-warning
    />
    {{#each this.model.attrs as |attr|}}
      {{#if (eq attr.type "object")}}
        <InfoTableRow
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{stringify (get this.model attr.name)}}
        />
      {{else}}
        <InfoTableRow
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        />
      {{/if}}
    {{/each}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <CopyButton
        @clipboardText={{this.model.signedKey}}
        @class="button is-primary"
        @buttonType="button"
        @success={{action (set-flash-message "Key copied!")}}
      >
        Copy key
      </CopyButton>
    </div>
    {{#if this.model.leaseId}}
      <div class="control">
        <CopyButton
          @clipboardText={{this.model.leaseId}}
          @class="button"
          @buttonType="button"
          @success={{action (set-flash-message "Lease ID copied!")}}
        >
          Copy lease ID
        </CopyButton>
      </div>
    {{/if}}
    <div class="control">
      <button type="button" {{action "newModel"}} class="button" data-test-secret-generate-back={{true}}>
        Back
      </button>
    </div>
  </div>
{{else}}
  <form {{action "sign" on="submit"}} data-test-secret-generate-form="true">
    <div class="box is-sideless is-fullwidth is-marginless">
      <MessageError @model={{this.model}} />
      <NamespaceReminder @mode="sign" @noun="SSH key" />
      {{#if this.model.attrs}}
        {{#each (take 1 this.model.attrs) as |attr|}}
          <FormFieldFromModel
            @attr={{attr}}
            @model={{this.model}}
            @updateTtl={{action "updateTtl" attr.name}}
            @emptyData={{this.emptyData}}
            @codemirrorUpdated={{action "codemirrorUpdated" attr.name}}
          />
        {{/each}}
        <ToggleButton @isOpen={{this.showOptions}} @onClick={{fn (mut this.showOptions)}} data-test-toggle-button />
        {{#if this.showOptions}}
          <div class="box is-marginless">
            {{#each (drop 1 this.model.attrs) as |attr|}}
              <FormFieldFromModel
                @attr={{attr}}
                @model={{this.model}}
                @updateTtl={{action "updateTtl" attr.name}}
                @emptyData={{this.emptyData}}
                @codemirrorUpdated={{action "codemirrorUpdated" attr.name}}
              />
            {{/each}}
          </div>
        {{/if}}
      {{/if}}
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          disabled={{this.loading}}
          class="button is-primary {{if this.loading 'is-loading'}}"
          data-test-secret-generate={{true}}
        >
          Sign
        </button>
      </div>
      <div class="control">
        <LinkTo
          @route="vault.cluster.secrets.backend.list-root"
          @model={{this.backend.id}}
          class="button"
          data-test-secret-generate-cancel={{true}}
        >
          Cancel
        </LinkTo>
      </div>
    </div>
  </form>
{{/if}}