<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" *ngIf="!careerProfile?.NoReference" style="margin-top: 15px;">

        <div class="row reference-wrapper" *ngFor="let referee of careerProfile.Referees; let i = index;">

            <div class="remove-record">
                <i class="fa fa-remove" (click)="removeReferee(referee)"></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" 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>


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