<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>

