
<div class="card bg-light-transparent mb-3">
	<div class="card-body">
		<div class="card no-shadow" >
			<div class="card-body">

				<div class="row">

					<div class="col-2">
						<div class="row">
							<div class="col p-1 bg-light" style="border-radius:500px;">
								<div class="p-1 bg-secondary" style="border-radius:500px;">
									<div class="bg-white" style="border-radius:500px;">
										<img src="<?php echo base_url('assets/themes/web/img/users.png'); ?>" class="img img-fluid img-circle" style="border-radius:500px;">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<button class="btn btn-outline-secondary btn-sm btn-block" type="button"><i class="far fa-images"></i> update image</button>
							</div>
						</div>
					</div>

					<div class="col">
						<div class="row">
							<div class="col-12">
								<label><b>STAFF NAME : </b></label>
								FAROUQ ZAKWAN BIN ZULKIFLI
							</div>
							<div class="col-12">
								<label><b>STAFF ID : </b></label>
								ST12
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div class="table-responsive">
									<table class="table-bordered" width="100%">
										<thead>
											<tr>
												<th class="p-2 text-center">PD <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small> </th>
												<th class="p-2 text-center">ED <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">Add <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">FI <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">AQ <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">APD <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">PED <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">PM <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">PL <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">Rq <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">CE <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">BP <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">BD <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">SD <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">Rcr <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
												<th class="p-2 text-center">TPP <br><small data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="tooltip"><i class="far fa-question-circle"></i></small></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
												<td class="p-2 text-center"><i class="fas fa-times text-danger"></i></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>