<!-- Navbar at top of page: fixed-top to expand over content -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" id="navbar-top">
  <!-- Container to center navbar contents -->
  <div class="container">
    <!-- Puck logo Joe -->
    <a class="navbar-brand" href="/">
      <!-- <img src="/images/logo_navbar-240x40.png" class="border border-info img-fluid rounded-lg" alt="HockeyRATS navbar logo"> -->

      <img
        src="/images/hockeyrats-logo-cropped.svg"
        class="img-fluid rounded-lg"
        id="navbar-logo"
        alt="HockeyRATS navbar logo">
    </a>

    <!-- Navbar toggler/hamburger for smaller screens sizes -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item <%= typeof page !== 'undefined' && page === 'index' ? 'active' : '' %>">
          <a class="nav-link h5" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link h5" href="/about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link h5" href="/lessons">Lessons</a>
        </li>
        <li class="nav-item">
          <a class="nav-link h5" href="/contact">Contact</a>
        </li>
      </ul>

      <!-- Toggler/hamburger dropdown divider between left and right side links -->
      <div class="dropdown-divider d-block d-lg-none"></div>

      <!-- Navbar for cart -->
      <ul class="navbar-nav mr-2">
        <li class="nav-item">
          <a class="nav-link" data-toggle="modal" data-target="#cart">
            <p class="d-inline d-lg-none h5">Reservations</p>
            <i class="fas fa-shopping-cart fa-lg d-none d-lg-inline"></i>
            <span class="badge badge-light ml-1" id="cart-total-items"></span>
          </a>
        </li>
      </ul>

      <!-- Divider between cart and social media -->
      <!-- <div class="dropdown-divider d-block d-lg-none"></div> -->

      <!-- Navbar right: External links (Facebook, Instagram, Twitter) -->
      <!-- Text-only until lg screen size then logo-only for larger screens -->
      <!-- <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="https://www.facebook.com/icelandskating/" target="_blank" rel="noreferrer noopener">
            <p class="d-inline d-lg-none">Facebook</p>
            <i class="fab fa-facebook-square fa-lg d-none d-lg-inline"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.instagram.com/icelandskatingcenter/" target="_blank" rel="noreferrer noopener">
            <p class="d-inline d-lg-none">Instagram</p>
            <i class="fab fa-instagram-square fa-lg d-none d-lg-inline"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://twitter.com/mercer_chiefs" target="_blank" rel="noreferrer noopener">
            <p class="d-inline d-lg-none">Twitter</p>
            <i class="fab fa-twitter-square fa-lg d-none d-lg-inline"></i>
          </a>
        </li>
      </ul> -->

    </div>
  </div>
</nav>

<!-- Alert when adding to cart for smaller screens -->
<div class="alert alert-fixed alert-success fade show rounded-0 d-none d-lg-none" role="alert">
  Added <span id="cart-item-name"></span> to <a href="#" class="text-primary" data-toggle="modal" data-target="#cart">reservations.</a>
</div>

<!-- Include modal for cart -->
<%- include("cart.ejs") %>