{{#if isFirstPage}}
  <!-- First page -->
{{#end}}

{{#unless isPaymentSummaryPage}}
  <div class="primaryButtonsContainer">
    {{#if properties.configuration.hasNextButton}}
      {{#if hasNextPage}}
        <button 
          data-role="next-page" 
          data-page-target="{{nextPageIndex}}" 
          data-i18n-text="textdef_68" 
          type="submit"
          class="actionBarBtn actionBarBtn--nextPage"
          >
          Next
        </button>
      {{#end}}
    {{#end}}

    {{#if isLastPage}}
      {{#if properties.configuration.hasSubmitButton}}
        <button 
          data-role="submit" 
          type="submit"
          {{#if properties.label.isBold}}data-is-bold{{#end}}
          {{#if properties.label.isItalic}}data-is-italic{{#end}}
          {{#if properties.configuration.hasSubmitButtonIcon}}data-has-icon{{#end}}
          {{#if properties.configuration.hasSubmitButtonIcon}}data-has-icon{{#end}}
          {{#if properties.autosubmit}}data-autosubmit{{#end}}
          class="actionBarBtn actionBarBtn--submit"
        >
          <span class="normal-state" data-i18n-text="{{#if properties.autosubmit}}textdef_254{{#else}}SendButton{{#end}}">
            {{#if properties.autosubmit}}
              {{properties.label.autoSubmitButtonText}}
            {{#else}}
              {{properties.label.submitButtonText}}
            {{#end}}
          </span>
          <span class="submit-state" data-i18n-text="textdef_132">Please wait...</span>
        </button>
      {{#end}}

      {{#if properties.configuration.hasApproveButton}}
        <button 
          data-role="approve" 
          data-i18n-text="textdef_97" 
          type="button"
          class="actionBarBtn actionBarBtn--approve"
        >
          Approve
        </button>
      {{#end}}

      {{#if properties.configuration.hasPreviewButton}}
        <button 
          data-role="preview" 
          type="button"
          class="actionBarBtn actionBarBtn--preview"
        >
          <span data-visible="when-disabled" data-i18n-text="textdef_80">Preview</span>
          <span data-visible="when-enabled" data-i18n-text="textdef_81">Go Back</span>
        </button>
      {{#end}}
      
      {{#if properties.configuration.hasUpdateButton}}
        <button 
          data-role="update" 
          data-i18n-text="textdef_96" 
          type="button"
          class="actionBarBtn actionBarBtn--update"
        >
          Update
        </button>
      {{#end}}
      
      {{#if properties.configuration.hasCalculateButton}}
        <button 
          data-role="calculate" 
          data-i18n-text="textdef_7" 
          type="button"
          class="actionBarBtn actionBarBtn--calculate"
        >
          Calculate
        </button>
      {{#end}}

    {{#end}}
  </div>

  <div class="secondaryButtonsContainer">
    {{#if properties.configuration.hasPreviousButton}}
      {{#if hasPreviousPage}}
        <button 
          data-role="previous-page" 
          data-page-target="{{previousPageIndex}}" 
          data-i18n-text="textdef_69" 
          type="button"
          class="actionBarBtn actionBarBtn--prevPage"
        >
          Previous
        </button>
      {{#end}}
    {{#end}}

    {{#if properties.configuration.hasSaveForLaterButton}}
      <button 
        data-role="save-for-later" 
        data-i18n-text="textdef_78" 
        type="button"
        class="actionBarBtn actionBarBtn--saveForLater"
        >
        Save for later
      </button>
    {{#end}}

    {{#if isLastPage}}
      {{#if properties.configuration.hasApproveButton}}
        <button 
          data-role="reject" 
          data-i18n-text="textdef_98" 
          type="button"
          class="actionBarBtn actionBarBtn--reject"
        >
          Reject
        </button>
      {{#end}}
    {{#end}}
  </div>
{{#end}}

{{#if isPaymentSummaryPage}}
  {{#if properties.configuration.hasPurchaseButton}}
    <button 
      data-role="purchase" 
      type="button" 
      data-i18n-text="textdef_84"
      class="actionBarBtn actionBarBtn--purchase"
      >
      Purchase
    </button>
	{{#end}}
{{#end}}

{{#if isLastPage}}
  {{#unless isPaymentSummaryPage}}
    <div id="abuse-disclaimer-root"></div>

    {{#if properties.label.disclaimerText}}
      {{#if hasSingleProcessor}}
        <div class="actionBarDisclaimerContainer">
          {{#if showIcon}}
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
                  <path fill="currentColor" d="M13.207 7.014V5.25c0 -1.477 -1.23 -2.707 -2.707 -2.707S7.793 3.773 7.793 5.25v1.764h5.414zm-2.707 7.875c0.943 0 1.764 -0.821 1.764 -1.764s-0.821 -1.764 -1.764 -1.764 -1.764 0.821 -1.764 1.764 0.821 1.764 1.764 1.764zm5.25 -7.875c0.943 0 1.764 0.78 1.764 1.723v8.777c0 0.943 -0.821 1.723 -1.764 1.723H5.25c-0.943 0 -1.764 -0.78 -1.764 -1.723V8.737c0 -0.943 0.821 -1.723 1.764 -1.723h0.861v-1.764c0 -2.42 1.969 -4.389 4.389 -4.389s4.389 1.969 4.389 4.389v1.764H15.75z"/>
              </svg>
          {{#end}}
          <span data-i18n-text="DisclaimerText" class="actionBarDisclaimerContainer__disclaimerText">{{properties.label.disclaimerText}}</span>

          {{#if showIcon}}
            <span class="actionBarDisclaimerContainer__processorLogo actionBarDisclaimerContainer__processorLogo--{{processorId}}"></span>
          {{#end}}
        </div>
      {{#else}}
        <span data-i18n-text="DisclaimerText" class="actionBarDisclaimerContainer">{{properties.label.disclaimerText}}</span>
      {{#end}}
    {{#end}}

    {{#if hasCards}}
      <div class="actionBarCardsContainer">
        {{#each processorCards}}
          <img class="actionBarCardsContainer__card" src="{{this}}" alt="payment card"/>
        {{#end}}
      </div>
    {{#end}}
  {{#end}}
{{#end}}

{{#unless isPaymentSummaryPage}}
  <div class="tertiaryButtonsContainer">
    {{#if properties.configuration.hasResetButton}}
      <button 
        data-role="reset" 
        data-i18n-text="textdef_201" 
        type="reset"
        class="actionBarBtn actionBarBtn--reset"
      >
        {{properties.label.resetButtonText}}
      </button>
    {{#end}}

    {{#if properties.configuration.hasPrintButton}}
      <button 
        data-role="print" 
        data-i18n-text="textdef_136" 
        type="button"
        class="actionBarBtn actionBarBtn--print"
      >
        Print
      </button>
    {{#end}}
  </div>
{{#end}}