<!-- ShowHide-Modal -->
<div class="search-project" id="PSCLIB_CUSTOMIZER_MODAL" class="col-lg-6 col-sm-12" style="display: none; width: 95%; padding: 40px; border-style: groove; border-color: #dfdfdf; border-radius: 15px; max-height: 95%; overflow: auto;">
	
	<!-- Add / edit data -->
	<!-- ================================================================================= -->
	<div class="container-fluid row">
		<h5>Element Customization</h5>	
	</div>
	<div class="container-fluid row">	

		<div class="table-responsive" style="max-height: 400px; overflow-y: scroll;">
		
			<table class="table table-content table-striped table-sm" >
				<thead>
					<tr style="vertical-align: middle; text-align: center;">
						<th style="font-weight: bold; width: 150px;">Property</th>
						<th>Value</th>
						<th style="font-weight: bold; width: 150px;">Option</th>
					</tr>
				</thead>
				<tbody>
					<tr>
					
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Page URL</td>
						<td><input type="text" class="form-control" placeholder="Page URL" id="PSCLIB_CUSTOMIZER_CAT_CUSTOM_URL_TXT"></td>
						<td>
							<button type="button" class="btn btn-primary" id="PSCLIB_CUSTOMIZER_LINK_HERE_CMD" title="Current Page"><i class="fa fa-link" aria-hidden="true"></i></button>
							<button type="button" class="btn btn-primary" id="PSCLIB_CUSTOMIZER_LINK_ROOT_CMD" title="Website Root"><i class="fa fa-sitemap" aria-hidden="true"></i></button>
							<button type="button" class="btn btn-primary" id="PSCLIB_CUSTOMIZER_LINK_MOVE_UP_CMD" title="Up Level"><i class="fa fa-level-up"></i></button>
						</td>
					</tr>
					
					<tr>
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Applied Level</td>
						<td colspan="2">
							<select class="selectpicker BSSP_PSCLIB_CUSTOMIZER_ACC_LEVEL_ID_CMB" id="PSCLIB_CUSTOMIZER_ACC_LEVEL_ID_CMB"  data-live-search="true" data-live-search-style="startsWith" data-style="btn-outline-secondary"></select>
						</td>
					</tr>
					<tr>
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Element</td>
						<td colspan="2">
							<select class="selectpicker BSSP_PSCLIB_CUSTOMIZER_CAT_CUSTOM_SSTRING_CMB" id="PSCLIB_CUSTOMIZER_CAT_CUSTOM_SSTRING_CMB" data-live-search="true" data-live-search-style="startsWith" data-style="btn-outline-secondary"></select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">CSS-Style</td>
						<td><input type="text" class="form-control" placeholder="CSS-Style" id="PSCLIB_CUSTOMIZER_CSS_STYLE_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_CSS_STYLE_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">CSS-Class</td>
						<td><input type="text" class="form-control" placeholder="CSS-Class" id="PSCLIB_CUSTOMIZER_CSS_CLASS_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_CSS_CLASS_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Title</td>
						<td><input type="text" class="form-control" placeholder="Title" id="PSCLIB_CUSTOMIZER_TITLE_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_TITLE_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Caption</td>
						<td><input type="text" class="form-control" placeholder="Caption" id="PSCLIB_CUSTOMIZER_CAPTION_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_CAPTION_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Placeholder</td>
						<td><input type="text" class="form-control" placeholder="Placeholder" id="PSCLIB_CUSTOMIZER_PLACEHOLDER_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_PLACEHOLDER_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Data-format</td>
						<td><input type="text" class="form-control" placeholder="Data-Format" id="PSCLIB_CUSTOMIZER_DATA_FORMAT_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_DATA_FORMAT_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Step</td>
						<td><input type="text" class="form-control" placeholder="Step" id="PSCLIB_CUSTOMIZER_STEP_TXT" readonly></td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_STEP_CMB">
								<option value="1">Default</option>
								<option value="2">Override</option>
							</select>
						</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Readonly</td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_READONLY_CMB">
								<option value="1">Default</option>
								<option value="2">ReadOnly</option>			
								<option value="3">Writable</option>		
							</select>
						</td>
						<td>&nbsp;</td>
					</tr>
					<tr style="cursor: pointer;">
						<td style="font-weight: bold; vertical-align: middle; text-align: right;">Disabled</td>
						<td>
							<select class="form-control" id="PSCLIB_CUSTOMIZER_DISABLED_CMB">
								<option value="1">Default</option>
								<option value="2">Disabled</option>			
								<option value="3">Enabled</option>				
							</select>
						</td>
						<td>&nbsp;</td>
					</tr>
				</tbody>
			</table>
		</div>
		
	</div>
	
	<!-- Action Buttons -->
	<!-- ================================================================================= -->
	<div class="modal-footer justify-content-between">	
		<div class="table-responsive">	
			<table class="table table-content table-striped table-sm">
				<tbody>
					<tr>
						<td style="width: 33%;">
							<button class="btn btn-secondary" style="width: 100%; height: 50px;" type="button" id="PSCLIB_CUSTOMIZER_MODAL_CLOSE_CMD" title="Cancel"><i class="fa fa-times" aria-hidden="true"></i>&nbsp;&nbsp;Close</button>
						</td>
						<td style="width: 33%;">
							<button class="btn btn-warning" style="width: 100%; height: 50px;" type="button" id="PSCLIB_CUSTOMIZER_MODAL_CLEAR_CMD" title="Cancel"><i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;&nbsp;Clear</button>
						</td>
						<td style="width: 33%;">
							<button class="btn btn-primary" style="width: 100%; height: 50px;" type="button" id="PSCLIB_CUSTOMIZER_MODAL_APPLY_CMD" title="OK"><i class="fa fa-check-circle" aria-hidden="true"></i>&nbsp;&nbsp;Apply Settings</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
</div>


<script type="text/javascript" src="<!--[#SITE_URL;]-->/res/import/category/customize/customizer.js"></script>