{% layout "layout-rightbar-widgets" %}
{% block title %}Rightbar Widgets{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Layout</a></li>
<li class="active"><a href="layout-rightbar-widgets.html">Rightbar Widgets</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/switchery/switchery.css" | asset_url | stylesheet_tag }}        					<!-- Switchery -->
{% endblock %}

{% block scripts %}
{{ "plugins/bootstrap-switch/bootstrap-switch.js" | asset_url | script_tag }}     				<!-- BS Switch -->
{{ "plugins/switchery/switchery.js" | asset_url | script_tag }}     								<!-- Switchery -->

<script>
$(function() {
	$('input.bootstrap-switch').bootstrapSwitch();

	Switchery(document.querySelector('.js-switch-success'), {color: Utility.getBrandColor('success')});
	Switchery(document.querySelector('.js-switch-warning'), {color: Utility.getBrandColor('warning')});
	Switchery(document.querySelector('.js-switch-info'), {color: Utility.getBrandColor('info')});
	Switchery(document.querySelector('.js-switch-danger'), {color: Utility.getBrandColor('danger')});
	Switchery(document.querySelector('.js-switch-inverse'), {color: Utility.getBrandColor('inverse')});
	Switchery(document.querySelector('.js-switch-primary'), {color: Utility.getBrandColor('primary')});


	$('input[name="toggle-activity"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-activity').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-stats"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-stats').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-contact"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-contactdetails').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-contacts"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-contacts').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-weather"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-weather').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-settings"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-settings').toggle();
	  Utility.initScroller();
	});

	$('input[name="toggle-sparkline"]').on('switchChange.bootstrapSwitch', function(event, state) {
	  $('#widget-sparkline').toggle();
	  Utility.initScroller();
	});
});
</script>
{% endblock %}

{% block content %} 
	<div class="row">
		<div class="col-md-12">
			<div class="alert alert-info">
				<p>With Avenger, you can have any content you want in your rightbar! Check out the samples by toggling them on and off</p>
			</div>
			<div class="panel">
				<div class="panel-body panel-no-padding">

					<table class="table table-striped table-bordered table-vam mb0">
						<thead>
							<tr>
								<th width="300">Widgets</th>
								<th width="100">Status</th>
								<th class="hidden-xs">Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Sparkline</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-sparkline"></td>
								<td class="hidden-xs">Sparkline Stats</td>
							</tr>
							<tr>
								<td>Weather</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-weather"></td>
								<td class="hidden-xs">Weater Widget</td>
							</tr>
							<tr>
								<td>Stats</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-stats"></td>
								<td class="hidden-xs">Show stats in a progressbar</td>
							</tr>													
							<tr>
								<td>Contact Details</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-contact"></td>
								<td class="hidden-xs">Individual contact information</td>
							</tr>
							<tr>
								<td>Activity Feed</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-activity"></td>
								<td class="hidden-xs">Show User Activity</td>
							</tr>
							<tr>
								<td>Contact List</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-contacts"></td>
								<td class="hidden-xs">List of contacts</td>
							</tr>						
							<tr>
								<td>Settings</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="primary" data-off-color="default" name="toggle-settings"></td>
								<td class="hidden-xs">Settings Widget</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{% endblock %}