<!--S:Main-->

<link rel="stylesheet" href="../assets/css/plugin.animate.css" />
<style>

.ui-tabs .ui-tabs-panel {
	padding-left: 0px;
	padding-right: 0px;
}

.ui-widget-header {
	background: none;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-radius: 0px;
}

#tabs.ui-widget-content {
	border: 0px;
}

.input-class {
	width: 100%;
}

.iconBrowser .iconBrowserHolder {
	max-width: 100%;
	max-height: 419px;
	overflow: auto;
}

.iconBrowser #ib-search{
	width: 150px;
	padding-left: 5px;
	float: right;
}

.iconBrowser  .ui-tabs-nav {
	padding-right: 0px;
}


.btn-try:focus,
.btn-try:active,
.btn-try:hover {
	color: #fff;
	outline: none!important;
}

</style>


	<div class="iconBrowser">

		<div id="tabs">
		{FONTSLINK}	
		{FONTS}
		</div>
	</div>


<script>

	$(".btn-try").click(function() {
		$(this).addClass($(this).attr("data-class"));

		var btn = $(this);

		setTimeout(function(){ 
			btn.removeAttr("class");
			btn.addClass("btn btn-try");
		}, 2000);

	});

	$(".input-class").click(function() {    $(this).select(); } );

	$(function() {
		$( "#tabs" ).tabs();
	});

	$("#ib-search").keyup(function(e) {
		var val = $(this).val().toLowerCase();

		if (val.trim() == "") {
			$("[data-search]").show();
		} else {
			$("[data-search]").each(function(e) {
				var attr = $(this).attr("data-search").toLowerCase();

				if (attr.indexOf(val) != -1) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		}
	});

</script>

	
<!--E:Main-->

<!--S:Group-->
					<table class="table shortcodes-list">
						<thead>
							<tr>
								<td width="50">No.</td>
								<td>Class</td>
								<td>Shortcode</td>
								<td width="100">Show</td>
							<tr>
						</thead>
						<tbody>
						{DATA}
						</tbody>
					</table>
<!--E:Group-->


<!--S:Element-->
			<tr data-search="{CLASS}">
				<td align="center">{CNT}</td>
				<td><input type="text" class="input-class" value="{CLASS}" readonly></td>
				<td><input type="text" class="input-class" value="{SHORTCODE}" readonly></td>
				<td align="center"><button class="btn btn-try" data-class="animated {CLASS}">Animate It</button></td>
			</tr>
<!--E:Element-->


<!--S:Icomoon--><h2>Icomoon Collection</h2><!--E:Icomoon-->
<!--S:FontAwesome--><h2>Icomoon Collection</h2><!--E:FontAwesome-->




<!--S:FontGroup-->
			{DATA}
<!--E:FontGroup-->

<!--S:FontElement-->
			<div id="tabs-{KEY}">			
				<div class="iconBrowserHolder">
					{ITEMS}
					<div class="clear"></div>
				</div>

			</div>
			<link rel="stylesheet" href="{FILE}">
			<script>$('head').append('<link rel="stylesheet" type="text/css" href="{FILE}">');</script>
<!--E:FontElement-->

<!--S:FontEmpty-->

<!--E:FontEmpty-->

<!--S:FontLinkGroup-->
			<ul>
			{DATA}
				<input type="text" id="ib-search" size="10" placeholder="Search"/>
			</ul>
<!--E:FontLinkGroup-->

<!--S:FontLinkElement-->
				<li><a href="#tabs-{KEY}">{TITLE}</a></li>
<!--E:FontLinkElement-->

<!--S:FontLinkEmpty-->

<!--E:FontLinkEmpty-->



<!--S:ControlText-->
			<label>Selected Icon</label>
			<span></span>
			<input type="text" id="ib-plan" readonly/>
			<button>Insert</button>
<!--E:ControlText-->

<!--S:ControlShortcode-->
			<span></span>
			<input type="text" id="ib-shortcode" readonly/>
<!--E:ControlShortcode-->



<!--S:HelperGroup-->
			<div id="tabs-helper">			
				<div class="iconBrowserHolder">
					<table class="table shortcodes-list">
						<thead>
							<tr>
								<td width="50">No.</td>
								<td>Class</td>
								<td>Description</td>
							<tr>
						</thead>
						<tbody>
						{DATA}
						</tbody>
					</table>
					<div class="clear"></div>
				</div>

			</div>

<!--E:HelperGroup-->


<!--S:HelperElement-->
			<tr data-search="{CLASS}">
				<td align="center">{CNT}</td>
				<td><input style="width: 200px; " type="text" class="input-class" value="{CLASS}" readonly></td>
				<td>{NOTE}</td>
			</tr>
<!--E:HelperElement-->
