<?php
/**
 * The Header for our theme.
 * @package Multipurpose Photography
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<?php if ( function_exists( 'wp_body_open' ) ) {
	    wp_body_open();
	} else {
	    do_action( 'wp_body_open' );
	}?>
	
	<?php if(get_theme_mod('multipurpose_photography_preloader',false) || get_theme_mod('multipurpose_photography_preloader_responsive',false)){ ?>
	    <?php if(get_theme_mod( 'multipurpose_photography_preloader_type','Square') == 'Square'){ ?>
	        <div id="overlayer"></div>
	        <span class="tg-loader">
	        	<span class="tg-loader-inner"></span>
	        </span>
	    <?php }else if(get_theme_mod( 'multipurpose_photography_preloader_type') == 'Circle') {?>
	        <div class="preloader text-center">
		        <div class="preloader-container">
		            <span class="animated-preloader"></span>
		        </div>
	        </div>
	    <?php }?>
	<?php }?>
	<header role="banner">
		<a class="screen-reader-text skip-link" href="#maincontent"><?php esc_html_e( 'Skip to content', 'multipurpose-photography' ); ?><span class="screen-reader-text"><?php esc_html_e('Skip to content','multipurpose-photography'); ?></span></a>
		<div class="top-bar">
	  	<div class="container">
		    <div class="row">
	      	<div class="col-lg-4 col-md-4 align-self-center">
		        <div class="call my-2 text-md-start text-center">
	          	<?php if ( get_theme_mod('multipurpose_photography_call','') != "" ) {?>
	            	<a href="tel:<?php echo esc_attr(get_theme_mod('multipurpose_photography_call','')); ?>"><span><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_phone_icon','fas fa-phone-volume')); ?> pe-2"></i><?php echo esc_html(get_theme_mod('multipurpose_photography_call','')); ?></span><span class="screen-reader-text"><?php esc_html_e('Phone Number','multipurpose-photography'); ?></span></a>
	          	<?php }?>
		        </div>
	      	</div>
	      	<div class="col-lg-4 col-md-4">
		        <div class="logo pt-2 pb-4 mx lg-5 mx-md-3 mx-0 text-center">
		          	<?php if ( has_custom_logo() ) : ?>
		            	<div class="site-logo"><?php the_custom_logo(); ?></div>
		            <?php endif; ?>
	                <?php $blog_info = get_bloginfo( 'name' ); ?>
	                <?php if ( ! empty( $blog_info ) ) : ?>
	                	<?php if( get_theme_mod('multipurpose_photography_show_site_title',true) != ''){ ?>
			                <?php if ( is_front_page() && is_home() ) : ?>
			                	<h1 class="site-title p-0"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			                <?php else : ?>
			                  <p class="site-title m-0"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
			                <?php endif; ?>
			            <?php }?>
		            <?php endif; ?>
		            <?php if( get_theme_mod('multipurpose_photography_show_tagline',false) != ''){ ?>
		                <?php
		                $description = get_bloginfo( 'description', 'display' );
		                if ( $description || is_customize_preview() ) :
		                ?>
		                	<p class="site-description m-0">
		                    <?php echo esc_html($description); ?>
		                	</p>
		                <?php endif; ?>
		            <?php }?>
		        </div>
	      	</div>
	      	<div class="col-lg-4 col-md-4 align-self-center">
		        <div class="social-icon pt-3 text-md-end text-center">
	          	<?php if( get_theme_mod( 'multipurpose_photography_facebook_url') != '') { ?>
	            	<a target="_blank" href="<?php echo esc_url( get_theme_mod( 'multipurpose_photography_facebook_url','' ) ); ?>"><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_facebook_icon','fab fa-facebook-f')); ?> ms-1 mb-1"></i><span class="screen-reader-text"><?php esc_html_e('Facebook','multipurpose-photography'); ?></span></a>
	          	<?php } ?>
	          	<?php if( get_theme_mod( 'multipurpose_photography_twitter_url') != '') { ?>
	            	<a target="_blank" href="<?php echo esc_url( get_theme_mod( 'multipurpose_photography_twitter_url','' ) ); ?>"><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_twitter_icon','fab fa-twitter')); ?> ms-1 mb-1"></i><span class="screen-reader-text"><?php esc_html_e('Twitter','multipurpose-photography'); ?></span></a>
	          	<?php } ?>
	          	<?php if( get_theme_mod( 'multipurpose_photography_insta_url') != '') { ?>
	            	<a target="_blank" href="<?php echo esc_url( get_theme_mod( 'multipurpose_photography_insta_url','' ) ); ?>"><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_instagram_icon','fab fa-instagram')); ?> ms-1 mb-1"></i><span class="screen-reader-text"><?php esc_html_e('Instagram','multipurpose-photography'); ?></span></a>
	          	<?php } ?>
	          	<?php if( get_theme_mod( 'multipurpose_photography_youtube_url') != '') { ?>
	            	<a target="_blank" href="<?php echo esc_url( get_theme_mod( 'multipurpose_photography_youtube_url','' ) ); ?>"><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_youtube_icon','fab fa-youtube')); ?> ms-1 mb-1"></i><span class="screen-reader-text"><?php esc_html_e('Youtube','multipurpose-photography'); ?></span></a>
	          	<?php } ?>
		        </div>
	      	</div>
		    </div>
	  	</div>
		</div>
	</header>
	<?php get_template_part( 'template-parts/header/navigation' ); ?> 

	<?php if(get_theme_mod('multipurpose_photography_post_featured_image') == 'banner' ){
	    if( is_singular() ) {?>
	      	<div id="page-site-header">
		        <div class='page-header'> 
		          	<?php the_title( '<h1>', '</h1>' ); ?>
		        </div>
	      	</div>
	    <?php }
	}?>