{# Automatically extends the right outer layout and also handles AJAX siutations #}
{% extends data.outerLayout %}

{% block title %}
{# Create a useful, SEO-friendly title tag based on what we have #}
{% if data.piece %}
{{ data.piece.title }}
{% elseif data.page %}
{{ data.page.title }}
{% else %}
{{ apos.log('Looks like you forgot to override the title block in a template that does not have access to an Apostrophe page or piece.') }}
{% endif %}
{% endblock %}

{% block extraHead %}
{# This block outputs its contents in the HTML document's <head>. It is a good place to put extra <script> <link> and <meta> tags. #}
	<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai&family=Roboto&family=Dancing+Script&family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
	{#  <script type="text/javascript" language="JavaScript" src="js/jquery-3.5.1.min.js"></script>  #}
{% endblock %}

	{% block beforeMain %}
	{# We recommend you use the beforeMain block for global page components like headers or navigation. #}
	<div id="topBar" class="text-center" style="margin-bottom: 0">
		{% block logoImage %}
		<a href="/" aria-label="AVUSD District Home"><img class="logoImage" src='/modules/theme/img/AvLogo.png' alt="Anderson Valley Logo: Four colored chevrons that look like people facing each other as viewed from above."/></a>
		{% endblock %}
		<div class="logoText">
			<p class="logoTitle">Anderson Valley Unified</p>
			<p class="logoTagline">Empowering our Students to Succeed!</p>
		</div>
		{#        <div class="menuButtonContainer">#}
		{#            <button style="background-color: #2a2c36;" class="btn btn-primary btn-lg" data-target="#modalNavigation" data-toggle="modal" type="button">#}
			{#                <svg class="bi bi-justify" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">#}
				{#                    <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>#}
				{#                </svg>#}
			{#            </button>#}
		{#        </div>#}
	</div>
	{% block menu %}
	<nav class="navbar" role="navigation">
		<div class="container">
			<ul>
				<li><a href="javascript:" aria-haspopup="true">District <i class="fa fa-caret-down"></i></a>
					{#                    <li><a href="javascript:" aria-haspopup="true">District <i class="fa fa-caret-down"></i></a>#}
				<div class="dropdown-chevron">
					<i class="fa fa-caret-up" aria-hidden="true"></i>
				</div>
				<div class="dropdown-content">
					<div class="container">
						<h1>AVUSD District Menu</h1>
						<div class="row">
							<div class="col-lg-4">
								<h2>District</h2>
								<a href="/">About</a>
								<a href="/avusd/staff">Staff</a>
								<a href="/avusd/forms">Forms</a>
								<a href="/avusd/reports">Reports</a>
								<a href="/avusd/title-ix">Title IX</a>
							</div>
							<div class="col-lg-4">
								<h2>School Board</h2>
								<a href="/avusd/school-board-about">About</a>
								<a href="/avusd/school-board-members">Members</a>
								<a href="/avusd/school-board-policies">Board Policies</a>
								<a href="/avusd/school-board-schedule">Meeting Schedule</a>
								<a href="/avusd/school-board-agendas">Meeting Agendas &amp; Records</a>
							</div>
							<div class="col-lg-4">
								<h2>Policies &amp; Committees</h2>
							</div>
						</div>
					</div>
				</div>
			</li>
				<li><a href="javascript:" aria-haspopup="true">Jr / Sr High <i class="fa fa-caret-down"></i></a>
					<div class="dropdown-chevron">
						<i class="fa fa-caret-up" aria-hidden="true"></i>
					</div>
					<div class="dropdown-content">
						<div class="container">
							<h1>Jr / Sr High School Menu</h1>
							<div class="row">
								<div class="col-lg-4">
									<h2>School</h2>
									<a href="/avhs">Home</a>
									<a href="/avhs/about">About</a>
									<a href="/avhs/calendar">School Calendar</a>
									<a href="/avhs/sarc">SARC</a>
									<a href="/avhs/water">Water Report</a>
								</div>
								<div class="col-lg-4">
									<h2>Academics</h2>
									<a href="/avhs/academic-schedule">Academic Schedule</a>
									<a href="/avhs/classes">Classes</a>
									<a href="/avhs/after-school">After School Program</a>
									<a href="/avhs/faculty">Faculty</a>
									<h2>Extracurricular Activities</h2>
									<a href="/avhs/ffa">FFA</a>
									<a href="/avhs/slt">Service Learning Team</a>
									<a href="/avhs/council">Student Council</a>
								</div>
								<div class="col-lg-4">
									<h2>Athletics</h2>
									<a href="/avhs/athletic-calendar">Athletic Calendar</a>
									<h2>Parents &amp; Students</h2>
									<a href="/avhs/policies">Handbook &amp; Policies</a>
									<a href="/avhs/forms">Forms</a>
									<a href="/avhs/buses">Buses</a>
									<a href="/avhs/grades">Grades</a>
									<a href="/avhs/library">Library</a>
								</div>
							</div>
						</div>
					</div>
				</li>

				<li><a href="javascript:" aria-haspopup="true">Elementary <i class="fa fa-caret-down"></i></a>
					<div class="dropdown-chevron">
						<i class="fa fa-caret-up" aria-hidden="true"></i>
					</div>
					<div class="dropdown-content">
						<div class="container">
							<h1>Elementary School Menu</h1>
							<div class="row">
								<div class="col-lg-4">
									<h2>School</h2>
									<a href="/aves">Home</a>
									<a href="/aves/contact-information">Contact Information</a>
									<a href="/aves/mission">Mission</a>
									<a href="/aves/sarc">SARC</a>
									<h2>News &amp; Info</h2>
									<a href="/aves/lice">Lice</a>
									<a href="/aves/safe-school-plan">Safe School Plan</a>
									<a href="/aves/common-core">Common Core Standards</a>
									<h2>Kindergarten</h2>
									<a href="/aves/kindergarten/regulations">Regulations</a>
									<a href="/aves/kindergarten/enrollment">Enrollment</a>
								</div>
								<div class="col-lg-4">
									<h2>Staff</h2>
									<a href="/aves/staff/support-staff">Support Staff</a>
									<a href="/aves/staff/teachers">Teachers</a>
									<a href="/aves/staff/office-staff">Office Staff</a>
									<h2>Family Resources</h2>
									<a href="/aves/grades">Grades</a>
									<a href="/aves/pip">PIP</a>
									<a href="/aves/asp">ASP</a>
									<a href="/aves/schedule">Bell Schedules</a>
									<a href="/aves/immunizations">Immunizations</a>
									<a href="/aves/attendance">Attendance</a>
									<a href="/aves/menus">Menus</a>
								</div>
								<div class="col-lg-4">
									<h2>PTAV</h2>
									<a href="/aves/ptav">About</a>
									<a href="/aves/ptav/logo">Logo Wear</a>
									<a href="/aves/ptav/meetings">Meetings</a>
									<h2>School Site Council (SSC)</h2>
									<a href="/aves/ssc">About</a>
									<a href="/aves/ssc/agenda">Agenda</a>
									<a href="/aves/ssc/minutes">Minutes</a>
									<h2>English Language Arts Curriculum (ELAC)</h2>
									<a href="/aves/elac">About</a>
									<a href="/aves/elac/agenda">Agenda</a>
									<a href="/aves/elac/minutes">Minutes</a>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<script>
		//let $topMenuItems = jQuery("nav.navbar > ul > li");
		//$topMenuItems.mousedown((event) => {
		//    console.log("target: " + event.target + "        related-target: " + event.relatedTarget);
		//	let $clickedMenuItem = jQuery(event.target);
		//	debugger;
		//
		//	if($clickedMenuItem.hasClass('display')) {
		//		$clickedMenuItem.removeClass('display');
		//    }
		//	else {
		//        $topMenuItems.removeClass('display');
		//        $clickedMenuItem.addClass('display');
		//    }
		//});
		//jQuery(document).on('hover mouseenter mousemove mouseout mouseover mousedown mouseup click doubleclick', 'div.dropdown-content', null, function(e) {
		//	e.stopPropagation()
		//})
	</script>
	{% endblock %}
	{% endblock %}

	{% block main %}
	{#
	Usually, your page templates in the apostrophe-pages module will override
	this block. It is safe to assume this is where your page-specific content
	should go.
	#}
	{% endblock %}

	{% block afterMain %}
	{#
	This would be a great place to put a global footer.
	#}
	{% endblock %}
