<div id="IdcDivStaff"  class="ximeo_bg-light w-100 h-100 p-2 m-0" style="display: none !important">

	<iframe id="IdcStaffEditorFrame" class="w-100 h-100" style="display: none;"></iframe>

	<div id="IdcStaffSplitter1_2" class="splitter-v w-100 h-100 m-0 p-0" data-ratio="0.3" style="background-color: #F0F0F0;">
			
		<div id="IdcStaffPan1" class="pan-left ximeo_bg-light m-0 p-1">
			
			<div class="container h-100 w-100 m-0 p-0">
											
				<div class="d-flex flex-column w-100 h-100 m-0 p-0">
											
					<div class="row w-100 m-0 p-0">
						<div class="ximeo_caption w-100 m-0 ps-2 pe-2 pt-2 pb-2" >
								<div class="row w-100 m-0 p-0">
									<div class="col m-0 p-0">
										<span data-langkey="Staff list"></span>
									</div>
									<div class="col">
										<div class="d-flex flex-row-reverse w-100 h-100 m-0 p-0">
											<div class="col-md-auto h-100 m-0 p-0">
												<label class="ximeo_checkbox">
  													<input id="IdcStaffActiveJob" type="checkbox" onclick="StaffActiveJobClicked()">
  													<img class="img-unchecked imgclickable ximeo_bmp" src="<?php echo ($GLOBALS["EOQUAL_ROOT"]);?>/eoQUAL/SubFW/bmp/history_white.png">
													<img class="img-checked imgclickable ximeo_bmp ximeo_bg_gray_7" src="<?php echo ($GLOBALS["EOQUAL_ROOT"]);?>/eoQUAL/SubFW/bmp/history_white.png">
												</label>
											</div>
										</div>
									</div>
								</div>
						</div>
					</div>
				
					<div class="row flex-grow-1 bg-light w-100 m-0">
						<div id="IdcStaffListDTContainer" class="w-100 h-100 m-0 p-2">
						</div>
					</div>

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

		<div id="IdcStaffSep1_2" class="separator_v"></div>

		<div id="IdcStaffPan2" class="pan-right ximeo_bg-light m-0 p-1">
			
			<div class="container h-100 w-100 m-0 p-0 rounded-top">
											
				<div class="d-flex flex-column w-100 h-100 m-0 p-0">
											
					<div class="row w-100 m-0 ps-0 pe-0 pt-0 pb-0">
		
						<ul class="nav nav-tabs rounded-top" id="myTab" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link active" id="IdcStaffInformationsTab" data-bs-toggle="tab" data-bs-target="#IdcStaffInformationPanel" type="button" role="tab">
											Informations
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link" id="IdcStaffFormationsTab" data-bs-toggle="tab" data-bs-target="#IdcStaffFormationPanel" type="button" role="tab">
											Formation
								</button>
							</li>
						</ul>
		
					</div>

					<div class="row flex-grow-1 m-0 ps-0 pe-0 pt-0 pb-0" style="min-height: 0px;">

						<div class="tab-content m-0 p-0 pt-2 bg-light" style="max-height: 100% !important;">
							
							<div class="tab-pane fade h-100 w-100 m-0 p-0 bg-primary" id="IdcStaffFormationPanel" role="tabpanel" aria-labelledby="IdcStaffFormationsTab">		

								<div id="IdcStaffSplitter3_4" class="splitter-h w-100 h-100 m-0 p-0 bg-light" data-ratio="0.4" >
			
									<div id="IdcStaffPan3" class="pan-top m-0 p-0 ps-1 pe-1 pb-1">
										
										<div id="IdcStaffSplitter5_6" class="splitter-v w-100 h-100 m-0 p-0 bg-light" data-ratio="0.6">
											
											<div id="IdcStaffPan5" class="pan-left bg-light m-0 p-0 ps-1 pe-1">
												<div class="container h-100 w-100 m-0 p-0">
													<div class="d-flex flex-column w-100 h-100 m-0 p-0 border">
														<div class="row w-100 m-0 p-0">
															<div class="w-100 m-0 ps-2 pe-2 pt-1 pb-1 border-bottom ximeo_bg-dark-3 text-white" >
																<div class="row w-100 m-0 p-0">
																	<div class="col-auto m-0 p-0">
																		<span data-langkey="Formation list"></span>
																	</div>
																	<div class="col m-0 p-0">
																		<div class="d-flex flex-row-reverse w-100 h-100 m-0 p-0">
																			<div class="col-md-auto h-100 m-0 p-0">
																				<img src="<?php echo ($GLOBALS["EOQUAL_ROOT"]);?>/eoQUAL/SubFW/bmp/trash_white.png" title="Delete" class="imgclickable ximeo_bmp" onclick="StaffFormationDelete ()">
																			</div>
											
																			<div class="col-md-auto h-100 m-0 p-0 ps-2">
																				<img src="<?php echo ($GLOBALS["EOQUAL_ROOT"]);?>/eoQUAL/SubFW/bmp/add_white.png" title="Add" class="imgclickable ximeo_bmp" onclick="StaffFormationAdd ()">
																			</div>

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

														<div class="row flex-grow-1 bg-light w-100 m-0">
															<div id="IdcStaffFormationListDTContainer" class="w-100 h-100 m-0 p-2">
															</div>
														</div>
													</div>
												</div>
											</div>

											<div id="IdcStaffSep5_6" class="separator_v"></div>

											<div id="IdcStaffPan6" class="pan-right light m-0 p-0 ps-1 pe-1">
												<div class="container h-100 w-100 m-0 p-0">
													<div class="d-flex flex-column w-100 h-100 m-0 p-0 border">
														<div class="row w-100 m-0 p-0">
															<div class="w-100 m-0 ps-2 pe-2 pt-1 pb-1 border-bottom ximeo_bg-dark-3 text-white" >
																<div class="row w-100 m-0 p-0">
																	<div class="col-auto m-0 p-0">
																		<span data-langkey="Details"></span>
																	</div>
																	<div class="col m-0 p-0">
																		<div class="d-flex flex-row-reverse w-100 h-100 m-0 p-0">
																			<div class="col-md-auto h-100 m-0 p-0 ps-2">
																				<img src="<?php echo ($GLOBALS["EOQUAL_ROOT"]);?>/eoQUAL/SubFW/bmp/save_white.png" title="Add" class="imgclickable ximeo_bmp" onclick="StaffFormationSave ()">
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>

														<div class="row flex-grow-1 bg-light w-100 m-0 p-2">
															<div class="col w-100 m-0 p-0">
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationTitle" class="col-form-label m-0 p-0 pt-1" data-langkey="Title :">Title : </label>
																	</div>
																	<div class="col m-0 p-0">
																		<input type="text" class="form-control w-100 m-0 p-0 ps-2" id ="IdcStaffFormationTitle">
																	</div>
																</div>
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationStatus" class="col-form-label m-0 p-0 pt-1" data-langkey="Status :">Status : </label>
																	</div>
																	<div class="col-auto m-0 p-0">
																		<select class="form-select form-select-sm" id ="IdcStaffFormationStatus">
																		<option value="3" data-langkey="Planned-f"></option>
																		<option value="4" data-langkey="Completed-f"></option>
																	</select>
																	</div>
																</div>
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationPlanned" class="col-form-label m-0 p-0 pt-1" data-langkey="Planned :">Planned : </label>
																	</div>
																	<div class="col-auto m-0 p-0">
																		<input type="date" class="form-control form-control-sm m-0 p-0 ps-2 fs-6" id ="IdcStaffFormationPlanned" autocomplete="off" placeholder="jj/mm/aaaa">
																	</div>
																</div>
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationPerformed" class="col-form-label m-0 p-0 pt-1" data-langkey="Performed :"></label>
																	</div>
																	<div class="col-auto m-0 p-0">
																		<input type="date" class="form-control form-control-sm m-0 p-0 ps-2 fs-6" id ="IdcStaffFormationPerformed" autocomplete="off" placeholder="jj/mm/aaaa">
																	</div>
																</div>
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationType" class="col-form-label m-0 p-0 pt-1" data-langkey="Type :"></label>
																	</div>
																	<div class="col m-0 p-0">
																		<input type="text" class="form-control w-100 m-0 p-0 ps-2" id ="IdcStaffFormationType">
																	</div>
																</div>
																<div class="row w-100 m-0 p-0 mb-1">
																	<div class="col-3 m-0 p-0">
																		<label for="IdcStaffFormationComment" class="col-form-label m-0 p-0 pt-1" data-langkey="Comment :"></label>
																	</div>
																	<div class="col m-0 p-0">
																		<textarea type="text" class="form-control w-100 m-0 p-0 ps-2" rows="5" id ="IdcStaffFormationComment"></textarea>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

										</div>
			
									</div>

									<div id="IdcStaffSep3_4" class="separator_h"></div>

									<div id="IdcStaffPan4" class="pan-bottom ximeo_bg-light m-0 p-0 pb-0">
										
										<div class="container h-100 w-100 m-0 p-0">
											<div class="d-flex flex-column w-100 h-100 m-0 p-0 border">
												<div class="row flex-grow-1 bg-light w-100 m-0 p-0">
													<div id="IdcStaffFormationDocListDTContainer" class="col w-100 h-100 m-0 p-0">
													</div>
												</div>
											</div>
										</div>

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

							<div class="tab-pane fade show active h-100 w-100 m-0 p-0 bg-warning" id="IdcStaffInformationPanel" role="tabpanel" aria-labelledby="IdcStaffInformationsTab">

								<div class="container h-100 w-100 m-0 p-0 bg-light">
											
									<div class="d-flex flex-column w-100 h-100 m-0 p-0">
											
										<div class="row w-100 m-0 ps-2 pe-2 pt-2 pb-0">
											<div class="col m-0 p-0">
												<div class="row m-0 p-0 w-100 align-items-center">
													<div class="col-auto">
														<label for="IdcStaffInfoName" class="col-form-label" data-langkey="Name :">Name : </label>
													</div>
													<div class="col-auto">
														<input type="text" class="form-control m-0 p-0 ps-2" id ="IdcStaffInfoName" disabled>
													</div>
												</div>
												<div class="row m-0 p-0 w-100 align-items-center">
													<div class="col-auto">
														<label for="IdcStaffInfoJob" class="col-form-label" data-langkey="Job :">Job : </label>
													</div>
													<div class="col-auto">
														<input type="text" class="form-control m-0 p-0 ps-2" id ="IdcStaffInfoJob" disabled>
													</div>
												</div>
											</div>

											<div class="col-auto">
												<div class="preview-container">
        											<p id="IdcStaffNoImage" data-langkey="No photos selected"></p>
        											<img id="IdcStaffImage" style="display: none;" />
    											</div>
											</div>
										</div>

										<div class="row flex-grow-1 m-0 ps-2 pe-2 pt-2 pb-2 bg-light" style="min-height: 0px;">

											<div class="container h-100 w-100 m-0 p-0">
												<div class="d-flex flex-column w-100 h-100 m-0 p-0 border">
													<div class="row flex-grow-1 bg-light w-100 m-0">
														<div id="IdcStaffInfoDocListDTContainer" class="col w-100 h-100 m-0 p-0">
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>

								</div>

							</div>

						</div>
					</div>

				</div>

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