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

<PageHeader as |p|>
  <p.top>
    <Hds::Breadcrumb>
      <Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
      <Hds::Breadcrumb::Item @text="Configure MFA Method" @current={{true}} />
    </Hds::Breadcrumb>
  </p.top>
  <p.levelLeft class="has-border-bottom-light">
    <h1 class="title is-3">
      {{#if this.method}}
        Configure
        {{this.method.name}}
        MFA
      {{else}}
        Multi-Factor Authentication
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>
<div class="has-border-top-light has-top-padding-l">
  {{#if this.showForms}}
    <h3 class="is-size-4 has-text-weight-semibold">Settings</h3>
    <p class="has-border-top-light has-top-padding-l">
      {{this.description}}
      <DocLink @path={{concat "/vault/api-docs/secret/identity/mfa/" this.type}}>Learn more.</DocLink>
    </p>
    <Mfa::MethodForm @model={{this.method}} @validations={{this.methodErrors}} class="is-shadowless" />
    <Mfa::MfaLoginEnforcementHeader
      @isInline={{true}}
      @radioCardGroupValue={{this.enforcementPreference}}
      @onRadioCardSelect={{this.onEnforcementPreferenceChange}}
      @onEnforcementSelect={{fn (mut this.enforcement)}}
    />
    {{#if (eq this.enforcementPreference "new")}}
      <Mfa::MfaLoginEnforcementForm
        @model={{this.enforcement}}
        @isInline={{true}}
        @modelErrors={{this.enforcementErrors}}
        class="has-top-margin-l"
      />
    {{/if}}
  {{else}}
    <p>
      Multi-factor authentication (MFA) allows you to set up another layer of security on top of existing authentication
      methods. Vault has four available methods.
      <DocLink @path="/vault/api-docs/secret/identity/mfa">Learn more.</DocLink>
    </p>
    <div class="is-flex-row has-top-margin-xl">
      {{#each this.methods as |method|}}
        <RadioCard
          @value={{lowercase method.name}}
          @groupValue={{this.type}}
          @onChange={{this.onTypeSelect}}
          data-test-radio-card={{lowercase method.name}}
        >
          <div class="radio-card-row is-flex-v-centered">
            <div>
              <Icon @name={{method.icon}} @size="24" class={{if (eq method.name "TOTP") "has-text-grey"}} />
              <p
                class="has-text-weight-semibold has-text-center
                  {{if (or (eq method.name 'Okta') (eq method.name 'TOTP')) 'has-top-margin-xs'}}"
              >
                {{method.name}}
              </p>
            </div>
          </div>
        </RadioCard>
      {{/each}}
    </div>
    {{#if this.type}}
      <p class="has-top-margin-l">
        {{this.description}}
        <DocLink @path={{concat "/vault/api-docs/secret/identity/mfa/" this.type}}>Learn more.</DocLink>
      </p>
      {{! in a future release cards may be displayed to choose from either template or custom config for TOTP }}
      {{! if template is selected a user could choose a predefined config for common authenticators and the values would be populated on the model }}
    {{/if}}
  {{/if}}

  <div class="has-top-margin-l has-border-top-light">
    <div class="has-top-margin-l has-bottom-margin-l">
      {{#if this.showForms}}
        <Hds::ButtonSet>
          <Hds::Button @text="Continue" {{on "click" (perform this.save)}} data-test-mfa-create-save />
          <Hds::Button @text="Cancel" @color="secondary" {{on "click" this.cancel}} />
        </Hds::ButtonSet>
      {{else if this.type}}
        <Hds::Button @text="Next" {{on "click" this.createModels}} data-test-mfa-create-next />
      {{/if}}
    </div>
  </div>
</div>