<div class="container text-center mt-5">
  @if (errorCode && showErrorCode) {
    <h1>{{ errorCode }}</h1>
  }
  <h2>
    @if (!errorTitle && isDefaultErrorCode) {
      {{ 'it.utils.error-page.' + errorCode + '.title' | translate }}
    } @else {
      {{ errorTitle || 'it.errors.generic' | translate }}
    }
  </h2>

  <p class="mt-3 w-75 mx-auto">
    @if (!errorDescription && isDefaultErrorCode) {
      {{ 'it.utils.error-page.' + errorCode + '.description' | translate }}
    } @else {
      {{ errorDescription || 'it.errors.generic-support-message' | translate }}
    }
  </p>

  @if (showBackButton || showHomeButton) {
    <div class="mt-5">
      @if (showBackButton) {
        <it-back-button></it-back-button>
      }
      @if (showHomeButton) {
        <a itButton="outline-primary" class="ms-3" routerLink="/" title="{{ 'it.utils.error-page.go-to-homepage' | translate }}">
          {{ 'it.utils.error-page.go-to-homepage' | translate }}
        </a>
      }
    </div>
  }
</div>
