<form #form="ngForm">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 nopad">
            <p-toolbar>
                <div class="ui-toolbar-group-left">
                    Profile
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Email Address</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="profile.EmailAddress" name="EmailAddress{{profile.ObjectID}}" fieldLabel="Email Address" type="text" pInputText class="ui-inputtext">
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Password</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
             <input [(ngModel)]="profile.Password" name="Password{{profile.ObjectID}}" fieldLabel="Password" type="password" pPassword class="ui-inputtext"> 
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Confirm Password</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
             <input [(ngModel)]="profile.ConfirmPassword" name="ConfirmPassword{{profile.ObjectID}}" fieldLabel="Confirm Password" type="password" pPassword class="ui-inputtext"> 
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label> First Name </label>
        </div>
        <div class="ui-g-12 ui-md-4">
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-5 ui-fluid">
                    <input [(ngModel)]="profile.FirstName" name="FirstName{{profile.ObjectID}}" fieldLabel="First Name" type="text" pInputText class="ui-inputtext">
                </div>
                <div class="ui-g-12 ui-md-2">
                    <label>Last Name</label>
                </div>
                <div class="ui-g-12 ui-md-5 ui-fluid">
                    <input [(ngModel)]="profile.LastName" name="LastName{{profile.ObjectID}}" fieldLabel="Last Name" type="text" pInputText class="ui-inputtext">
                </div>
            </div>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Phone</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="profile.Phone" name="Phone{{profile.ObjectID}}" fieldLabel="Phone" type="text" pInputText class="ui-inputtext">
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Upload your CV</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <p-fileUpload mode="basic" name="Upload your CV" withCredentials="true" url="{{apiBase}}uploadFile" auto="true" chooseLabel="Browse" (onUpload)="onUpload your CVUpload($event)"></p-fileUpload>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Upload your Cover Letter</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" url="{{apiBase}}uploadFile" auto="true" chooseLabel="Browse" (onUpload)="onUpload your Cover LetterUpload($event)"></p-fileUpload>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-6">
            <p-checkbox [(ngModel)]="profile.WorkRemotely" name="WorkRemotely{{profile.ObjectID}}" fieldLabel="workRemotely" binary="true"></p-checkbox>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-8">
            <label> We noticed that your location is different to the location of the job (Melbourne, 3000). </label><br/>
            <label> Are you prepared to relocate for this position? </label><br/>
            <p-checkbox [(ngModel)]="profile.Happytorelocate" name="Happytorelocate{{profile.ObjectID}}" fieldLabel="Happy to relocate" binary="true"></p-checkbox>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-6">
            <p-checkbox [(ngModel)]="profile.Agree" name="Agree{{profile.ObjectID}}" fieldLabel="agree" binary="true"></p-checkbox>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-6">
            <p-checkbox [(ngModel)]="profile.Tc" name="Tc{{profile.ObjectID}}" fieldLabel="t&c" binary="true"></p-checkbox>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2 ui-fluid">
            <p-button label="Submit"></p-button>
        </div>
    </div>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>