<AppBarTop @title="Profile" @leftRoute="home.index" />
<section class="content-body">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="card card-profile">
					<div class="card-body">
						<div class="profile-picture mb-8">
							<img src="{{rootURL}}assets/images/ic-account.svg" alt="Account" width="96px" height="96px">
						</div>
							<div class="profile-content">
								<div class="row">
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Employee No.</span>
											<span class="data">{{model.employeeNo}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Employee Name</span>
											<span class="data">{{model.employeeName}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Nickname</span>
											<span class="data">{{model.nickname}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Job Title</span>
											<span class="data">{{model.jobTitle}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Job Position</span>
											<span class="data">{{model.jobPosition}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Division/Departement</span>
											<span class="data">{{model.divisionValue}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Office Phone No.</span>
											<span class="data">{{model.officePhone}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Province</span>
											<span class="data">{{model.provinceValue}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>City</span>
											<span class="data">{{model.cityValue}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Zip Code</span>
											<span class="data">{{model.zipCode}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Home Phone No.</span>
											<span class="data">{{model.homePhone}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Mobile Phone</span>
											<span class="data">{{model.mobilePhone}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Email Address</span>
											<span class="data">{{model.emailAddress}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Start Date</span>
											<span class="data">
												{{if (and (not-eq model.startDate null) (not (is-empty model.startDate))) (moment-format model.startDate "DD/MM/YYYY") ""}}
											</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Gender</span>
											<span class="data">{{model.genderValue}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Marital Status</span>
											<span class="data">{{model.maritalStatus}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>No. of Children</span>
											<span class="data">{{model.noOfChildren}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>ID Type</span>
											<span class="data">{{model.idType}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>ID No.</span>
											<span class="data">{{model.idNo}}</span>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="detail-row-view">
											<span>Citizenship</span>
											<span class="data">{{model.citizenship}}</span>
										</div>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>

			<div class="col-12">
				<button class="btn btn-block btn-black font-weight-bold rounded-pill mt-4" type="submit" {{action "logout"}}>Log out</button>
			</div>
		</div>
	</div>
</section>