<article class="item-view">
  <!-- DETAILS: HEADER -->
  <header class="item-view__header vertical-spacing">
    <div class="container">
      <h1 class="heading">
        {{ submission?.attributes.title }}
      </h1>
      <p class="mb-0">
        {{ 'Datasets.SubmissionItemInfo' | translate }}
      </p>
    </div>
  </header>

  <!-- DETAILS: BODY -->
  <section class="item-view__body vertical-spacing">
    <div class="container clearfix">
      <!-- api notifications -->
      <app-notifications></app-notifications>

      <!-- notes -->
      <p class="mb-3" *ngIf="submission?.attributes.notes">
        <strong class="d-block"> {{ 'DatasetForm.DataDescription' | translate }}: </strong>
        {{ submission?.attributes.notes }}
      </p>

      <!-- organization_name -->
      <p class="mb-3" *ngIf="submission?.attributes.organization_name">
        <strong class="d-block"> {{ 'DataProposal.Institution' | translate }}: </strong>
        {{ submission?.attributes.organization_name }}
      </p>

      <!-- data_link -->
      <p class="mb-3" *ngIf="submission?.attributes.data_link">
        <strong class="d-block"> {{ 'DataProposal.DataLink' | translate }}: </strong>
        <a [href]="submission?.attributes.data_link" target="_blank">
          {{ submission?.attributes.data_link }}

          <span class="visually-hidden">
            {{ 'SkipTo.NewWindow' | translate }}
          </span>
        </a>
      </p>

      <!-- potential_possibilities -->
      <p class="mb-3" *ngIf="submission?.attributes.potential_possibilities">
        <strong class="d-block"> {{ 'DatasetForm.PotentialPossibilities' | translate }}: </strong>
        {{ submission?.attributes.potential_possibilities }}
      </p>

      <!-- FEEDBACK -->
      <form class="custom-form py-2" [formGroup]="feedbackForm" (ngSubmit)="onFormSubmit()" *ngIf="!isFeedbackSent">
        <!-- feedback -->
        <div
          class="form-group"
          [ngClass]="{
            'form-group-invalid': feedbackForm.controls.feedback.touched && feedbackForm.controls.feedback.invalid,
          }">
          <label for="feedback" class="font-weight-bold" style="font-size: inherit">
            {{ 'DataProposal.Feedback' | translate }}:
          </label>

          <!-- feedback textarea -->
          <textarea
            class="form-control"
            name="feedback"
            id="feedback"
            rows="5"
            formControlName="feedback"
            [attr.aria-describedby]="'feedback_error'"
            [attr.aria-invalid]="feedbackForm.controls.feedback.touched && feedbackForm.controls.feedback.invalid">
          </textarea>

          <!-- feedback error -->
          <div
            role="alert"
            aria-live="polite"
            id="feedback_error"
            @toggleVertically
            *ngIf="feedbackForm.controls.feedback.touched && feedbackForm.controls.feedback.invalid">
            <!-- required error -->
            <small class="form-text text-danger" *ngIf="feedbackForm.controls.feedback.errors?.required">
              {{ 'Validation.VarRequired' | translate: { param: 'Datasets.Feedback' | translate } }}
            </small>

            <!-- min length error -->
            <small class="form-text text-danger" *ngIf="feedbackForm.controls.feedback.errors?.minlength">
              {{ 'Validation.VarRequired' | translate: { param: 'Datasets.Feedback' | translate } }}
            </small>

            <!-- max length error -->
            <small class="form-text text-danger" *ngIf="feedbackForm.controls.feedback.errors?.maxlength">
              {{
                'Validation.VarMaxFieldLengthExceeded'
                  | translate
                    : { param: feedbackForm.controls.feedback.errors.maxlength['actualLength'] - maxFeedbackLength }
              }}
            </small>
          </div>
        </div>

        <!-- captcha -->
        <app-math-captcha formControlName="captcha"></app-math-captcha>

        <!-- fake submit -->
        <button
          type="button"
          class="btn btn-secondary"
          aria-describedby="feedback_error captcha_required_error captcha_number_error"
          *ngIf="!feedbackForm.valid">
          {{ 'Action.Send' | translate }}
        </button>

        <!-- submit -->
        <button type="submit" class="btn btn-primary" *ngIf="feedbackForm.valid">
          {{ 'Action.Send' | translate }}
        </button>
      </form>

      <!-- feedback sent -->
      <div class="alert alert-success" role="alert" aria-live="assertive" *ngIf="isFeedbackSent">
        {{ 'DataProposal.Message' | translate }}
      </div>
    </div>
  </section>
</article>
