<?php
	require('inc/data.item.icons.php');
	
?>
<script>
	
</script>

<div class="row icon-picker-ctn" style="display:none;">
	<div class="col-sm-12">
		<div id="panel-0" class="panel">
			<div class="panel-hdr">
				<h2>
					<i class="fas fa-boot"></i>&nbsp;Icon <span class="fw-300">Picker</span>
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-xs btn-default inline cancel-icon-picker"><i class="fas fa-times-square text-danger"></i> Cancel</button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content px-0 py-0">
					<div class="row">
						<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 col-xl-3">
							<div class="ico-picker-cat pl-3 pr-3">
								<h3 class="text-center pt-3"><i class="fad fa-icons-alt"></i> Icon Categories</h3>
								<?php echo get_icon_picker($itemIcons, 'categories'); ?>
							</div>
						</div>
						<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 col-xl-9 ico-picker-list"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
<script>
	$('.ico-picker-cat').slimScroll({
		position: 'left',
		height: '400px',
		railVisible: true,
		alwaysVisible: true
	}); 
</script>
</div>

<!--
	<div class="row">
		<div class="col-xl-12 hidden-lg-down              bg-primary-50 colorfusion-400">XL</div>
		<div class="col-xl-12 hidden-md-down hidden-xl-up bg-info-50 colorfusion-400">LG</div>
		<div class="col-xl-12 hidden-sm-down hidden-lg-up bg-success-50 colorfusion-400">MD</div>
		<div class="col-xl-12 hidden-xs-down hidden-md-up bg-warning-50 colorfusion-400">SM</div>
		<div class="col-xl-12 hidden-sm-up                bg-danger-50 colorfusion-400">XS</div>
	</div>
-->

<div class="row">
	<div class="col-sm-4">
		<div id="panel-1" class="panel">
			<div class="panel-hdr">
				<h2>
					<i class="fad fa-file-search text-success"></i>&nbsp;Item <span class="fw-300">Look-Up</span>
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-xs btn-default inline"><i class="fad fa-search text-info"></i> Adv. Search</button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">
					<div id="simple-item-search" class="col-xs-row">
						<div class="form-group">
							<label class="form-label" for="addon-wrapping-left">Search by ID or Name <small>(Partial)</small></label>
							<div class="input-group flex-nowrap">
								<div class="input-group-prepend">
									<span id="quick-item-search-icon" class="input-group-text"><i class="fad fa-search fa-info fs-xl"></i></span>
								</div>
								<input id="item-quick-search" type="text" class="form-control" placeholder="Enter item id, type or partial name ..." aria-label="quick item search" aria-describedby="addon-wrapping-left" value="rapier"/>
							</div>
						</div>
					</div>
					<div id="quick-item-list" class="col-xs-12" style="padding-top:15px;padding-bottom:15px;">
						
					</div>
				</div>
			</div>
		</div>
	</div>



	<div class="col-sm-8">
		<div id="panel-2" class="panel">
			<div class="panel-hdr">
				<h2>
					<i class="fad fa-helmet-battle text-primary"></i>&nbsp;Item <span class="fw-300">Editor</span>
					<span id="item-editor-header-label" class="btn btn-md btn-info hidden"></span>
				</h2>
				<div class="panel-toolbar item-edit-toolbar hidden">
					<button class="btn btn-xs btn-default inline item-edit-save"><i class="fas fa-save color-info-400"></i> Save</button>&nbsp;
					<button class="btn btn-xs btn-default inline item-edit-cancel"><i class="fas fa-times-square text-danger"></i> Cancel</button>
				</div>
			</div>
			<div class="panel-container">
				<div id="item-editor-content" class="panel-content">
					<p class="text-center animated fadeInUp item-editor-info">
						<i class="fad fa-hand-point-left text-primary animated shake"></i><br><span class="inline animated fadeInLeft">Search for an item to view.</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
<script>$(document).ready(function() { if($('#item-quick-search').val().length > 0) { $('#item-quick-search').trigger('keyup'); }  });</script>

