description = "Header"

[staticMenu]
code = "main-menu"
==
<?php
function onStart()
{
    $this->addJs('assets/js/navigation.js');
}
?>
==
<div class="header-wrapper w-100 z-20 border-t-1 border-white {{ this.theme.header_bg }} {{ this.theme.header_trans ? 'position-lg-absolute' : 'position-static' }}">
	<div class="header w-100 animated duration-500" {% if this.theme.header_sticky == 'header' %}data-toggle="sticky-onscroll"{% endif %}>
		{% for fields in this.theme.header %}
		{% if fields._group == 'header_topbar' %}
		<!-- Topbar  -->
		<div class="header-topbar w-100 animated duration-500 {{ fields.header_topbar_bg }} {% if loop.first %}border-b-1 {{ fields.header_topbar_fcolor == 'text-white' ? 'border-white-10' }}{% endif %}" {% if this.theme.header_sticky == 'topbar' %}data-toggle="sticky-onscroll"{% endif %}>
			<div class="{{ this.theme.header_container }}">
				<nav class="navbar p-0 navbar-expand-lg">
					<a class="navbar-brand display-13 py-4 font-weight-medium text-uppercase d-lg-none {{ fields.header_topbar_fcolor }}" href="#">Top Menu</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-top" aria-controls="header-top" aria-expanded="false" aria-label="Toggle navigation">
						<i class="fas fa-ellipsis-h opacity-75 hover-opacity-100 {{ fields.header_topbar_fcolor }}"></i>
					</button>
					<div class="collapse navbar-collapse" id="header-top">
						{% if fields.header_topbar_info %}
						<ul class="navbar-nav display-13">
							{% for info in fields.header_topbar_info %}
							<li class="nav-item">
								{% if info.header_topbar_info_url %}<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-5 py-4 {{ fields.header_topbar_fcolor }}" href="{{ info.header_topbar_info_url }}">{% else %}<div class="nav-text opacity-75 hover-opacity-100 pl-0 pr-5 py-4 {{ fields.header_topbar_fcolor }}">{% endif %}
									{% if info.header_topbar_info_icon %}<i class="{{ info.header_topbar_info_icon }}"></i>{% endif %}
									{{ info.header_topbar_info_text }}
								{% if info.header_topbar_info_url %}</a>{% else %}</div>{% endif %}
							</li>
							{% endfor %}
						</ul>
						{% endif %}
						<ul class="navbar-nav ml-auto flex-row justify-content-start">
							{% if fields.header_topbar_links_social %}
							{% for social in fields.header_topbar_social %}
							<li class="nav-item">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 {{ fields.header_topbar_fcolor }}" href="{{ social.header_topbar_social_url }}"><i class="{{ social.header_topbar_social_icon }}"></i></a>
							</li>
							{% endfor %}
							{% endif %}
							{% if fields.header_topbar_links_search %}
							<li class="nav-item search dropdown position-lg-relative position-static">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 dropdown-toggle {{ fields.header_topbar_fcolor }}" href="#" id="header-search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									<i class="fa fa-search {{ fields.header_topbar_links_social ? 'border-l-1 border-white-25 pl-4' }}"></i>
								</a>
								<div class="dropdown-menu position-absolute dropdown-menu-right shadow-md border-0 mt-0 p-5 min-w-xs shadow-md border-0 animated duration-500 fadeInDown" aria-labelledby="header-search-dropdown">
									<form action="{{ searchInput.searchPage | page }}?q={{ query | url_encode(true) }}" method="get">
										<div class="input-group">
											<input class="form-control" name="q" type="text" placeholder="Search" autocomplete="off"
												{% if searchInput.useAutoComplete %}
													data-track-input
													data-request="{{ searchInput }}::onType"
													data-request-before-update="document.getElementById('autocomplete-results').classList.add('ss-search-form__results--visible')"
													data-request-update="'{{ searchInput }}::autocomplete': '#autocomplete-results'"
												{% endif %}
											>
											<div class="input-group-append">
												<button class="btn btn-danger line-height-none" type="submit"><i class="fa fa-search"></i></button>
											</div>
										</div>
										<div class="ss-search-form__results" id="autocomplete-results"></div>
									</form>
								</div>
							</li>
							{% endif %}
							{% if fields.header_topbar_links_language %}
							<li class="nav-item language dropdown position-lg-relative position-static">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 dropdown-toggle {{ fields.header_topbar_fcolor }}" href="#" id="header-language-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									<i class="fa fa-globe {{ fields.header_topbar_links_social and fields.header_topbar_links_search == 0 ? 'border-l-1 border-white-25 pl-4' }}"></i>
								</a>
								<div class="dropdown-menu position-absolute dropdown-menu-right shadow-md border-0 mt-0 p-4 min-w-xs shadow-md border-0 animated duration-500 fadeInDown" aria-labelledby="header-language-dropdown">
									<div class="language">
										{% for code, locale in localePicker.locales %}
										<div class="d-inline-block flag {% if localePicker.activeLocale == code %}active{% endif %}">
											<a href="#" data-request="onSwitchLocale" data-request-data="locale: '{{ code }}'">
												<span class="flag-icon flag-icon-{{ code|lower }}"></span>
											</a>
										</div>
										{% endfor %}
									</div>
								</div>
							</li>
							{% endif %}
							{% if fields.header_topbar_links_account %}
							{% if user %}
							<li class="nav-item">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 {{ fields.header_topbar_fcolor }}" href="#" data-request="onLogout">
									<i class="fas fa-sign-out-alt {{ fields.header_topbar_links_social or fields.header_topbar_links_search or fields.header_topbar_links_language ? 'border-l-1 border-white-25 pl-4' }}"></i>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 {{ fields.header_topbar_fcolor }}" href="{{ 'user/account'|page }}"><i class="fas fa-user"></i></a>
							</li>
							{% else %}
							<li class="nav-item">
								<a class="nav-link opacity-75 hover-opacity-100 pl-0 pr-3 py-4 {{ fields.header_topbar_fcolor }}" href="#" data-target="#mymodal" data-toggle="modal" data-request-redirect="{{ 'index'|staticPage }}">
									<i class="fas fa-sign-in-alt 
									{{ fields.header_topbar_links_social or fields.header_topbar_links_search or fields.header_topbar_links_language ? 'border-l-1 border-white-25 pl-4' }}
									"></i>
								</a>
							</li>
							{% endif %}
							{% endif %}
						</ul>
					</div>
				</nav>
			</div>
		</div>
		{% endif %}
		{% if fields._group == 'header_infobar' %}
		<!-- Infobar  -->
		<div class="header-infobar py-md-4 py-1 w-100 animated duration-500 {{ fields.header_infobar_bg }}" {% if this.theme.header_sticky == 'infobar' %}data-toggle="sticky-onscroll"{% endif %}>
			<div class="{{ this.theme.header_container }}">
				<nav class="navbar navbar-expand-lg header-info-bar p-0">
					{% if fields.header_infobar_brand %}
						<!-- Navbar brand -->
						{% partial "site/brand" %}
					{% else %}
						<a class="navbar-brand display-13 py-4 font-weight-medium text-uppercase d-lg-none {{ fields.header_infobar_fcolor }}" href="#">Info Menu</a>
					{% endif %}
					<button class="navbar-toggler {{ fields.header_infobar_fcolor }}" type="button" data-toggle="collapse" data-target="#header-info" aria-controls="header-info" aria-expanded="false" aria-label="Toggle navigation">
						<i class="fas fa-ellipsis-v opacity-75 hover-opacity-100 {{ fields.header_infobar_fcolor }}"></i>
					</button>
					<div class="collapse navbar-collapse" id="header-info">
						<ul class="navbar-nav ml-auto">
							{% for info in fields.header_infobar_info %}
							<li class="nav-item">
								{% if info.header_infobar_info_url %}<a class="nav-link py-3 py-lg-0 px-0 px-lg-3 opacity-75 hover-opacity-100 d-flex align-items-center {{ fields.header_infobar_fcolor }}" href="{{ info.header_infobar_info_url }}">{% else %}<div class="nav-text py-3 py-lg-0 px-0 px-lg-3 opacity-75 hover-opacity-100 d-flex align-items-center {{ fields.header_infobar_fcolor }}">{% endif %}
									<div class="display-7 mr-2">
									{% if info.header_infobar_info_icon %}<i class="{{ info.header_infobar_info_icon }}"></i>{% endif %}
									</div>
									<div>{{ info.header_infobar_info_text|raw }}</div>
								{% if info.header_infobar_info_url %}</a>{% else %}</div>{% endif %}
							</li>
							{% endfor %}
							{% for btn in fields.header_infobar_btn %}
							<li class="nav-item action-btn d-flex align-items-center pl-lg-3">
								<a class="font-weight-medium px-6 hover-opacity-100 opacity-75 btn btn-block {{ fields.header_infobar_fcolor == 'text-white' ? 'btn-outline-white' : 'btn-outline-default' }}" href="{{ btn.header_infobar_btn_clink ? btn.header_infobar_btn_clink : (btn.header_infobar_btn_plink | staticPage) }}">
									{% if btn.header_infobar_btn_icon %}<i class="{{ btn.header_infobar_btn_icon }} mr-1"></i>{% endif %}
									{{ btn.header_infobar_btn_label }}
								</a>
							</li>
							{% endfor %}
							{% if fields.header_infobar_sidebar %}
							<li class="nav-item d-flex align-items-center pl-lg-3">
							<button class="my-3 my-lg-0 mr-auto navbar-sidebar navbar-toggler d-block" type="button" id="sidebarCollapse">
								<i class="fa fa-bars opacity-75 hover-opacity-100 display-8 {{ fields.header_infobar_fcolor }}"></i>
							</button>
							</li>
							{% endif %}
						</ul>
					</div>
				</nav>
			</div>
		</div>
		{% endif %}
		{% if fields._group == 'header_navbar' %}
		<!-- Navbar  -->
		<div class="header-navbar z-10 w-100 animated duration-500 {{ fields.header_navbar_bg }}" {% if this.theme.header_sticky == 'navbar' %}data-toggle="sticky-onscroll"{% endif %}>
			<div class="{{ this.theme.header_container }}">
				<nav class="navbar navbar-expand-lg header-nav p-0">
					{% if fields.header_navbar_brand %}
					<div class="">
					<!-- Navbar brand -->
					{% partial "site/brand" %}
					</div>
					{% else %}
					<a class="navbar-no-brand display-13 py-4 font-weight-medium text-uppercase d-lg-none {{ fields.header_navbar_fcolor }}">Navigaton</a>
					{% endif %}
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header" aria-expanded="false" aria-label="Toggle navigation">
						<i class="fa fa-bars opacity-75 hover-opacity-100 {{ fields.header_navbar_fcolor }}"></i>
					</button>
					<div class="collapse navbar-collapse max-h-sm {{ fields.header_navbar_text }}" id="header">
						<div class=" 
							{% if fields.header_navbar_brand and (fields.header_navbar_btn == 'no' or fields.header_navbar_btn == 'mbtn') %}ml-auto
							{% elseif (fields.header_navbar_btn == 'abtn' or fields.header_navbar_btn == 'btn') and fields.header_navbar_brand %}m-auto
							{% else %}mr-auto
							{% endif %}
						">
							<ul class="navbar-nav">
								{% if staticMenu.menuItems %}
								{% set items = staticMenu.menuItems %}
								{% for item in items %}
								<li class="nav-item hover-dropdown {{ item.items ? 'dropdown' : '' }} {{ 'mega' in item.viewBag.cssClass ? 'mega-dropdown position-lg-static' : 'position-relative' }} {{ item.viewBag.cssClass }}">
									<a class="nav-link font-weight-normal opacity-75 hover-opacity-100 {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ fields.header_navbar_fcolor }} {{ fields.header_navbar_fsize }} {{ fields.header_navbar_padding }} {{ fields.header_navbar_hover }} {{ item.items ? 'dropdown-toggle' : '' }}" 
										{% if item.items %} 
										id="dropdownMenu{{ item.title|replace({' ':'-'}) }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
										{% endif %} href="{{ item.url }}" {{ item.viewBag.isExternal ? 'target="_blank"' }}>
										{{ item.title }}
										{% if item.items %}<i class="fa fa-angle-down position-absolute position-lg-static pos-t-5 pos-r-4 ml-1"></i>{% endif %}
									</a>
									{% if item.items %}
									
									{% if 'mega' not in item.viewBag.cssClass %}
									<ul class="dropdown-menu shadow-md border-0 mt-0 animated duration-500 {{ item.viewBag.cssClass ? item.viewBag.cssClass : 'fadeInUp' }}" aria-labelledby="dropdownMenu{{ item.title|replace({' ':'-'}) }}">
										{% for subitem in item.items %}
										<li class="{{ subitem.items ? 'dropdown-submenu position-relative'}}">
											<a href="{{ subitem.items ? '#' : subitem.url }}" class="{{ subitem.isActive or subitem.isChildActive ? 'active text-white' : 'text-body' }} {{ subitem.items ? 'dropdown-toggle' : '' }} dropdown-item py-2 px-4 display-13" 
												{% if subitem.items %}aria-haspopup="true" aria-expanded="false"{% endif %}>
												{{ subitem.title }} 
												{% if subitem.items %}<i class="fa fa-angle-right ml-auto position-absolute pos-r-4 pos-t-3"></i>{% endif %}
											</a>
											{% if subitem.items %}
											<ul class="dropdown-menu shadow-md border-0 hidden mt-0 ml-0 pos-l-full pos-t-0 display-13 animated duration-500 {{ subitem.viewBag.cssClass ? subitem.viewBag.cssClass : 'fadeInUp' }}">
												{% for child in subitem.items %}
												<li class="{{ child.items ? 'dropdown-childmenu position-relative'}}">
													<a href="{{ child.items ? '#' : child.url }}" class="{{ child.isActive or child.isChildActive ? 'active text-white' : 'text-body' }} {{ child.items ? 'dropdown-toggle' : '' }} dropdown-item py-2 px-4 display-13" {% if child.items %}aria-haspopup="true" aria-expanded="false"{% endif %}>
														{{ child.title }}
														{% if child.items %}<i class="fa fa-angle-right ml-auto position-absolute pos-r-4 pos-t-3"></i>{% endif %}
													</a>
													{% if child.items %}
													<ul class="dropdown-menu shadow-md border-0 hidden mt-0 pos-t-0 pos-l-full display-13 animated duration-500 {{ child.viewBag.cssClass ? child.viewBag.cssClass : 'fadeInUp' }}">
														{% for subchild in child.items %}
														<li class="">
															<a href="{{ subchild.url }}" class="{{ subchild.isActive or subchild.isChildActive ? 'active text-white' : 'text-body' }} dropdown-item py-2 px-4 display-13">{{ subchild.title }}</a>
														</li>
														{% endfor %}
													</ul>
													{% endif %}
												</li>
												{% if 'divid' in child.viewBag.cssClass %}<li class="divider h-px my-2 overflow-hidden bg-black-10" role="separator"></li>{% endif %}
												{% endfor %}
											</ul>  
											{% endif %}
										</li>
										{% if 'divid' in subitem.viewBag.cssClass %}<li class="divider h-px my-2 overflow-hidden bg-black-10" role="separator"></li>{% endif %}
										{% endfor %}
									</ul>
									{% endif %}
									
									{% if 'mega' in item.viewBag.cssClass %}
									<div class="dropdown-menu w-100 overflow-hidden shadow-md border-0 p-7 mt-0 display-13 animated duration-500 {{ item.viewBag.cssClass ? item.viewBag.cssClass : 'fadeInUp' }}" aria-labelledby="dropdownMenu{{ item.title|replace({' ':'-'}) }}">
										<div class="row">
											{% for subitem in item.items %}
											
											{% if ('banner1' in subitem.viewBag.cssClass) or ('banner2' in subitem.viewBag.cssClass) or ('banner3' in subitem.viewBag.cssClass) or ('banner4' in subitem.viewBag.cssClass) or ('banner5' in subitem.viewBag.cssClass) or ('banner6' in subitem.viewBag.cssClass) or ('banner7' in subitem.viewBag.cssClass) or ('banner8' in subitem.viewBag.cssClass) %}
											{% for banner in fields.header_navbar_banner %}
											{% if (loop.first and ('banner1' in subitem.viewBag.cssClass)) or (loop.index == 2 and ('banner2' in subitem.viewBag.cssClass)) or (loop.index == 3 and ('banner3' in subitem.viewBag.cssClass)) or (loop.index == 4 and ('banner4' in subitem.viewBag.cssClass)) or (loop.index == 5 and ('banner5' in subitem.viewBag.cssClass)) or (loop.index == 6 and ('banner6' in subitem.viewBag.cssClass)) or (loop.index == 7 and ('banner7' in subitem.viewBag.cssClass)) or (loop.last and ('banner8' in subitem.viewBag.cssClass))  %}
											<div class="{{ subitem.viewBag.cssClass }} p-0 menu-banner my-n7 ml-n7 d-none d-lg-block">
												<div class="h-100 p-7 bg-cover" style="background-image:url({{ banner.header_navbar_banner_item|media|resize(600, 600, { mode: 'crop' }) }})">
													<div class="position-absolute overflow-hidden pos-0 w-100 h-100 bg-dark opacity-50"></div>
													<div class="position-relative h-100">
														<h3 class="font-weight-light text-white">{{ banner.header_navbar_banner_title|raw }}</h3>
													</div>
												</div>
											</div>
											{% endif %}
											{% endfor %}
												
											{% else %}
											
											<div class="{{ subitem.viewBag.cssClass ? subitem.viewBag.cssClass : 'col-lg-2 col-md-6' }} mb-7">
												<a class="{{ subitem.isActive or subitem.isChildActive ? 'active' : '' }}" href="{{ subitem.url }}">
													<h6 class="my-4 display-12">{{ subitem.title }}</h6>
												</a>
												{% if subitem.items %}
												<ul class="list-unstyled display-13">
													{% for child in subitem.items %}
													<li class="py-2">
														<a href="{{ child.url }}" class="{{ child.isActive or child.isChildActive ? 'active' : '' }} hover-text-default text-body">{{ child.title }}</a>
														{% if child.items %}
														<ul class="list-unstyled display-13">
															{% for subchild in child.items %}
															<li class="py-2">
																<a href="{{ subchild.url }}" class="{{ subchild.isActive or subchild.isChildActive ? 'active' : '' }} hover-text-default text-body display-14">{{ subchild.title }}</a>
															</li>
															{% endfor %}
														</ul>
														{% endif %}
													</li>
													{% endfor %}
												</ul>
												{% endif %}
											</div>
											{% endif %}
												
											{% endfor %}
										</div>
									</div>
									{% endif %}
									{% endif %}
								</li>
								{% endfor %}
								{% endif %}
								{% if fields.header_navbar_btn == 'mbtn' %}
								<li class="nav-item menuact-btn align-self-center ml-lg-4">
									<a class="hover-opacity-100 opacity-75 font-weight-medium py-3 px-6 btn {{ fields.header_navbar_fcolor == 'text-white' ? 'btn-outline-white' : 'btn-outline-default' }} {{ fields.header_navbar_fsize }}" href="{{ fields.header_navbar_btn_clink ? fields.header_navbar_btn_clink : (fields.header_navbar_btn_plink | staticPage) }}">
										{% if fields.header_navbar_btn_icon %}<i class="{{ fields.header_navbar_btn_icon }} mr-1"></i>{% endif %}
										{{ fields.header_navbar_btn_label }}
									</a>
								</li>
								{% endif %}
							</ul>
						</div>
						{% if fields.header_navbar_btn == 'btn' %}
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link font-weight-normal hover-opacity-100 opacity-75 d-flex align-items-center {% if fields.header_navbar_hover == 'hover-bg-white-10' or fields.header_navbar_hover == 'hover-bg-white-25' %}bg-white-10{% else %}bg-black-10{% endif %} {{ fields.header_navbar_fcolor }} {{ fields.header_navbar_fsize }} {{ fields.header_navbar_padding }}" href="{{ fields.header_navbar_btn_clink ? fields.header_navbar_btn_clink : (fields.header_navbar_btn_plink | staticPage) }}">
								{% if fields.header_navbar_btn_icon %}<i class="{{ fields.header_navbar_btn_icon }} mr-2"></i>{% endif %}
								{{ fields.header_navbar_btn_label }}
								</a>
							</li>
						</ul>
						{% endif %}
						{% if fields.header_navbar_btn == 'abtn' %}
						<ul class="navbar-nav">
							<li class="nav-item font-weight-normal d-flex align-items-center {% if fields.header_navbar_hover == 'hover-bg-white-10' or fields.header_navbar_hover == 'hover-bg-white-25' %}bg-white-10{% else %}bg-black-10{% endif %} {{ fields.header_navbar_fsize }} {{ fields.header_navbar_padding }}">
							{% if user %}    
								<a class="opacity-75 hover-opacity-100 {{ fields.header_navbar_fcolor }}" href="{{ 'user/account'|page }}">{{ "Account" }}</a> - <a class="opacity-75 hover-opacity-100 {{ fields.header_navbar_fcolor }}" href="#" data-request="onLogout">{{ "Logout" }}</a>
							{% else %}
								<a class="opacity-75 hover-opacity-100 {{ fields.header_navbar_fcolor }}" href="#" data-target="#mymodal" data-toggle="modal" data-request-redirect="{{ 'index'|staticPage }}">{{ "Login - Register" }}</a>
							{% endif %}
							</li>
						</ul>
						{% endif %}
					</div>
				</nav>
			</div>
		</div>
		{% endif %}
		{% endfor %}
	</div>
</div>

{% if this.theme.header_trans %}
{% put styles %}
<style>
@media (min-width: 992px) {
	.header-wrapper {
		background: transparent!important;
	}
}
</style>
{% endput %}
{% endif %}

{% for fields in this.theme.header %}
{% if fields._group == 'header_topbar' and fields.header_topbar_links_language %}
<link href="{{ fields.header_topbar_links_flags }}" rel="stylesheet">
{% endif %}
{% endfor %}

{% put scripts %}
<script>
{% if this.theme.header_sticky is not empty %}
$(document).ready(function() {
  // Custom 
  var stickyToggle = function(sticky, stickyWrapper, scrollElement) {
    var stickyHeight = sticky.outerHeight();
    var stickyTop = stickyWrapper.offset().top;
    if (scrollElement.scrollTop() >= stickyTop){
      stickyWrapper.height(stickyHeight);
      sticky.addClass("is-sticky {{ this.theme.header_bg }} position-fixed shadow-md pos-x-0 pos-t-0 z-100 fadeInDown");
    }
    else{
      sticky.removeClass("is-sticky {{ this.theme.header_bg }} position-fixed shadow-md pos-x-0 pos-t-0 z-100 fadeInDown");
      stickyWrapper.height('auto');
    }
  };
  
  // Find all data-toggle="sticky-onscroll" elements
  $('[data-toggle="sticky-onscroll"]').each(function() {
    var sticky = $(this);
    var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
    sticky.before(stickyWrapper);
    sticky.addClass('sticky');
    
    // Scroll & resize events
    $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function() {
      stickyToggle(sticky, stickyWrapper, $(this));
    });
    
    // On page load
    stickyToggle(sticky, stickyWrapper, $(window));
  });
});
{% endif %}

{% for fields in this.theme.header %}
{% if (fields._group == 'header_navbar' and fields.header_navbar_scroll) %}
// Smooth Scroll On Archors
$('.navbar-collapse ul li a[href*="#"]').on('click', function() {  
	$('html, body').animate({scrollTop: $(this.hash).offset().top - 52}, 1000);
	return false;
});
{% endif %}
{% endfor %}

{% for fields in this.theme.header %}
{% if (fields._group == 'header_topbar' and fields.header_topbar_links_account) or (fields._group == 'header_navbar' and fields.header_navbar_btn == 'abtn' ) %}
// Login/Register Modal
$('#show-register').on('click',function(){
	$('#login-form').css('position','absolute');
	$('#register-form').fadeIn(1000);
	$('#login-form').fadeOut(100);
	$('#register-form').css('position','relative');
});

$('#login-show').on('click',function(){
	$('#register-form').fadeOut(1000);
	$('#login-form').fadeIn(500);
	$('#login-form').css('position','relative');
	$('#register-form').css('position','absolute');
});
{% endif %}
{% endfor %}
</script>
{% endput %}