<div class="error-page">
	<div class="error-container fade-in">
		<div class="error-content">
			<div class="error-icon-section">
				<mat-icon class="error-main-icon">error_outline</mat-icon>
			</div>

			<div class="error-details">
				<h1 class="error-title">{{ errorName }}</h1>
				<p class="error-message">{{ message }}</p>
			</div>

			<div class="error-actions">
				@if (showBackButton) {
					<div class="fade-in-delayed-more">
						<button mat-button (click)="goBack()">
							<mat-icon>arrow_back</mat-icon>
							<span>{{ backButtonText }}</span>
						</button>
					</div>
				}
			</div>
		</div>

		<div class="error-illustration">
			<div class="illustration-container">
				<mat-icon class="illustration-icon">cloud_off</mat-icon>
				<div class="illustration-text">
					<span class="illustration-title">Oops!</span>
					<span class="illustration-subtitle">Something went wrong</span>
				</div>
			</div>
		</div>
	</div>
</div>
