discourse-custom-wizard/assets/javascripts/discourse/templates/components/custom-wizard-step.hbs

<div class="wizard-step-contents">
  {{#if step.title}}
    <h1 class="wizard-step-title">{{cookedTitle}}</h1>
  {{/if}}

  {{#if bannerImage}}
    <div class="wizard-step-banner">
      <img src={{bannerImage}}>
    </div>
  {{/if}}

  {{#if step.description}}
    <div class="wizard-step-description">{{cookedDescription}}</div>
  {{/if}}

  {{#custom-wizard-step-form step=step}}
    {{#each step.fields as |field|}}
      {{custom-wizard-field field=field step=step wizard=wizard}}
    {{/each}}
  {{/custom-wizard-step-form}}
</div>

<div class="wizard-step-footer">

  <div class="wizard-progress">
    <div class="white"></div>
    <div class="black" style={{barStyle}}></div>
    <div class="screen"></div>
    <span>{{i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
  </div>

  <div class="wizard-buttons">
    {{#if saving}}
      {{loading-spinner size="small"}}
    {{else}}
      {{#if showQuitButton}}
        <a href {{action "quit"}} class="action-link quit" tabindex={{secondaryButtonIndex}}>{{i18n "wizard.quit"}}</a>
      {{/if}}
      {{#if showBackButton}}
        <a href {{action "backStep"}} class="action-link back" tabindex={{secondaryButtonIndex}}>{{i18n "wizard.back"}}</a>
      {{/if}}
    {{/if}}

    {{#if showNextButton}}
      <button type="button" class="wizard-btn next primary" {{action "nextStep"}} disabled={{saving}} tabindex={{primaryButtonIndex}}>
        {{i18n "wizard.next"}}
        {{d-icon "chevron-right"}}
      </button>
    {{/if}}

    {{#if showDoneButton}}
      <button type="button" class="wizard-btn done" {{action "done"}} disabled={{saving}} tabindex={{primaryButtonIndex}}>
        {{i18n "wizard.done_custom"}}
      </button>
    {{/if}}
  </div>

</div>