<section>
  <header class="bg-custom vertical-spacing">
    <div class="container">
      <h1 class="heading">
        {{ 'Newsletter.Contact' | translate }}
      </h1>
    </div>
  </header>

  <!-- success message -->
  <div class="container vertical-spacing" *ngIf="successMessage">
    <p class="alert alert-success" role="alert" aria-live="polite">
      {{ 'Newsletter.SubscriptionSent' | translate }}

      <span class="d-block">
        {{ successMessage }}
      </span>
    </p>
  </div>

  <!-- form -->
  <div class="container vertical-spacing" *ngIf="!successMessage">
    <!-- api notifications -->
    <app-notifications id="notifications"></app-notifications>

    <form name="form" (ngSubmit)="onSubmit()" [formGroup]="newsletterForm">
      <!-- email -->
      <div class="form-group">
        <label for="email">
          {{ 'Newsletter.Description' | translate }}
        </label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Email' | translate | lowercase }}"
          formControlName="email"
          [attr.aria-describedby]="'email_error'"
          [attr.aria-invalid]="newsletterForm.get('email').invalid" />

        <!-- email field validation error -->
        <small
          class="form-text text-danger"
          role="alert"
          id="email_error"
          *ngIf="newsletterForm.get('email').invalid && newsletterForm.get('email').touched"
          @toggleVertically>
          {{ 'Validation.RequiredEmail' | translate }}
        </small>
      </div>

      <!-- description -->
      <p>
        {{ 'Newsletter.Description2' | translate }}
        <span class="font-weight-bold"> {{ 'Action.Subscribe' | translate }}. </span>
      </p>

      <!-- before consent is loaded -->
      <app-loader *ngIf="!newsletterConsent"></app-loader>

      <!-- consents -->
      <ng-container *ngIf="newsletterConsent">
        <div class="ml-1 mb-3 form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="allSelection"
            name="allSelection"
            [checked]="allChecked"
            (change)="onChangeAll($event.target.checked)"
            (keydown.enter)="$event.preventDefault()" />

          <label class="form-check-label clickable" for="allSelection">
            {{ 'Newsletter.SelectAll' | translate }}
          </label>
        </div>

        <!-- personal data processing -->
        <div class="ml-4 mb-3 form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="personal_data_processing"
            name="personal_data_processing"
            formControlName="personal_data_processing"
            [attr.aria-describedby]="'personal_data_processing_error'"
            [attr.aria-invalid]="newsletterForm.get('personal_data_processing').invalid"
            (change)="onChange('personal_data_processing', $event.target.checked)"
            (keydown.enter)="$event.preventDefault()" />

          <label class="form-check-label clickable" for="personal_data_processing">
            {{ newsletterConsent?.personal_data_processing }}
          </label>

          <!-- validation error -->
          <small
            class="form-text text-danger"
            id="personal_data_processing_error"
            *ngIf="
              newsletterForm.get('personal_data_processing').invalid &&
              newsletterForm.get('personal_data_processing').touched
            "
            @toggleVertically>
            {{ 'Newsletter.RequiredMessage' | translate }}
          </small>
        </div>

        <!-- personal data use -->
        <div class="ml-4 mb-3 form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="personal_data_use"
            name="personal_data_use"
            formControlName="personal_data_use"
            [attr.aria-describedby]="'personal_data_use_error'"
            [attr.aria-invalid]="
              newsletterForm.get('personal_data_use').invalid && newsletterForm.get('personal_data_use').touched
            "
            (change)="onChange('personal_data_use', $event.target.checked)"
            (keydown.enter)="$event.preventDefault()" />

          <label class="form-check-label clickable" for="personal_data_use">
            {{ newsletterConsent?.personal_data_use }}
          </label>

          <!-- validation error -->
          <small
            class="form-text text-danger"
            id="personal_data_use_error"
            *ngIf="newsletterForm.get('personal_data_use').invalid && newsletterForm.get('personal_data_use').touched"
            @toggleVertically>
            {{ 'Newsletter.RequiredMessage' | translate }}
          </small>
        </div>

        <!-- personal data use rules -->
        <div class="cms-consent-list ml-5 pl-3" [innerHTML]="cmsPageInfo.body | textToLinks" *ngIf="cmsPageInfo"></div>
      </ng-container>

      <!-- fake submit -->
      <button
        type="button"
        class="btn btn-secondary disabled ml-5"
        [attr.aria-disabled]="true"
        [attr.aria-describedby]="'backend_notifications email_error personal_data_use_error personal_data_processing_error'"
        *ngIf="newsletterForm.invalid">
        {{ 'Action.Subscribe' | translate | uppercase }}
      </button>

      <!-- submit -->
      <button type="submit" class="btn btn-primary ml-5" *ngIf="newsletterForm.valid">
        {{ 'Action.Subscribe' | translate | uppercase }}
      </button>
    </form>
  </div>
</section>
