{% layout 'layout' %}
{% block title %}Panels{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li class="active"><a href="ui-advancedpanels.html">Advanced Panels</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{{ "plugins/wijets/wijets.js" | asset_url | script_tag }}     								<!-- Wijet -->

<script>
	$('#reset').click(function () {
		bootbox.confirm("Are you sure you want to clear Local Storage? This will clear ALL globally set settings", function() {
			localStorage.clear();
		}); 
	});

	$.wijets().make();
</script>
{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-12">
		<div class="alert alert-info clearfix">
			<h3 class="mt0">Advanced Panels</h3>
			<p>Wijets is a jQuery plugin that provides advanced panel options which can be configured all with a single line of code - <code>$.wijets().make();</code>. All other settings are configured directly with data-attributes!</p>
			<button class="btn btn-info mt20 pull-right" id="reset">Reset All Settings</button>
		</div>
	</div>
</div>

<div class="row" data-widget-group="group-demo">
	<div class="col-md-4">
		<div class="panel" data-widget='{"id" : "wiget1"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-inverse" data-widget='{"id" : "wiget2"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-primary" data-widget='{"id" : "wiget3"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-success" data-widget='{"id" : "wiget4"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-danger" data-widget='{"id" : "wiget5", "draggable": "false"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel (non-draggable)</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-warning" data-widget='{"id" : "wiget6"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-brown" data-widget='{"id" : "wiget7"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-purple" data-widget='{"id" : "wiget8"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
		<div class="panel panel-midnightblue" data-widget='{"id" : "wiget9"}'>
			<div class="panel-heading">
				<div class="panel-ctrls button-icon-bg" 
					data-actions-container="" 
					data-action-collapse='{"target": ".panel-body"}'
					data-action-expand=''
					data-action-colorpicker=''
					data-action-edit=''
					data-action-refresh=''
					data-action-close=''
					>
				</div>
				<h2>Panel</h2>
			</div>
			<div class="panel-editbox" data-widget-controls=""></div>
			<div class="panel-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
			</div>
		</div>
	</div>
</div>

{% endblock %}