<% layout('layouts/image') %>
<div  id="cardLayout" style="width:1200px;height:630px" class="row bg-light">
    <div class="col-8 py-5 px-5">
        <h2 class="mt-5 ms-3 text-muted"><%= `${event.eventHost.eventSystem.name}${event.eventHost.display ? ` - ${event.eventHost.name}`: ''}` %> Presents</h2>
        <h1 class="my-4 ms-3 display-4"><%= event.name %></h1>
        <h3 class="ms-3 mb-3 text-muted">				<%= dateOutput(event.eventStart) %>
            <% if (dateOutput(event.eventStart) != dateOutput(event.eventEnd)) { %> to
            <%= dateOutput(event.eventEnd) %>
            <% } %></h3>
        <h3 class="ms-3 mb-5 text-muted"><%= event.location.split(',')[0] %></h3>
        <% if (event.allowBookings) { %>
            <button class="btn btn-lg btn-success px-5 ms-3 mt-5 text-white"><h2>Book Your Tickets Now!</h2></button>    
            <% } else { %>
        <button class="btn btn-lg btn-dark px-5 ms-3 mt-5 text-white"><h2>Find Out More</h2></button>
        <% } %>
    </div>
    <div style="height:630px" class="col py-5 my-5 px-4 align-middle">
        <img style="border-radius: 15px;transform:rotate(5deg);margin-left:-80px" class="shadow my-5" src="<%= (typeof event.img?.url === 'undefined' || typeof event.img === 'undefined' ? event.eventHost.img.url : event.img.url).replace('upload/','upload/w_300/') %>" alt="">
    </div>
</div>