<% layout('layouts/boilerplate') %>

<% if (!events || events.length == 0) { %>
<div id="noEvents" class="my-md-5 pt-5">
  <h3 class="display-5 text-center mt-5 mb-3">There are currently no events available for booking</h3>
  <div class="display-6 text-center">Please check back soon!</div>
</div>
<div class="d-none d-md-block position-absolute bottom-0 start-50 translate-middle-x py-md-5 px-md-5 mb-md-5 border-top border-bottom border-3 text-center">
  <h4 class="mb-3">Are you an event organiser?</h4>
  <p>Why not see how we can help make booking and running your events easy!</p>
  <a href="/organisers" class="btn btn-secondary mt-3">Learn More About Our Event Organisers</a>
</div>
<div id="adSmall" class="d-md-none position-absolute bottom-0 mb-3 py-3 mx-3 me-4 border-top border-bottom border-3 text-center">
  <h4 class="mb-3">Are you an event organiser?</h4>
  <p>Why not see how we can help make booking and running your events easy!</p>
  <a href="/organisers" class="btn btn-secondary mt-3">Learn More About Our Event Organisers</a>
</div>
<script>
  document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', () => {
    document.getElementById('noEvents').classList.toggle('d-none')
    document.getElementById('adSmall').classList.toggle('d-none')
})
</script>
<% } else { %>
<div class="row row-cols-1 row-cols-md-3 g-4">
  <% for (event of events) { %>
    <% const hostPrefix = ['i','e','a','o','u'].includes(event.eventHost.name.toLowerCase().charAt(0)) ? 'An' : 'A'; %>
  <div class="col">
    <div class="card shadow h-100 py-3 px-3">
        <div class="card-header bg-white">
            <h4 class="card-title">
                <a class="link-dark" href="/events/<%= event._id %>">
                  <%= event.name %>
                </a>
              </h4>
        </div>
      <div class="row pb-0 mb-3">
        <div class="col">
            <div class="row g-md-4 g-2">
              <% if (event.img.url || event.eventHost.img.url){ %>
                <div class="col-4 col-md-4 pt-2" >
                    <div height="140px" class="img align-middle text-center ms-2">
                      <img id="eventImg<%= event._id %>" <% if (event.img.url) {%> aria-label="event-logo" <% } %> width="140px" class="rounded event-logo" width="140px" height="140px" src="<%= typeof event.img.url === 'undefined' ? event.eventHost.img.url : event.imgThumbnail %>" class="img-fluid rounded-start py-3 px-3" alt="...">
                      <% if (event.img.url) { %><img style="top:-58px !important; left:0px !important;" id="hostImg<%= event._id %>" aria-label="host-logo" src="<%= event.eventHost.img.url %>" class="host-logo-fade" alt=""><% } %>
                    </div>
                </div>
                <% } %>
                  <div class="col">
                    <div class="card-body pb-0">
                      <p class="card-text ms-md-5 ms-lg-4 pt-2">
                        <i>
                          <%= dateOutput(event.eventStart) %>
                                    <% if (dateOutput(event.eventStart) != dateOutput(event.eventEnd)) { %> to
                                    <%= dateOutput(event.eventEnd) %>
                                    <% } %><br /><small>
                            <%= event.location.split(',')[0] %>
                          </small>
                        </i>
                        <% if (event.eventHost.display) { %><small class="text-muted"><br/><br><%= `A ${event.eventHost.name} event` %></small><% } %>
                    </p>
                    </div>
                  </div>
            </div>
        </div>
      </div>
      <div class="card-text h-100 mb-3 align-top">
        <%- event.promoDescription %>
    </div>
      <div class="card-footer eventFooter">
        <div class="row h-100">
          <div class="col"><a class="link-dark" target="_blank" href="/system/<%= event.eventHost.eventSystem.systemRef %>"><% if (event.eventHost.eventSystem.img?.url) { %><img class="system-logo" style="max-width:250px;" src="<%= event.eventHost.eventSystem.img.url %>" alt="<%= event.eventHost.eventSystem.name %>"><% } else { %><%= event.eventHost.eventSystem.name %><% } %></a></div>
          <div class="col text-end mb-0 my-auto">
            
          </div>
        </div>
      </div>
    </div>
  </div>
  <% }  %>
</div>
<div class="text-end my-3">
  <a class="link-secondary" href="/?view=calendar">Calendar Layout</a>
</div>
<script src="/js/eventLogo.js"></script>
<% } %>
