<?php
global $theme_container_class;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> data-trailing-slash="<?php echo user_trailingslashit(''); ?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title>
<?php wp_title( ' | ', true, 'right' ); ?>
</title>
<?= sprintf('<link rel="shortcut icon" type="image/x-icon" href="%s" />', get_theme_mod('fp_wp_setting_logo_favicon')); ?>
<?php wp_head(); ?>
</head>

<body class="theme-default" <?php body_class(); ?> >
<div id="container" class="page-wrap">
<!-- PRINT BLOCK -->
<div class="header <?= $theme_container_class ?> visible-print-block">
  <div class="row">
    <div class="col-xs-2">
      <!-- PRINT - LOGO -->
      <img src="<?= get_theme_mod('fp_wp_setting_logo') ?>" alt="A theme logo of <?php bloginfo( 'name' ); ?>" width="100" />
      <!--//END PRINT - LOGO -->
    </div>
    <div class="col-xs-6">
      <!-- PRINT - STORE INFO -->
      <div id="store-main-info" class="bd-left padding-left"></div>
      <!--//END PRINT - STORE INFO -->
    </div>
  </div>
</div>
<!--//END PRINT BLOCK -->

<header id="header">
  <!-- WRAPPER -->
  <div class="wrapper">
    <!-- OFF CANVAS MENU -->
    <nav id="main-nav">
      <ul>
        <li>
          <!-- STORE INDICATOR -->
          <div class="location-wrap">
            <div class="user-store-indicator store-indicator"></div>
          </div>
          <!--//END STORE INDICATOR -->
        </li>
        <li>
          <!-- REORDER -->
          <div class="reorder-wrap">
            <div class="reorder-indicator"></div>
          </div>
          <!--//END REORDER -->
        </li>
        <!-- MAIN MENU -->
        <?php
          wp_nav_menu( array(
            'container' => "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
            'items_wrap' => '%3$s', // (string) How the list items should be wrapped. Uses printf() format with numbered placeholders. Default is a ul with an id and class.
            'container_class' => "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
            'container_id' => "", // (string) The ID that is applied to the container.
            'theme_location' => 'main-menu', // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
            'menu' => 'menu-main-menu', // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
            'menu_class' => 'main-menu', // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
            'menu_id' => 'main-menu', // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
            // 'link_before' => '<span>', // (string) Text before the link text.
            // 'link_after' => '</span>', // (string) Text after the link text.
            'depth' => 0, // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
            'fallback_cb' => false // (callable|false) If the menu doesn't exist, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
          ) );
        ?>
        <!--//END MAIN MENU -->
        <!-- ACCOUNT MENU -->
		    <li class="nav-account">
          <div class="account-menu">
            <div class="user-session-indicator-mobile"></div>
          </div>
        </li>
        <!--//END ACCOUNT MENU -->
      </ul>
    </nav>
    <!--//END OFF CANVAS MENU -->

    <!-- SITE BANNER -->
    <div id="site-banner" class="site-banner hidden"></div>
    <!--//END SITE BANNER  -->

    <!-- ---------SIMPLY GOOD Theme Header Container Start -->
    <?php $head_layout = get_theme_mod( 'header_layout_id', 'header-simplygood' );?>
    <?php if ($head_layout == "header-simplygood") : ?>
    <?php get_template_part( 'includes/header', 'simplyGood' );?>
    <!-- ---------SIMPLY GOOD Theme Header Container End -->

    <!-- ---------NEW THEME Theme Header Container Start -->
    <?php elseif ($head_layout == "header-newtheme") : ?>
    <?php get_template_part( 'includes/header', 'newTheme' );?>
    <!-- ---------NEW THEME Theme Header Container End -->

    <!-- ---------FLOUR SACK Theme Header Container Start -->
    <?php elseif ($head_layout == "header-floursack") : ?>
    <?php get_template_part( 'includes/header', 'flourSack' );?>
    <!-- ---------FLOUR SACK Theme Header Container End -->

    <!-- ---------SWEET POTATO Theme Header Container Start -->
    <?php elseif ($head_layout == "header-sweetpotato") : ?>
    <?php get_template_part( 'includes/header', 'sweetPotato' );?>
    <!-- ---------SWEET POTATO Theme Header Container End -->

    <!-- ---------FRISCO BROS Theme Header Container Start -->
    <?php elseif ($head_layout == "header-friscobros") : ?>
    <?php get_template_part( 'includes/header', 'friscoBros' );?>
    <!-- ---------FRISCO BROS Theme Header Container End -->
    <?php else : ?>
    Not Found
    <?php endif; ?>

    <!-- small/x-small views --> 
    <!-- MOBILE HEADER WRAPPER -->
    <div class="mobile-header-wrapper hidden-md hidden-lg">
      <!-- MOBILE HEADER -->
      <div class="mobile-header">
        <!-- MOBILE CONTAINER -->
        <div class="mobile-container">
          <!-- HAMBURGER MENU -->
          <div class="hamburger <?php
            $toggle_menu_text = get_theme_mod( 'mobile_nav_menu_display', 'menu-text-off' );
            if ( $toggle_menu_text == "menu-text-off" ): ?><?php else : ?>menu-toggle<?php endif; ?> ">
            <button type="button" class="toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          </div>
          <!--//END HAMBURGER MENU -->
          <!-- MOBILE LOGO -->
          <div class="mobile-nav-logo"> 
            <a aria-label="A theme logo of <?php bloginfo( 'name' ); ?>" href="/" class="logo"><img src="<?= get_theme_mod('fp_wp_setting_logo_mobile') ?>" alt="A theme logo of <?php bloginfo( 'name' ); ?>" /></a> 
          </div>
          <!--//END MOBILE LOGO -->
          <!-- MOBILE SEARCH -->
          <div class="mobile-search-box" style="position: relative;">
            <a href="javascript:;" class="search mobile-search-icon"><span class="glyphicon glyphicon-search"></span><span class="hidden">Search</span></a>
          </div>
          <!--//END MOBILE SEARCH -->
          <!-- MOBILE MINI LIST INDICATOR -->
          <div id="mini-list-mobile-wrapper" class="col-xs-3 col-sm-2 col-md-3 mobile-header-right"></div>
          <!--//END MOBILE MINI LIST INDICATOR -->
        </div>
        <!--//END MOBILE CONTAINER -->
      </div>
      <!--//END MOBILE HEADER -->
      <!-- MOBILE SEARCH -->
      <div class="mobile-search container-fluid hidden-xs hidden-sm"></div>
      <!--//END MOBILE SEARCH -->
    </div>
    <!--//END MOBILE HEADER WRAPPER -->

  </div> 
  <!--//END WRAPPER -->
</header>
