<!-- TODO: Provide an option to override the default templates. -->
<ng-container *ngTemplateOutlet="isExpert === true ? defaultExpertTemplate : defaultRetailTemplate">
</ng-container>

<ng-template #defaultRetailTemplate>
  <div class="action-button-container" [class.has-margin]="hasMargin">
    @if (!pageActionStatus?.nextHidden) {
    <button
      data-testid="retail-next-button"
      class="button"
      nxButton="block primary"
      (click)="navigateNext()"
      [attr.trackId]="'btn_Nav'"
      [attr.trackValue]="'forward'"
      [disabled]="pageActionStatus?.nextDisabled"
      *aclTag="(pageId$ | async) + '/next-button'"
    >
      {{ (nextButtonLabel | conditionalLabel | async) || defaultNextLabel }}
    </button>
    } @if (pageActionStatus?.showSaveOfferButton) {
    <button
      data-testid="retail-saveOffer-button"
      class="button"
      nxButton="block secondary"
      (click)="saveOffer()"
      [attr.trackId]="'btn_SaveOffer'"
      [attr.trackValue]="'saveOffer'"
      i18n="@@page-action.save-offer-button-label"
      *aclTag="(pageId$ | async) + '/save-offer-button'"
    >
      Save and email proposal
    </button>
    } @if (pageActionStatus?.customActions?.length) { @for (customAction of
    pageActionStatus?.customActions; track customAction.id) {
    <button
      [attr.data-testid]="'retail-' + customAction.id + '-button'"
      class="button"
      nxButton="block secondary"
      (click)="triggerCustomAction(customAction)"
      [attr.trackId]="'btn_' + customAction.id"
      [attr.trackValue]="customAction.id"
      *aclTag="(pageId$ | async) + '/' + customAction.id"
    >
      @if (customAction.icon) {
      <nx-icon [name]="customAction.icon" nxIconPositionStart></nx-icon>
      }
      {{ customAction.label }}
    </button>
    } } @if (!pageActionStatus?.backHidden) {
    <button
      data-testid="retail-back-button"
      class="button"
      nxPlainButton
      (click)="navigateBack()"
      [attr.trackId]="'btn_Nav'"
      [attr.trackValue]="'backward'"
      [disabled]="pageActionStatus?.backDisabled"
      *aclTag="(pageId$ | async) + '/back-button'"
    >
      <nx-icon name="arrow-left" nxIconPositionStart></nx-icon
      >{{ (backButtonLabel | conditionalLabel | async) || defaultBackLabel }}
    </button>
    }
  </div>
</ng-template>

<ng-template #defaultExpertTemplate>
  <div class="buttons-container" [class.has-margin]="hasMargin">
    <div class="extra-button-container">
      @if (pageActionStatus?.showCancelButton) {
      <button
        data-testid="expert-cancel-button"
        nxPlainButton
        (click)="cancel()"
        [attr.trackId]="'btn_Cancel'"
        [attr.trackValue]="'cancel'"
        *aclTag="(pageId$ | async) + '/cancel-button'"
      >
        <nx-icon name="close" nxIconPositionStart></nx-icon>
        {{ (cancelButtonLabel | conditionalLabel | async) || defaultCancelLabel }}
      </button>
      } @if (pageActionStatus?.showSaveOfferButton) {
      <button
        data-testid="expert-saveOffer-button"
        class="button"
        nxPlainButton
        (click)="saveOffer()"
        [attr.trackId]="'btn_SaveOffer'"
        [attr.trackValue]="'saveOffer'"
        *aclTag="(pageId$ | async) + '/save-offer-button'"
      >
        <nx-icon name="save-o" nxIconPositionStart></nx-icon>
        <ng-container i18n="@@page-action.save-offer-button-label">
          Save and email proposal
        </ng-container>
      </button>
      } @if (pageActionStatus?.customActions?.length) { @for (customAction of
      pageActionStatus?.customActions; track customAction.id) {
      <button
        [attr.data-testid]="'expert-' + customAction.id + '-button'"
        class="button"
        nxPlainButton
        (click)="triggerCustomAction(customAction)"
        [attr.trackId]="'btn_' + customAction.id"
        [attr.trackValue]="customAction.id"
        *aclTag="(pageId$ | async) + '/' + customAction.id"
      >
        @if (customAction.icon) {
        <nx-icon [name]="customAction.icon" nxIconPositionStart></nx-icon>
        }
        {{ customAction.label }}
      </button>
      } }
    </div>
    <div class="action-button-container">
      @if (!pageActionStatus?.nextHidden) {
      <button
        data-testid="expert-next-button"
        class="button"
        nxButton="primary small-medium"
        (click)="navigateNext()"
        [attr.trackId]="'btn_Nav'"
        [attr.trackValue]="'forward'"
        [disabled]="pageActionStatus?.nextDisabled"
        *aclTag="(pageId$ | async) + '/next-button'"
      >
        {{ (nextButtonLabel | conditionalLabel | async) || defaultNextLabel }}
      </button>
      } @if (!pageActionStatus?.backHidden) {
      <button
        data-testid="expert-back-button"
        class="button"
        [nxButton]="
          pageActionStatus?.backButtonUseTertiaryStyle
            ? 'tertiary small-medium'
            : 'secondary small-medium'
        "
        (click)="navigateBack()"
        [attr.trackId]="'btn_Nav'"
        [attr.trackValue]="'backward'"
        [disabled]="pageActionStatus?.backDisabled"
        *aclTag="(pageId$ | async) + '/back-button'"
      >
        {{ (backButtonLabel | conditionalLabel | async) || defaultBackLabel }}
      </button>
      }
    </div>
  </div>
</ng-template>

./actions.component.scss

@use '../../../styles/breakpoints.scss' as *;
@use '../../../styles/spacing.scss' as *;

:host {
  display: block;
  padding-block: var(--vertical-outer-section-spacing);
  width: 100%;

  > .action-button-container.has-margin,
  > .buttons-container.has-margin {
    @include frame-spacing;
  }

  .action-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    width: 100%;

    @media (min-width: $breakpoint-m) {
      margin-inline: auto;
      min-width: 256px;
      width: max-content;
    }
  }
}

:host-context(.is-stacked),
:host-context(.is-centered) {
  .buttons-container {
    margin-inline: auto;
  }
}

// removes padding-bottom if no buttons are visible
:host(.expert-layout):has(.buttons-container .extra-button-container:empty):has(
    .buttons-container .action-button-container:empty
  ) {
  padding-bottom: 0;
}

:host(.retail-layout):has(.action-button-container:empty) {
  padding-bottom: 0;
}

:host(.no-spacing) {
  padding-bottom: 0;
}

:host(.retail-layout.no-spacing):has(.action-button-container:empty),
:host(.expert-layout.no-spacing):has(.buttons-container .extra-button-container:empty):has(
    .buttons-container .action-button-container:empty
  ) {
  padding: 0;
}

:host(.expert-layout) {
  .buttons-container {
    display: flex;
    justify-content: space-between;
  }

  .extra-button-container {
    display: flex;
    gap: 32px;
    width: 100%;
  }

  .action-button-container {
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row-reverse;
    gap: 16px;
    margin-left: 80px;
  }

  .button {
    min-width: 128px;
  }
}

.buttons-container.has-margin {
  max-width: 100%;
  width: var(--grid-max-width);
}

.button {
  margin: 0;
  min-width: 256px;
}

:host(:empty) {
  padding: 0;
}