{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/components/hamburger/hamburger-macros.njk" as hamburger %}
{% import "general/components/logo/logo-macros.njk" as logo %}
{% import "general/components/nav/nav-macros.njk" as nav %}
{% import "general/components/topnav/topnav-macros.njk" as topnav %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<header class="c-header js-header {{classes}}">
		<div class="c-header__overlay"></div>

		<div class="c-header__container l-container">
			<div class="c-header__actions">
				{{logo.white("c-header__logo c-header__logo--white", {
					url: "#"
				})}}

				{{logo.default("c-header__logo c-header__logo--pink", {
					url: "#"
				})}}
			</div>

			<div class="c-header__content">
				{{topnav.default("c-header__topnav u-show@desktop", {
					items: [
						{
							name: "Voor adviseurs",
							url: "#"
						},
						{
							name: "Blog",
							url: "#"
						},
						{
							name: "Klantenservice",
							url: "#"
						}
					]
				})}}

				<div class="c-header__nav-container">
					{{nav.default("c-header__nav", {
						items: [
							{
								title: "Hypotheken",
								url: "#"
							},
							{
								title: "Rentes",
								url: "#"
							},
							{
								title: "Verduurzamen",
								url: "#"
							},
							{
								title: "Wie is lot?",
								url: "#"
							}
						]
					})}}

					{{topnav.default("c-header__topnav--white u-hide@desktop", {
						items: [
							{
								name: "Voor adviseurs",
								url: "#"
							},
							{
								name: "Blog",
								url: "#"
							},
							{
								name: "Klantenservice",
								url: "#"
							}
						]
					})}}

					{{button.default("c-header__button", {
						text: "inloggen"
					})}}
				</div>

			</div>

			{{hamburger.default("c-header__hamburger u-hide@desktop", {})}}
		</div>
	</header>

{% endmacro %}