<div class="calendar justify-content-center text-dark pb-5">
  <div class="d-flex justify-content-center align-items-center">
    <i class="fa fa-calendar fa-3x text-white mr-3"></i>
    <h1 class="display-4 my-4 text-white text-center">
      <%= new Intl.DateTimeFormat('en-US', {year: 'numeric', month: 'long'}).format(utcToZonedTime(new Date(), 'America/New_York')) %>
    </h1>
  </div>

  <div class="row seven-cols font-weight-bold text-white text-uppercase text-center mb-2">
    <div class="col d-none d-lg-table-cell">Sun</div>
    <div class="col d-none d-lg-table-cell">Mon</div>
    <div class="col d-none d-lg-table-cell">Tue</div>
    <div class="col d-none d-lg-table-cell">Wed</div>
    <div class="col d-none d-lg-table-cell">Thu</div>
    <div class="col d-none d-lg-table-cell">Fri</div>
    <div class="col d-none d-lg-table-cell">Sat</div>
  </div>

  <div class="row row-cols-1 seven-cols">
    <% dates.forEach(date => { %>
      <div class="col px-3 px-lg-0 pb-3 pb-lg-0">
        <div class="card h-100">
          <div class="card-body p-3 p-lg-2">
            <!-- Date at top right corner -->
            <% if (!isThisMonth(date)) { %>
            <p class="card-title font-weight-light text-black-50 text-right">
            <% } else if (isToday(date)) { %>
            <p class="card-title font-weight-bold text-danger text-right">
            <% } else { %>
            <p class="card-title font-weight-bold text-right">
            <% } %>
              <!-- Display weekday, month, and day for smaller screens -->
              <span class="d-inline d-lg-none">
                <%= new Intl.DateTimeFormat('en-US', {weekday: 'long', month: 'long', day: 'numeric'}).format(date) %>
              </span>
              
              <!-- Only display day of month for screens sizes lg and larger -->
              <span class="d-none d-lg-inline">
                <%= date.getDate() %>
              </span>
            </p>

            <!-- Buttons for reserving lessons (only enable on weekdays) -->
            <% if (!isSaturday(date) && !isSunday(date)) { %>
            <div class="btn-group-vertical d-flex justify-content-center" role="group" aria-label="Buttons for reserving lesson time slots">
              <!-- Set date time to 6 AM -->
              <% date.setHours(6, 0) %>

              <button type="button" class="btn btn-outline-primary btn-sm btn-block add-to-cart" data-name="<%= format(date, 'Pp') %>" data-price="80.00" <% if (isPast(date)){ %>disabled<% } %>>6-7 AM</button>

              <!-- Set date time to 7 AM -->
              <% date.setHours(7, 0) %>

              <% if (isFriday(date)) { %>
                <button type="button" class="btn btn-outline-primary btn-sm btn-block add-to-cart" data-name="<%= format(date, 'Pp') %>" data-price="80.00" <% if (isPast(date)){ %>disabled<% } %>>
                  <span>7-8 AM</span>
                  <span class="badge badge-pill badge-primary">Group</span>
                  <span class="sr-only">Slot for group lesson</span>
                </button>
              <% } else { %>
                <button type="button" class="btn btn-outline-primary btn-sm btn-block add-to-cart" data-name="<%= format(date, 'Pp') %>" data-price="80.00" <% if (isPast(date)){ %>disabled<% } %>>7-8 AM</button>
              <% } %>

            </div>
            <% } %>

          </div>
        </div>
      </div>
    <% }) %>

  </div>

</div>