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

<WizardContent @headerText="Vault Web UI" @glyph="tour" @selectProgress={{this.selectProgress}}>
  <h2 class="title is-6">
    Choosing where to go
  </h2>
  <p>
    You did it! You now have access to your Vault and can start entering your data. We can help you get started with any of
    the options below.
  </p>
  <div class="access-information">
    <Icon @name="info" class="has-text-info" />
    <p>
      Vault only shows links to pages that you have access to based on your policies. Contact your administrator if you need
      access changes.
    </p>
  </div>
  {{#if (or (has-feature "Performance Replication") (has-feature "DR Replication"))}}{{/if}}
  <h3 class="feature-header">Walk me through setting up:</h3>
  <form id="features-form" class="feature-selection" {{action "saveFeatures" on="submit"}}>
    {{#each this.allFeatures as |feature|}}
      {{#if feature.show}}
        <div
          class="feature-box {{if feature.selected 'is-active'}} {{if feature.disabled 'is-disabled'}}"
          data-test-select-input={{true}}
        >
          <div class="b-checkbox">
            <input
              id="feature-{{feature.key}}"
              type="checkbox"
              class="styled"
              checked={{feature.selected}}
              onchange={{action (mut feature.selected) value="target.checked"}}
              disabled={{feature.disabled}}
              data-test-checkbox={{feature.name}}
            />
            <label for="feature-{{feature.key}}">{{feature.name}}</label>
            <button
              type="button"
              class="button is-ghost icon is-pulled-right"
              onclick={{action (toggle (concat feature.key "-isOpen") this)}}
            >
              <Chevron
                @direction={{if (get this (concat feature.key "-isOpen")) "up" "down"}}
                @class="has-text-grey auto-width is-paddingless is-flex-column"
              />
            </button>
            {{#if feature.disabled}}
              <Info-Tooltip data-test-tooltip>
                You do not have permissions to tour some parts of this feature
              </Info-Tooltip>
            {{/if}}
          </div>
          {{#if (get this (concat feature.key "-isOpen"))}}
            <ul class="feature-steps">
              {{#each feature.steps as |step|}}
                <li>{{step}}</li>
              {{/each}}
            </ul>
          {{/if}}
        </div>
      {{/if}}
    {{/each}}
    <span class="selection-summary">
      <button type="submit" class="button is-primary" disabled={{this.cannotStartWizard}} data-test-start-button>
        Start
      </button>
      {{#if this.selectedFeatures}}
        <span class="time-estimate">
          <Icon @name="clock" class="has-text-grey" />About
          {{this.estimatedTime}}
          minutes
        </span>
      {{/if}}
    </span>
  </form>
</WizardContent>