<form class="custom-form" [formGroup]="commentForm" (ngSubmit)="onFormSubmit()">

    <!-- comment -->
    <div class="form-group mb-2" 
        [ngClass]="{'form-group-invalid': commentForm.controls.comment.invalid && commentForm.controls.comment.touched}">
        
        <label for="comment" class="visually-hidden" [ngClass]="{'visually-hidden': isEditMode}">
            {{ isEditMode ? 'Edycja komentarza' : 'Dodaj nowy komentarz' }}
        </label>

        <!-- comment textarea -->
        <textarea class="form-control" name="comment" id="comment" rows="3"
            #commentField
            placeholder="komentarz"
            formControlName="comment"
            [attr.aria-describedby]="'comment_error'"
            [attr.aria-invalid]="commentForm.controls.comment.invalid && commentForm.controls.comment.touched">
        </textarea>
        
        <!-- comment error -->
        <div role="alert" aria-live="polite" id="comment_error" @toggleVertically
            *ngIf="commentForm.controls.comment.invalid && commentForm.controls.comment.touched">

            <!-- required and minLength error -->
            <small class="form-text text-danger" 
                *ngIf="commentForm.controls.comment.errors?.required || commentForm.controls.comment.errors?.minlength">
                Wymagana, minimalna liczba znaków: {{ this.minCommentLength }}
            </small>
            
            <!-- max length error -->
            <small class="form-text text-danger" *ngIf="commentForm.controls.comment.errors?.maxlength">
                Maksymalna liczba znaków została przekroczona o
                {{ commentForm.controls.comment.errors.maxlength['actualLength'] - maxCommentLength }}
            </small>
        </div>
    </div>

    <!-- submit form -->
    <div>

        <!-- fake submit -->
        <button type="button" class="btn btn-sm btn-secondary"
            aria-describedby="comment_error"
            *ngIf="commentForm.invalid">
            {{ isEditMode ? 'Zapisz zmiany' : 'Dodaj komentarz' }}
        </button>

        <!-- submit -->
        <button type="submit" class="btn btn-sm btn-primary"
            *ngIf="commentForm.valid">
            {{ isEditMode ? 'Zapisz zmiany' : 'Dodaj komentarz' }}
        </button>
        
        <!-- cancel (edit mode) -->
        <button type="button" class="btn btn-sm btn-outline-primary ml-2"
            (click)="onEditCancel()"
            *ngIf="isEditMode">
            Anuluj
        </button>
    </div>
</form>
