<?php
/**
 * Header Wide Layout
 *
 * @package the-landscaper-wp
 */
?>

<header class="header header-wide">

	<?php if ( 'hide' !== get_theme_mod( 'qt_topbar', 'show' ) && 'hide' !== get_field( 'topbar' ) ) : ?>
		<div class="topbar<?php echo 'hide_mobile' === get_theme_mod( 'qt_topbar', 'show' ) ? ' hidden-xs' : '';?>">
			<div class="container fluid-desktop">
				<?php if ( is_active_sidebar( 'topbar-widgets-left' ) ) : ?>
					<div class="widgets-left">
						<?php dynamic_sidebar( 'topbar-widgets-left' ); ?>
					</div>
				<?php else : ?>
					<span class="tagline"><?php echo esc_html( bloginfo( 'description' ) ); ?></span>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'topbar-widgets' ) ) : ?>
					<div class="widgets">
						<?php dynamic_sidebar( 'topbar-widgets' ); ?>
					</div>
				<?php endif; ?>
		    </div>
		</div>
	<?php endif; ?>
			
	<nav class="navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'the-landscaper-wp' ); ?>">
		<div class="container">
			<div class="navbar-header">

				<?php if ( has_nav_menu( 'primary' ) ) : ?>
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-label="<?php esc_attr_e( 'Menu', 'the-landscaper-wp' ); ?>" aria-controls="navbar">
						<span class="navbar-toggle-text"><?php esc_html_e( 'MENU', 'the-landscaper-wp' ); ?></span>
						<span class="navbar-toggle-icon">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</span>
					</button>
				<?php endif; ?>

				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" class="navbar-brand">
					<?php
						$logo = get_theme_mod( 'qt_logo' );
						$logo_retina = get_theme_mod( 'qt_logo_retina' );
						
						if ( ! empty( $logo ) ) : ?>
							<img src="<?php echo esc_url( $logo ); ?>" srcset="<?php echo esc_html( $logo ); ?><?php echo empty ( $logo_retina ) ? '' : ', ' . $logo_retina . ' 2x'; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
						<?php else : ?>
							<h1 class="site-title"><?php echo esc_html( bloginfo( 'name' ) ); ?></h1>
						<?php 
						endif;
					?>
				</a>
			</div>

			<?php if ( has_nav_menu( 'primary' ) ) : ?>
				<div id="navbar" class="collapse navbar-collapse">
					<?php
					wp_nav_menu( array(
						'theme_location' => 'primary',
						'container'      => false,
						'menu_class'     => 'main-navigation',
						'walker'         => new Aria_Walker_Nav_Menu(),
						'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
					) );
					?>
				</div>
			<?php endif; ?>
		</div>
		
	</nav>
	<div class="sticky-offset"></div>
</header>