<?php
declare(strict_types=1);

/**
 * Mobile header for our theme
 *
 * This file can be overridden in the child theme.
 *
 * @since 1.0.0
 */

use WP_AUX\Enum\SiteHeaderVariationEnum;
use WP_AUX\Services\AuxFramework\ElementClassesService;

$siteHeaderVariation = aux_header_variation();

$mobileHeaderClasses = ElementClassesService::buildClasses('mobile-header')
  ->addClass('show-for-small-only')
  ->addClass(aux_header_variation()->headerClass());
?>
<header class="<?php echo $mobileHeaderClasses; ?>" id="mobile-navbar">
  <?php
  if ($siteHeaderVariation->useLockup()) {
    ?>
    <?php echo aux_header_utility_back(); ?>
    <div class="mobile-header__identity">
      <?php echo aux_identity_lockup(); ?>
    </div>
    <?php
  } elseif (SiteHeaderVariationEnum::University === $siteHeaderVariation) {
    ?>
    <div class="identity identity--mobile">
      <a href="<?php echo get_home_url(); ?>">
        <img src="https://aux.tamu.edu/logos/primaryTAM-white.png" alt="Texas A&amp;M University logo"/>
      </a>
    </div>
    <div class="mobile-header__identity mobile-header__identity--text">
      <div class="site-title">
        <a href="<?php echo get_home_url(); ?>"><?php echo esc_html(get_bloginfo('name')); ?></a>
      </div>
    </div>
    <?php
  } else {
    ?>
    <?php echo aux_header_utility_back(); ?>
    <div class="mobile-header__identity mobile-header__identity--text">
      <div class="identity">
        <div class="identity__text">
          <a href="<?php echo get_home_url(); ?>" class="site-title"><?php echo esc_html(get_bloginfo('name')); ?></a>
        </div>
        <div class="identity__logo">
          <img
            alt="Texas A&amp;M University logo"
            src="https://aux.tamu.edu/logos/boxTAM.svg"
          />
        </div>
      </div>
    </div>
  <?php
  }
  ?>

  <div class="mobile-toggle">
    <button class="mobile-toggle__menu mobile-nav__menu" aria-expanded="false" aria-pressed="false" data-mobilemenu="menu-mobile" >
      Menu &amp; Search
      <div class="menu__icon"><span></span></div>
    </button>
  </div>
  <div class="nav-overlay" style="display: none;">
    <div class="mobile-nav" style="display: none;">
      <div class="mobile-nav__top">
        <button
          aria-controls="menu-mobile"
          aria-expanded="false"
          aria-pressed="false"
          class="close"
          data-mobile="menu-mobile"
          title="close mobile menu"
        >
          Close
        </button>
      </div>
      <div class="mobile-nav__primary">
        <div class="mobile-search__container">
          <div class="search">
            <form class="search__form" action="<?php echo get_home_url(); ?>">
              <label for="search" class="sr-only">Search</label>
              <input
                type="search"
                name="<?php echo aux_search_field_name(); ?>"
                placeholder=""
                id="search"
                class="search__input"
                aria-labelledby="search-label"
              />
              <button type="submit" class="btn btn--primary btn--icon" aria-label="submit">
                Search
                <svg>
                  <use href="#aux_angles-right"></use>
                </svg>
              </button>
            </form>
          </div>
        </div>
        <?php
          wp_nav_menu(
            array(
              'theme_location' => 'menu-1',
              'menu_id' => 'menu',
              'walker' => new header_menu_walker(),
            )
          );
        ?>
      </div>
      <?php
        echo aux_header_utility_ctas(true);
      ?>
    </div>
  </div>
</header>
