<% if (event.ticketsAvailable && !event.externalBooking && event.allowBookings) { %>
<div class="d-none d-md-grid gap-2 mb-3 ">
	<a href="/events/<%= event._id %>/book" class="btn btn-success">
		<h3 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book Tickets</h3>
	</a>
</div>
<% } else if (event.externalBooking && event.allowBookings) { %>
<div class="d-none d-md-grid gap-2 mb-3">
	<a href="<%= event.externalBooking %>" data-bs-toggle="modal" data-bs-target="#externalBookingModal" class="btn btn-success">
		<h3 class="mt-2"><i class="bi bi-ticket-detailed"></i> Book Tickets</h3>
	</a>
</div>
<% } %>
<div class="card shadow py-3 px-3 mb-1">
	<div class="img align-middle text-center">
		<% if (event.img.url || event.eventHost.img.url) { %>
		<img id="eventImg" <% if (event.img.url) {%> aria-label="event-logo" <% } %> title="Hosted By <%= event.eventHost.name %>" class="rounded event-logo" 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="left:65px" id="hostLogo" src="<%= event.eventHost.img.url %>" class="host-logo-fade" title="Hosted By <%= event.eventHost.name %>" alt="">
		<% } %>
		<% } %>
	</div>
	<span class="text-center"><a target="_blank" href="<%= event.eventHost.eventSystem.website %>"><img class="img-fluid" src="<%= event.eventHost.eventSystem.img?.url %>" alt=""></a></span>
	<div class="mb-3">
		<ul class="list-group list-group-flush mb-1">
			<li class="list-group-item">
				<h5>Event Dates</h5>
			</li>
			<li class="list-group-item">
				<%= dateOutput(event.eventStart) %>
				<% if (dateOutput(event.eventStart) != dateOutput(event.eventEnd)) { %> to
				<%= dateOutput(event.eventEnd) %>
				<% } %>
			</li>
		</ul>
		<ul class="list-group list-group-flush mb-1">
			<li class="list-group-item">
				<h5>Event Location</h5>
			</li>
			<li class="list-group-item">
				<a target="_blank" href="https://www.google.com/maps/search/?api=1&query=<%= encodeURI(event.location) %>">
					<%= event.location %>
				</a>
			</li>
		</ul>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">
				<h5>Player Ticket Prices</h5>
			</li>
			<% var ticketCount = 0; for (var i = 0; i < event.eventTickets.length;i++) { if (['player','playerchild','mealticket','mealticketchild'].includes(event.eventTickets[i].ticketType) && new Date(event.eventTickets[i].availableTo) >= new Date() ) { ticketCount++;%>
                <li class="list-group-item">
                    <%= currencyOutput(event.eventTickets[i].cost) %> -
                    <%= event.eventTickets[i].description %><br><small><%= dateOutput(event.eventTickets[i].availableFrom) %> - <%= dateOutput(event.eventTickets[i].availableTo) %></small>
                </li>
			<% }} if (ticketCount === 0) { %>
                <li class="list-group-item">
                    No tickets are currently available
                </li>
			<% } %>
		</ul>
		<ul class="list-group list-group-flush mb-1">
			<li class="list-group-item">
				<h5>System Details</h5>
			</li>
                <li class="list-group-item">
					<% if (event.eventHost.contactAddress && event.eventHost.contactAddress.length > 0) { %>
                    <a href="mailto:<%= event.eventHost.contactAddress %>">
                        <%= event.eventHost.contactAddress %>
                    </a><br/><br/>		<% } %>
					<a class="" href="/system/<%= event.eventHost.eventSystem.systemRef %>">About <%= event.eventHost.eventSystem.name %></a>
                    <% if (event.eventHost.eventSystem.terms) { %>
                        <br /><a class="" href="/system/<%= event.eventHost.eventSystem.systemRef %>/terms">Terms & Conditions</a>
                    <% } %>

					<% if (event.eventHost.eventSystem.website?.length > 0) { %>
						<br /><br/><a class="" href="<%= event.eventHost.eventSystem.website %>"><%= event.eventHost.eventSystem.website.split('://')[1] %></a>
					<% } %>
                </li>
            </ul>

		<% if (event.eventHost.eventSystem.facebook?.length > 0) {  %>
		<a href="<%= event.eventHost.eventSystem.facebook %>" title="Facebook: <%= event.eventHost.eventSystem.facebook %>" class="me-2"><img src="/img/facebook.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.twitter?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.twitter %>" title="Twitter: <%= event.eventHost.eventSystem.twitter %>" class="me-2"><img src="/img/twitter.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.instagram?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.instagram %>" title="Instagram: <%= event.eventHost.eventSystem.instagram %>" class="me-2"><img src="/img/instagram.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.snapchat?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.snapchat %>" title="Snapchat: <%= event.eventHost.eventSystem.snapchat %>" class="me-2"><img src="/img/snapchat.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.tiktok?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.tiktok %>" title="TikTok: <%= event.eventHost.eventSystem.tiktok %>" class="me-2"><img src="/img/tiktok.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.whatsapp?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.whatsapp %>" title="WhatsApp: <%= event.eventHost.eventSystem.whatsapp %>" class="me-2"><img src="/img/whatsapp.png" height="24px" alt=""></a>
		<% } %>
		<% if (event.eventHost.eventSystem.discord?.length > 0) {  %>
			<a href="<%= event.eventHost.eventSystem.discord %>" title="Discord: <%= event.eventHost.eventSystem.discord %>" class="me-2"><img src="/img/discord.png" height="24px" alt=""></a>
		<% } %>
	</div>
</div>
<% if (currentUser) { %>
    <% if (adminGroups.includes(currentUser.role) || (currentUser.eventHosts.includes(event.eventHost._id)) || currentUser.eventSystems.includes(event.eventHost.eventSystem._id)) { %>
        <div class="card shadow py-3 px-3 mb-3">
            <h5>Event Admin</h5>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <a class="link-dark" href="/admin/events/<%= event._id %>/edit"><i class="bi bi-pencil-square pe-2"></i>Edit Event</a>
                </li>
				<li class="list-group-item">
                    <a class="link-dark" href="/admin/events/<%= event._id %>/manage"><i class="bi bi-bar-chart-line pe-2"></i>Manage Event</a>
                </li>
            </ul>
        </div>
    <% } %>
<% } %>