<?php  
    $header_bg = !empty( get_theme_mod( 'moral_magazine_header_bg_image' ) ) ? get_theme_mod( 'moral_magazine_header_bg_image' ) : '';
?>

<header id="masthead" class="site-header header-one" role="banner">
    <div class="site-branding-container">
        <div class="header-image" style="background-image: url('<?php echo esc_url(  $header_bg ); ?>');">
            <div class="overlay"></div>
            <div class="wrapper">
                <div class="site-branding-wrapper clear">
                    <div class="site-branding">
                        <?php if ( has_custom_logo() ) : ?>
                            <div class="site-logo">
                                <?php the_custom_logo(); ?>
                            </div><!-- .site-logo -->
                        <?php endif; ?>
                        <?php if ( get_theme_mod( 'moral_magazine_header_text_display', true ) == true ): ?>
                            <div id="site-identity">
                                <?php
                                if ( is_front_page() ) : ?>
                                    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                                <?php else : ?>
                                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                                <?php
                                endif;

                                $description = get_bloginfo( 'description', 'display' );
                                if ( $description || is_customize_preview() ) : ?>
                                    <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
                                <?php
                                endif; ?>
                            </div><!-- .site-branding -->
                        <?php endif ?>
                        
                    </div>
                    <?php if ( !empty( get_theme_mod( 'moral_magazine_header_ads_image_url', '' ) ) ): ?>
                        <div class="site-advertisement">            
                            <a href="<?php echo esc_url( get_theme_mod( 'moral_magazine_header_ads_image_url', '#' ) ) ; ?>"><img src="<?php echo esc_url( get_theme_mod( 'moral_magazine_header_ads_image', get_template_directory_uri() . '/assets/img/site-advertisement.jpg' ) ); ?>" height="200" ></a>                              
                        </div><!-- .site-advertisement -->
                    <?php endif ?>
                   
                </div><!-- .site-branding-wrapper  -->
            </div>
        </div><!-- .header-image -->

        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
            <svg viewBox="0 0 40 40" class="icon-menu">
                <rect y="7" width="40" height="2"></rect>
                <rect y="19" width="40" height="2"></rect>
                <rect y="31" width="40" height="2"></rect>
            </svg>

            <svg viewBox="0 0 612 612" class="icon-close">
                <polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 
                306,341.411 576.521,611.397 612,575.997 341.459,306.011"></polygon>
            </svg>
        </button><!-- .menu-toggle -->

        <?php if ( has_nav_menu( 'primary' ) ): ?>
            
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'moral-magazine' );?>">
            <div class="wrapper">

                <?php
                    $search_form = '';
 
                    $search_form .= '<li class="main-navigation-search">';
                    $search_form .= get_search_form( $echo = false );
                    $search_form .= '</li>';
        
                    $home_icon = '<svg viewBox="0 0 512 512" class="icon-home">
                                    <polygon points="256,152.96 79.894,288.469 79.894,470.018 221.401,470.018 221.401,336.973 296.576,336.973 296.576,470.018 
                                    432.107,470.018 432.107,288.469"></polygon>
                                    <polygon points="439.482,183.132 439.482,90.307 365.316,90.307 365.316,126.077 256,41.982 0,238.919 35.339,284.855 
                                    256,115.062 476.662,284.856 512,238.92"></polygon>
                                    </svg>';
                                    
                    wp_nav_menu( array(
                        'theme_location' => 'primary',
                        'container' => 'div',
                        'menu_class' => 'menu nav-menu',
                        'menu_id' => 'primary-menu',
                        'echo' => true,
                        'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="home-icon"><a href='.esc_url( home_url( '/' ) ). '>'.$home_icon.'</li>%3$s' . $search_form . '</ul>',                   
                    ) );
                ?>
            </div>                   
        </nav><!-- #site-navigation -->
            
        <?php elseif( current_user_can( 'edit_theme_options' ) ): ?>
            <nav class="main-navigation" id="site-navigation">
                <ul id="primary-menu" class="menu nav-menu wrapper">
                    <li><a href="<?php echo esc_url( admin_url( 'nav-menus.php' ) ); ?>"><?php echo esc_html__( 'Add a menu', 'moral-magazine' );?></a></li>
                </ul>
            </nav>
        <?php endif; ?> 
    </div>
</header><!-- #masthead -->

