<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package ello-lite-photography
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'ello-lite-photography' ); ?></a>

<!-- Navbar -->
<nav id="site-navigation" class="navbar navbar-expand-lg">
<div class="container">
        <!-- Logo -->
        <?php
            the_custom_logo();
            if ( is_front_page() && is_home() ) :
        ?>
            <div class="logo-wrapper valign">
                <div class="logo">
                    <h2><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
                </div>
            </div>
        <?php else : ?>
            <div class="logo-wrapper valign">
                <div class="logo">
                    <h2><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
                </div>
            </div>
        <?php endif; ?>

        <?php $description = get_bloginfo( 'description', 'display' );
        if ( $description || is_customize_preview() ) : ?>
            <p class="site-description"><?php echo esc_html( $description ); ?></p>
        <?php endif; ?>

        <!-- Burger Button for Mobile with Focus Outline -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="<?php esc_attr_e( 'Toggle navigation', 'ello-lite-photography' ); ?>">
            <span class="icon-bar"><i class="fa fa-bars"></i></span>
        </button>
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent" aria-hidden="true" tabindex="-1">
            <!-- Close Button Inside Navbar Collapse with Focus Outline -->
            <button class="close-menu" aria-label="<?php esc_attr_e( 'Close Menu', 'ello-lite-photography' ); ?>">
                <i class="fa fa-close"></i>
            </button>
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
            <?php
                wp_nav_menu( array(
                    'theme_location' => 'menu-1',
                    'container'      => false,
                    'menu_id'        => 'primary-menu',
                    'menu_class'     => 'navbar-nav ml-auto',
                    'walker'         => new Ello_Lite_Photography_Custom_Walker_Nav_Menu(),
                    'fallback_cb'    => 'ello_lite_photography_custom_menu_fallback',
                ) );
            ?>
        </div> <!-- #end-menu -->

        <?php
            function ello_lite_photography_custom_menu_fallback() {
                if (current_user_can('manage_options')) {
                    echo '<ul class="navbar-nav ml-auto">';
                    echo '<li><a href="' . esc_url(admin_url('nav-menus.php')) . '">' . esc_html__('Click here to add a menu', 'ello-lite-photography') . '</a></li>';
                    echo '</ul>';
                }
            }
        ?>
    </div><!-- #site-container -->
</nav><!-- #site-navigation -->
		  