<nav class="wizard-navigation" [class.loading]="false" [class.compact]="false" id="wizard-navigation">
	<div class="nav-buttons">
		<!-- Cancel Button -->
		@if (config.showCancel) {
			<button
				mat-stroked-button
				class="cancel-btn"
				id="wizard-cancel-btn"
				(click)="onCancel()"
				[attr.aria-label]="'Cancel wizard and return to previous page'"
			>
				<mat-icon class="leading-icon">close</mat-icon>
				{{ config.cancelLabel || 'Cancel' }}
			</button>
		}

		@if (config.showBack) {
			<!-- Back Button -->
			<button
				mat-stroked-button
				class="back-btn"
				id="wizard-back-btn"
				(click)="onBack()"
				[attr.aria-label]="'Go back'"
			>
				<mat-icon class="leading-icon">arrow_back</mat-icon>
				{{ backButtonText }}
			</button>
		}

		<div class="spacer"></div>

		<!-- Navigation Group -->
		<div class="nav-group">
			<!-- Previous Button -->
			@if (config.showPrevious) {
				<button
					mat-stroked-button
					class="prev-btn"
					id="wizard-previous-btn"
					(click)="onPrevious()"
					[attr.aria-label]="'Go to previous step'"
				>
					<mat-icon class="leading-icon">chevron_left</mat-icon>
					{{ config.previousLabel || 'Previous' }}
				</button>
			}

			@if (config.showSkipAndFinish) {
				<!-- Skip Wizard Button -->
				<button
					mat-raised-button
					class="finish-btn"
					id="wizard-quick-create-btn"
					[disabled]="config.disableFinish ?? false"
					(click)="skipAndFinish()"
					[attr.aria-label]="'Skip wizard and finish'"
				>
					<mat-icon>bolt</mat-icon>
					{{ config.skipAndFinishLabel || 'Skip and Finish' }}
				</button>
			}

			<!-- Next Button -->
			@if (config.showNext) {
				<button
					mat-raised-button
					class="next-btn"
					id="wizard-next-btn"
					(click)="onNext()"
					[attr.aria-label]="'Continue to next step'"
				>
					{{ config.nextLabel || 'Next' }}
					<mat-icon class="trailing-icon">chevron_right</mat-icon>
				</button>
			}

			<!-- Finish Button -->
			@if (config.showFinish) {
				<button
					mat-raised-button
					class="finish-btn"
					id="wizard-finish-btn"
					[disabled]="config.disableFinish ?? false"
					(click)="onFinish()"
					[attr.aria-label]="'Complete wizard and save changes'"
				>
					<mat-icon class="leading-icon">check</mat-icon>
					{{ config.finishLabel || 'Finish' }}
				</button>
			}
		</div>
	</div>
</nav>
