{% layout "layout-topnav-options" %}
{% block title %}Topnav Options{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Layout</a></li>
<li class="active"><a href="layout-topnav-options.html">Topnav Options</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

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

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

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

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

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

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

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

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

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

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

		$('input[name="toggle-taskprogress"]').on('switchChange.bootstrapSwitch', function(event, state) {
		  $('#widget-taskprogress').toggle();
		});
	});
</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 topnav! Check out the samples by toggling them on and off</p>
			</div>
			<div class="panel">
				<div class="panel-heading">
					<h2>Topnav Options</h2>
				</div>
				<div class="panel-body panel-no-padding">

					<table class="table table-striped table-bordered table-vam mb0">
						<thead>
							<tr>
								<th width="300">Options</th>
								<th width="100">Status</th>
								<th class="hidden-xs">Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Classic Menu</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default" name="toggle-classicmenu"></td>
								<td class="hidden-xs">Toggle the Classic Menu</td>
							</tr>
							<tr>
								<td>Headerbox Dropdown</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default"  name="toggle-headerbar"></td>
								<td class="hidden-xs">Include Quicklinks right from the header</td>
							</tr>
							<tr>
								<td>Mega Menu</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default"  name="toggle-megamenu"></td>
								<td class="hidden-xs">Megamenu support built in</td>
							</tr>
							<tr>
								<td>Language Switcher</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default"  name="toggle-languageswitcher"></td>
								<td class="hidden-xs">Language Switcher Dropdown (hundreds of flag icons included)</td>
							</tr>
							<tr>
								<td>Tabbed Dropdowns</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default"  name="toggle-tabbeddropdown"></td>
								<td class="hidden-xs">Add tab support in a dropdown</td>
							</tr>
							<tr>
								<td>Searchbox</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default"  name="toggle-searchbox"></td>
								<td class="hidden-xs">Search right in th header</td>
							</tr>
							<tr>
								<td>Notifications</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default" name="toggle-notifications"></td>
								<td class="hidden-xs">Notifications Dropdown</td>
							</tr>
							<tr>
								<td>Task Progress</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default" name="toggle-taskprogress"></td>
								<td class="hidden-xs">Task Progress Dropdowns</td>
							</tr>
							<tr>
								<td>Messages</td>
								<td><input class="bootstrap-switch" type="checkbox" data-size="small" checked data-on-color="info" data-off-color="default" name="toggle-messages"></td>
								<td class="hidden-xs">Messages Dropdown</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
{% endblock %}