<div class="wizard-container__step-counter">
  <span class="wizard-container__step-text">{{bound-i18n
      "wizard.step-text"
    }}</span>
  <span class="wizard-container__step-count">{{bound-i18n
      "wizard.step"
      current=this.step.displayIndex
      total=this.wizard.totalSteps
    }}</span>
</div>

<div class="wizard-container">
  <div class="wizard-container__step-contents">
    <div class="wizard-container__step-header">
      {{#if this.step.emoji}}
        <div class="wizard-container__step-header--emoji">
          {{emoji this.step.emoji}}
        </div>
      {{/if}}
      {{#if this.step.title}}
        <h1 class="wizard-container__step-title">{{this.step.title}}</h1>
        {{#if this.step.description}}
          <p class="wizard-container__step-description">{{html-safe
              this.step.description
            }}</p>
        {{/if}}
      {{/if}}
    </div>

    <div class="wizard-container__step-container">
      {{#if this.step.fields}}
        <WizardStepForm @step={{this.step}}>
          {{#if this.includeSidebar}}
            <div class="wizard-container__sidebar">
              {{#each this.step.fields as |field|}}
                {{#if field.show_in_sidebar}}
                  <WizardField
                    @field={{field}}
                    @step={{this.step}}
                    @wizard={{this.wizard}}
                  />
                {{/if}}
              {{/each}}
            </div>
          {{/if}}
          <div class="wizard-container__fields">
            {{#each this.step.fields as |field|}}
              {{#unless field.show_in_sidebar}}
                <WizardField
                  @field={{field}}
                  @step={{this.step}}
                  @wizard={{this.wizard}}
                />
              {{/unless}}
            {{/each}}
          </div>
        </WizardStepForm>
      {{/if}}
    </div>
  </div>

  <div class="wizard-container__step-footer">
    <div class="wizard-container__buttons">
      {{#if this.showBackButton}}
        <button
          {{on "click" this.backStep}}
          disabled={{this.saving}}
          type="button"
          class="wizard-container__button btn-back"
        >
          {{i18n "wizard.back"}}
        </button>
      {{/if}}
    </div>

    <div class="wizard-container__step-progress">
      {{#if this.showFinishButton}}
        <button
          {{on "click" this.exitEarly}}
          disabled={{this.saving}}
          type="button"
          class="wizard-container__button jump-in"
        >
          {{i18n "wizard.jump_in"}}
        </button>
      {{/if}}

      {{#if this.showConfigureMore}}
        <button
          {{on "click" this.nextStep}}
          disabled={{this.saving}}
          type="button"
          class="wizard-container__button primary {{this.nextButtonClass}}"
        >
          {{i18n this.nextButtonLabel}}
        </button>
      {{/if}}

      {{#if this.showJumpInButton}}
        <button
          {{on "click" this.quit}}
          disabled={{this.saving}}
          type="button"
          class="wizard-container__button {{this.jumpInButtonClass}}"
        >
          {{i18n this.jumpInButtonLabel}}
        </button>
      {{/if}}

      {{#if this.showNextButton}}
        <button
          {{on "click" this.nextStep}}
          disabled={{this.saving}}
          type="button"
          class="wizard-container__button primary {{this.nextButtonClass}}"
        >
          {{i18n this.nextButtonLabel}}
        </button>
      {{/if}}

    </div>

  </div>
</div>