<div class="position-relative">
    <app-overlay [isActive]="isLoading || isSaving"></app-overlay>

    <h4 class="tab-heading">Tell us about your referees</h4>

    <div class="row" style="margin-top: 24px;" *ngIf="!careerProfile?.Referees[0]?.RefereeName && careerProfile?.Referees?.length <= 1">
        <div class="col-md-12 form-group">
            <p-checkbox label="I don't have any referees to record" [binary]="true" [(ngModel)]="careerProfile.NoReference"></p-checkbox>
        </div>
    </div>

    <form #form="ngForm" style="margin-top: 15px;">

        <ng-container *ngIf="!careerProfile?.NoReference">
            <div class="row reference-wrapper" *ngFor="let referee of careerProfile.Referees; let i = index;">

                <div class="remove-record" (click)="removeReferee(referee)">
                    <i class="fa fa-remove"></i>
                </div>

                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Referee Name</label>
                            <app-form-control>
                                <input type="text" class="form-control" placeholder="Referee Name" required name="RefereeName{{i}}" [(ngModel)]="referee.RefereeName">
                            </app-form-control>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Email</label>
                            <app-form-control>
                                <input type="text" class="form-control" placeholder="Email address" name="Email{{i}}" [(ngModel)]="referee.Email" email>
                            </app-form-control>
                        </div>

                        <div class="col-md-6 form-group">
                            <label>Phone</label>
                            <app-form-control>
                                <p-inputMask (focusout)="checkMobilePattern(referee)" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999"
                                             styleClass="form-control" placeholder="Mobile No" [(ngModel)]="referee.Phone" name="Mobile{{i}}">
                                </p-inputMask>
                            </app-form-control>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>Role</label>
                            <app-form-control>
                                <input type="text" class="form-control" placeholder="Role" name="Role{{i}}" [(ngModel)]="referee.Role">
                            </app-form-control>
                        </div>

                        <div class="col-md-3 col-md-offset-3 form-group">
                            <label>Written Reference</label>
                            <p-fileUpload *ngIf="!referee?.WrittenReference" name="File" withCredentials="true" auto="true" chooseLabel="Browse" [disabled]="uploadingFile"
                                          url="{{apiUrl}}uploadFile" (onUpload)="onUpload($event, referee)" (onBeforeUpload)="uploadStarted()">
                                <ng-template let-file pTemplate="file">
                                    <div>Uploading...</div>
                                </ng-template>
                            </p-fileUpload>
                            <div class="uploaded-attachment" *ngIf="referee?.WrittenReference">
                                <span *ngIf="!referee.WrittenReference.URI">{{referee.WrittenReference.Name}}</span>
                                <a *ngIf="referee.WrittenReference.URI" target="_blank" [href]="apiUrl + referee.WrittenReference.URI">{{referee.WrittenReference.Name}}</a>
                                <i class="pi pi-times" (click)="removeAttachment(referee)"></i>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </ng-container>


        <div class="row">
            <div class="col-md-12">
                <button pButton class="btn btn-info-outline add-more" label="Add reference +" (click)="addReferee()">
                </button>
            </div>
        </div>

    </form>


    <div class="d-flex justify-content-center" style="margin-top: 48px;">
        <button pButton label="Next Section" class="ui-button-info next-section" [disabled]="isSaving || uploadingFile" (click)="saveReferees()"></button>
    </div>

</div>
