{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<PageHeader as |p|>
  <p.top>
    <Hds::Breadcrumb>
      <Hds::Breadcrumb::Item
        @text={{@backendPath}}
        @route="vault.cluster.secrets.backend"
        @model={{@backendPath}}
        data-test-link="role-list"
      />
      <Hds::Breadcrumb::Item @text={{@keyName}} @route="vault.cluster.secrets.backend.show" @model={{@keyName}} />
      <Hds::Breadcrumb::Item @text={{this.title}} @current={{true}} />
    </Hds::Breadcrumb>
  </p.top>
  <p.levelLeft>
    <h1 data-test-title class="title is-3">
      {{this.title}}
    </h1>
  </p.levelLeft>
</PageHeader>

<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
  <InfoTableRow @label="Code">
    <MaskedInput @name="code" @value={{this.totpCode}} @displayOnly={{true}} @allowCopy={{true}} />
    <label class="has-left-padding-s">
      <div>Valid for {{this.remainingTime}} seconds</div>
      <progress id="code-validity" value={{this.remainingTime}} max={{@totpCodePeriod}} />
    </label>
  </InfoTableRow>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
  <div class="control">
    <Hds::Button @text="Back" @color="secondary" {{on "click" this.redirectPreviousPage}} />
  </div>
</div>