{% block html_head_container %}

{% include 'html-header.twig' %}
	{% block head %}
	<style>
		body {
			font-family: {{ body_font }};
			color: var(--primary-color);

		}
		:root {
        --primary-color: {{ primary_color }};
		--secondary-color: {{ secondary_color }};
		}

		a {
			color: var(--secondary-color);
		}

		.bg-color{
			background-color: var(--secondary-color);
		}
	</style>
	
	{% endblock %}
	</head>
{% endblock %}

	<body data-template="base.twig">
		{{ function('wp_body_open') }}
		<header class="{% if fixed_header %}fixed{% endif %} w-full showOnTop" >
			{% block header %}
					
					<nav class="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
							<div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
						<a href="{{ site.link }}" class="flex items-center">

							{% if logo %}
								<img src="{{ logo }}" alt="{{ site.name }}"  class="h-6 mr-3 sm:h-9">
							{% else %}
								<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{{ site.name }}</span>
							{% endif %}

						</a>
						<div class="flex items-center lg:order-2">
							
							<!-- <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> -->
							{% if not hide_account %}
								{% if user %}
									<a href="{{ site.link }}/account" class="account-area text-white font-medium bg-color rounded-lg text-sm px-2 py-2 sm:mr-2 lg:mr-0 focus:outline-none"><?xml version="1.0" ?><svg class="feather feather-user" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></a>
								{% else %}
									<div class="mr-4">
										{# <a class="github-button" href="#" data-size="large" data-icon="octicon-star" data-show-count="true" aria-label="Test">Star</a> #}
										<a href="{{ site.link }}/login" class="account-area text-gray-700" aria-current="page">Log In</a>

									</div>
									
									<a href="{{ site.link }}/register" class="account-area hidden mr-4 sm:inline-block text-white bg-color font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 focus:outline-none">Register</a>
								{% endif %}
							{% endif %}
							<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
								<span class="sr-only">Open main menu</span>
								<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
								<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
							</button>
						</div>
						<div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
								{% include "menu.twig" with {'items': menu.get_items} %}
					</nav><!-- #nav -->
				</div>
			{% endblock %}
		</header>

		{# <section id="content" role="main" class="content-wrapper">
			{% if title %}<h1>{{title}}</h1>{% endif %}
			<div class="wrapper">
				{% block content %}
					Sorry, no content
				{% endblock %}
			</div>
			{% if sidebar %}
				<aside class="layout-sidebar">
					{{sidebar}}
				</aside>
			{% endif %}
		</section> #}
		<section class="bg-white dark:bg-gray-900">
			<div class="{% if fixed_header %}fixedHeaderActive{% else %} fixedHeaderInactive{% endif %} max-w-screen-xl px-4 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:grid-cols-12">

				{% block content %}
					Sorry, no content
				{% endblock %}
			</div>
		</section>
		{% block footer %}
			<footer class="bg-white dark:bg-gray-800">
				{% include 'footer.twig' %}
			</footer>
			{{ function('wp_footer') }}
		{% endblock %}
		<script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script>

	</body>
</html>
