<% layout('layouts/boilerplate') %>
    <div class="row">
        <div class="col col-md-8 offset-md-2">
            <div class="card shadow py-3 px-3 mb-3">
                <div class="card-header bg-white">
                    <h4>Event fully booked!</h4>
                </div>
                <div class="card-body">
                    <div class="row h-100 g-0">
                        <div class="col-md-4">
                            <div class="img align-middle text-center ms-2"><img id="eventImg<%= eventBooking._id %>" aria-label="event-logo" class="rounded event-logo" src="<%= typeof eventBooking.event.img.url === 'undefined' ? eventBooking.event.eventHost.img : eventBooking.event.imgThumbnail %>" class="img-fluid rounded-start py-3 px-3" alt="...">
                                <% if (eventBooking.event.img?.url) { %>
                                  <img style="top:-60px !important; left:0px !important;" id="hostImg<%= eventBooking._id %>" aria-label="host-logo" src="<%= eventBooking.event.eventHost.img.url %>" class="host-logo-fade" alt="">
                                <% } %>
                                <% if (eventBooking.event.eventHost.eventSystem.img?.url) { %>
                                  <img  id="hostSystemImg<%= eventBooking._id %>" src="<%= eventBooking.event.eventHost.eventSystem.img.url %>" class="img-fluid mt-3" alt=""> 
                                <% } %>
                              </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h4 class="card-title">
                                    <p class="display-6">Pay for
                                        <%= currentUser && currentUser.equals(eventBooking.user) ? 'your' : 'another' %> booking</p>
                                    <a class="link-dark" href="/events/<%= eventBooking.event._id %>">
                                        <%= eventBooking.event.name %>
                                    </a>
                                </h4>
                                <p class="card-text">
                                    <i>
                                        <%= dateOutput(booking.event.eventStart) %>
                                        <% if (dateOutput(booking.event.eventStart) != dateOutput(booking.event.eventEnd)) { %> to
                                        <%= dateOutput(booking.event.eventEnd) %>
                                        <% } %><br /><small>
                        <a class="link-dark" target="_blank" href="https://www.google.com/maps/search/?api=1&query=<%= encodeURI(eventBooking.event.location) %>"><%= eventBooking.event.location.split(',')[0] %></a>
                        </small>
                    </i>
                                </p>
                                <div class="alert alert-danger">
                                    <p>We're sorry to say that the event you're trying to pay for has sold out since you began your booking.</p>
                                    <p>You have automatically been added to the waiting list for this event.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>