{{!
  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 has-bottom-margin-2" data-test-credentials-header>
      {{if this.credentials "Credentials" "Generate credentials"}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if this.credentials}}
  <div class="box is-sideless is-fullwidth is-marginless has-bottom-padding-l" data-test-credentials-details>
    <Hds::Alert @type="inline" @color="warning" as |A|>
      <A.Title data-test-k8-alert-title>Warning</A.Title>
      <A.Description data-test-k8-alert-message>You won't be able to access these credentials later, so please copy them now.</A.Description>
    </Hds::Alert>
    <InfoTableRow @label="Service account token">
      <MaskedInput
        @value={{this.credentials.service_account_token}}
        @name="Service Account Token"
        @displayOnly={{true}}
        @allowCopy={{true}}
      />
    </InfoTableRow>
    <InfoTableRow
      @label="Namespace"
      @value={{this.credentials.service_account_namespace}}
      @addCopyButton={{true}}
      @alwaysRender={{true}}
    />
    <InfoTableRow
      @label="Service account name"
      @value={{this.credentials.service_account_name}}
      @addCopyButton={{true}}
      @alwaysRender={{true}}
    />
    <InfoTableRow @label="Lease expiry" @value={{date-format this.leaseExpiry "MMMM do yyyy, h:mm:ss a"}} />
    <InfoTableRow @label="lease_id" @value={{this.credentials.lease_id}} />
    <InfoTableRow />
  </div>

  <div class="has-top-margin-l">
    <button class="button is-primary" type="button" data-test-generate-credentials-done {{on "click" this.cancel}}>
      Done
    </button>
  </div>
{{else}}
  <div data-test-generate-credentials>
    <form {{on "submit" (perform this.fetchCredentials)}}>
      <div class="field box is-sideless is-fullwidth is-marginless">
        <p>This will generate credentials using the role <span class="is-font-mono">{{@roleName}}</span>.</p>

        {{#if this.error}}
          <MessageError class="has-top-margin-l" @errorMessage={{this.error}} />
        {{/if}}

        <label for="token" class="is-label has-top-margin-l">Kubernetes namespace</label>
        <div class="has-text-grey is-size-8 has-bottom-margin-xs">
          The namespace in which to generate the credentials.
        </div>
        <Input
          @type="text"
          @value={{this.kubernetesNamespace}}
          class="input"
          {{on "input" this.setKubernetesNamespace}}
          data-test-kubernetes-namespace
        />

        <div class="has-top-margin-l has-bottom-margin-l">
          <Toggle
            @status="success"
            @size="small"
            @checked={{this.clusterRoleBinding}}
            @onChange={{(toggle-action "clusterRoleBinding" this)}}
            data-test-kubernetes-clusterRoleBinding
          >
            <h3 class="title is-7 is-marginless">ClusterRoleBinding</h3>
            <div class="description has-text-grey">
              <span>
                Generate a ClusterRoleBinding to grant permissions across the whole cluster instead of within a namespace.
                This requires the Vault role to have kubernetes_role_type set to ClusterRole.
              </span>
            </div>
          </Toggle>
        </div>

        <TtlPicker
          class="has-top-margin-l has-bottom-margin-m"
          @initialEnabled={{false}}
          @label="Time-to-Live (TTL)"
          @onChange={{this.updateTtl}}
          @helperTextDisabled="The TTL of the generated Kubernetes service account token. Defaults to the role's default TTL, or the default system TTL."
        />
      </div>
      <div class="has-top-margin-l">
        <button
          class="button is-primary {{if this.fetchCredentials.isRunning 'is-loading'}}"
          type="submit"
          disabled={{this.fetchCredentials.isRunning}}
          data-test-generate-credentials-button
        >
          Generate credentials
        </button>
        <button
          class="button has-left-margin-xs"
          type="button"
          disabled={{this.fetchCredentials.isRunning}}
          {{on "click" this.cancel}}
          data-test-generate-credentials-back
        >
          Back
        </button>
      </div>
    </form>
  </div>
{{/if}}