<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          <LinkTo @route="vault.cluster.secrets.backend.overview" @model={{@backendPath}}>
            {{@backendPath}}
          </LinkTo>
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 data-test-title class="title is-3">
      {{@roleName}}
    </h1>
  </p.levelLeft>
</PageHeader>

<div class={{if @roleType "box is-fullwidth is-sideless is-marginless"}}>
  {{! If no role type, that means both static and dynamic requests returned an error }}
  {{#unless @roleType}}
    <EmptyState
      @title={{this.errorTitle}}
      @subTitle="Error {{@model.errorHttpStatus}}"
      @icon="alert-circle"
      @bottomBorder={{true}}
      @message={{@model.errorMessage}}
    >
      <nav class="breadcrumb" aria-label="help breadcrumb">
        <ul class="is-grouped-split">
          <li>
            {{! Empty because they can't go "back" anywhere }}
          </li>
          <li>
            <DocLink @path="/vault/docs/secrets/databases" @class="has-text-grey">
              Need help?
            </DocLink>
          </li>
        </ul>
      </nav>
    </EmptyState>
  {{/unless}}
  {{#if (and (not @model.errorMessage) (eq @roleType "dynamic"))}}
    <AlertBanner
      @type="warning"
      @message="You will not be able to access these credentials later, so please copy them now."
      data-test-warning
    />
  {{/if}}
  {{! DYNAMIC ROLE }}
  {{#if (and (eq @roleType "dynamic") @model.username)}}
    <InfoTableRow @label="Username" @value={{@model.username}}>
      <MaskedInput @value={{@model.username}} @name="Username" @displayOnly={{true}} @allowCopy={{true}} />
    </InfoTableRow>
    <InfoTableRow @label="Password" @value={{@model.password}}>
      <MaskedInput @value={{@model.password}} @name="Password" @displayOnly={{true}} @allowCopy={{true}} />
    </InfoTableRow>
    <InfoTableRow @label="Lease ID" @value={{@model.leaseId}} />
    <InfoTableRow @label="Lease Duration" @value={{format-duration @model.leaseDuration}} />
  {{/if}}
  {{! STATIC ROLE }}
  {{#if (and (eq @roleType "static") @model.username)}}
    <InfoTableRow
      @label="Last Vault rotation"
      @value={{date-format @model.lastVaultRotation "MMMM d yyyy, h:mm:ss a"}}
      @tooltipText={{@model.lastVaultRotation}}
      @isTooltipCopyable={{true}}
    />
    <InfoTableRow @label="Password" @value={{@model.password}}>
      <MaskedInput @value={{@model.password}} @name="Password" @displayOnly={{true}} @allowCopy={{true}} />
    </InfoTableRow>
    <InfoTableRow @label="Username" @value={{@model.username}} />
    <InfoTableRow @label="Rotation Period" @value={{format-duration @model.rotationPeriod}} />
    <InfoTableRow @label="Time Remaining" @value={{format-duration @model.ttl}} />
  {{/if}}
</div>
<div class="has-top-bottom-margin">
  <button
    type="button"
    onclick={{action "redirectPreviousPage"}}
    class="button is-primary"
    data-test-secret-generate-back="true"
  >
    Back
  </button>
</div>