<form class="bg-custom custom-form p-4" [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">
            {{ 'Datasets.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>

    <!-- submit form -->
    <div class="text-right">

        <!-- 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 }}
            {{ 'Datasets.Feedback' | translate | lowercase }}
        </button>

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

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