{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.top>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-header-title>
      Credentials
    </h1>
  </p.levelLeft>
</PageHeader>

<hr class="is-marginless has-background-gray-200" />

{{#if @error}}
  <Page::Error @error={{@error}} />
{{else}}
  {{#if (eq @credentials.type "dynamic")}}
    <Hds::Alert @type="inline" @color="warning" class="has-top-margin-m" as |Alert|>
      <Alert.Title>Warning</Alert.Title>
      <Alert.Description data-test-alert-description>
        You won’t be able to access these credentials later, so please copy them now.
      </Alert.Description>
    </Hds::Alert>
  {{/if}}

  <div class="has-top-margin-m">
    {{#each this.fields as |field|}}
      {{#let (get @credentials field.key) as |value|}}
        {{#if field.hasBlock}}
          <InfoTableRow @label={{field.label}}>
            {{#if (eq field.hasBlock "masked")}}
              <MaskedInput @value={{value}} @displayOnly={{true}} @allowCopy={{true}} />
            {{else if (eq field.hasBlock "check")}}
              <div class="is-flex-v-centered">
                <Icon
                  @name={{if value "check-circle" "x-circle"}}
                  class="is-marginless {{if value 'has-text-success' 'has-text-danger'}}"
                />
                <span class="has-left-margin-xs">
                  {{if value "True" "False"}}
                </span>
              </div>
            {{/if}}
          </InfoTableRow>
        {{else}}
          <InfoTableRow
            @label={{field.label}}
            @value={{value}}
            @formatDate={{field.formatDate}}
            @formatTtl={{field.formatTtl}}
            @type={{field.type}}
          />
        {{/if}}
      {{/let}}
    {{/each}}
  </div>

  <div class="has-top-margin-xl has-bottom-margin-l">
    <Hds::Button
      @text="Done"
      data-test-done
      {{on "click" (transition-to "vault.cluster.secrets.backend.ldap.roles.role.details")}}
    />
  </div>
{{/if}}