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

<div class="row icon-picker-ctn hidden">
	<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-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-8 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-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">
							</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>
			<div class="panel-container show">
				<div id="item-editor-content" class="panel-content">
					hi there!
				</div>
			</div>
		</div>
	</div>
</div>
<script>$(document).ready(function() { if($('#item-quick-search').val().length > 0) { $('#item-quick-search').trigger('keyup'); }  });</script>

