vault/ui/lib/ldap/addon/components/page/library/details/accounts.hbs

<div class="is-grid has-top-margin-l grid-2-columns grid-gap-2">
  <div>
    <Hds::Card::Container @level="mid" @hasBorder={{true}} class="has-padding-l is-flex-half border-radius-2">
      <div class="is-flex-between">
        <h3 class="is-size-5 has-text-weight-semibold">All accounts</h3>
        {{#if @library.canCheckOut}}
          <button
            type="button"
            class="button is-link"
            data-test-check-out
            {{on "click" (fn (mut this.showCheckOutPrompt) true)}}
          >
            Check-out
          </button>
        {{/if}}
      </div>

      <p class="has-text-grey is-size-8">The accounts within this library</p>
      <hr class="has-background-gray-200" />

      <Hds::Table @model={{@statuses}} @columns={{array (hash label="Accounts") (hash label="Status")}}>
        <:body as |Body|>
          <Body.Tr>
            <Body.Td data-test-account-name={{Body.data.account}}>{{Body.data.account}}</Body.Td>
            <Body.Td>
              <Hds::Badge
                @text={{if Body.data.available "Available" "Unavailable"}}
                @color={{if Body.data.available "success" "neutral"}}
                data-test-account-status={{Body.data.account}}
              />
            </Body.Td>
          </Body.Tr>
        </:body>
      </Hds::Table>
    </Hds::Card::Container>
  </div>

  <div>
    <AccountsCheckedOut
      @libraries={{array @library}}
      @statuses={{@statuses}}
      @onCheckInSuccess={{transition-to "vault.cluster.secrets.backend.ldap.libraries.library.details.accounts"}}
      data-test-checked-out-card
    />

    <OverviewCard
      @cardTitle="To renew a checked-out account"
      @subText="Use the CLI command below:"
      class="has-padding-l has-top-margin-l"
    >
      <CodeSnippet @codeBlock={{this.cliCommand}} class="has-top-margin-s" />
    </OverviewCard>
  </div>
</div>

{{#if this.showCheckOutPrompt}}
  <Hds::Modal id="account-check-out-modal" @onClose={{fn (mut this.showCheckOutPrompt) false}} as |M|>
    <M.Header>
      Account Check-out
    </M.Header>
    <M.Body>
      <p>
        Current generated credential’s time-to-live is set at
        {{format-duration @library.ttl}}. You can set a different limit if you’d like:
      </p>
      <br />
      <TtlPicker @label="TTL" @hideToggle={{true}} @initialValue={{@library.ttl}} @onChange={{this.setTtl}} />
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <Hds::Button data-test-check-out="save" @text="Check-out" {{on "click" this.checkOut}} />
        <Hds::Button data-test-check-out="cancel" @text="Cancel" @color="secondary" {{on "click" F.close}} />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}