<section class="container">
  @if (shouldShowErrorAlert()) {
    @for (error of errorMessages(); track error) {
      <div class="alert alert-danger">{{ error }}</div>
    } @empty {
      <div class="alert alert-danger">{{ 'Forms.General.ErrorToast' | translate }}</div>
    }
  }
  @if (!isFormSent()) {
    <h1 class="form-header">{{ 'Forms.PageHeader.Heading.PoCoTo' | translate }}</h1>
    <div class="form-wrapper col-md-10 col-lg-8">
      <form appScrollToFirstError [formGroup]="mainForm" (ngSubmit)="onFormSubmit()">
        <app-name-email-form-part hideNameControl requiredEmail />
        <app-po-co-to-fields-form-part />
        <button type="submit" class="btn btn-primary">
          {{ 'Forms.Buttons.Send' | translate }}
        </button>
      </form>
    </div>
  } @else {
    <app-form-sent-info>
      <ng-container ngProjectAs="button">
        <a [routerLink]="['/!showcase'] | localize" class="btn btn-primary" role="button">
          {{ 'Forms.Buttons.GoToPoCoToPage' | translate }}
        </a>
      </ng-container>
    </app-form-sent-info>
  }
</section>
