{% extends '/wpadmin_pages/base.twig' %}

{% block h1heading %}<h1 style="display: none;">&nbsp;</h1>{% endblock %}

{% block page_head %}
	<div class="row">
		<div class="col-12">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<a class="navbar-brand" href="{{ hrefs.nav_home }}" id="navbar-bannerlogo"
				   style="background-image: url('{{ hrefs.img_banner }}');"
				>&nbsp;</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
						aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<ul class="navbar-nav">
						{% for navkey,navdata in hrefs.top_nav %}
							{% if navdata.subnavs is empty %}
								<li class="nav-item">
									<a class="nav-link{% if navdata.active %} active{% endif %}"
									   id="NavItem-{{ navkey }}"
									   href="{{ navdata.href }}">{{ navdata.name }}
										{% if navdata.active %} <span class="sr-only">(current){% endif %}</a>
								</li>
							{% else %}
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle{% if navdata.active %} active{% endif %}"
									   data-toggle="dropdown" href="#" role="button"
									   aria-haspopup="true" aria-expanded="false">{{ navdata.name }}</a>
									<div class="dropdown-menu">
										{% for subnavslug,subnavdata in navdata.subnavs %}
											<a class="dropdown-item {% if subnavdata.active %} active{% endif %}"
											   href="{{ subnavdata.href }}">
												<span class="module-icon module-icon-{{ subnavslug }}"></span>
												<span class="module-name">{{ subnavdata.name }}</span>
											</a>
										{% endfor %}
									</div>
								</li>
							{% endif %}
						{% endfor %}

						<select class="selectpicker" data-live-search="true"
								title="{{ strings.jump_to_option }}"
								data-size="10" multiple
								data-header="{{ strings.type_below_search }} ..."
								onchange="location = this.value;">
							{% for select_section_name,select_section_opts in vars.search_select %}
								<optgroup label="{{ select_section_name }}">
									{% for select_opt_key,select_opt_data in select_section_opts %}
										<option value="{{ select_opt_data.href }}" aria-selected="false"
												data-tokens="{{ select_opt_data.summary }}"
										>{{ select_opt_data.name }}
										</option>
									{% endfor %}
								</optgroup>
							{% endfor %}
						</select>
						
						<div class="nav-item" id="PluginHeadwayChangelog"></div>
					</ul>
				</div>
				{#<form class="form-inline">#}
				{#<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">#}
				{#<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>#}
				{#</form>#}
			</nav>
		</div>
	</div>

	<script>
	  var HW_config = {
		  selector: "#PluginHeadwayChangelog", // CSS selector where to inject the badge
		  account: "{{ vars.changelog_id }}"
	  };
	  jQuery( document ).ready( function () {
		  jQuery.fn.selectpicker.Constructor.BootstrapVersion = '4';

		  jQuery( '.selectpicker' ).selectpicker()
								   .removeAttr( "selected" );
	  } );
	</script>
	<script async src="https://cdn.headwayapp.co/widget.js"></script>
{% endblock %}

{% block page_main %}
	<div class="row">
		<div class="col">
		</div>
	</div>
{% endblock %}

{% block page_foot %}
{% endblock %}

{% block inline_styles %}
{% endblock %}