<% layout('layouts/boilerplate') %>
    <div class="card shadow py-3 px-3 mb-3">
        <div class="card-header bg-white mb-3">
            <h4>Your Hosted Events</h4>
        </div>
        <div class=" ms-auto">
            <a href="/admin/events/new" class="btn btn-secondary"><i class="bi bi-plus-circle"></i> Add Event</a>
        </div>
        <table id="events" class="table table-striped table-hover">
            <thead>
                <th scope="col">Event Name</th>
                <th class="d-none d-md-table-cell" scope="col">Host</th>
                <th scope="col">Start Date</th>
                <th class="d-none d-md-table-cell" scope="col">End Date</th>
                <th class="d-none d-md-table-cell" scope="col" width="50px" class="text-center">Advertised?</th>
                <th class="d-none d-md-table-cell" scope="col" width="50px" class="text-center">Bookings?</th>
            </thead>
            <tbody>
                <% if (events) for (event of events) { %>
                    <tr style="cursor: pointer;" onclick="window.location= '/admin/events/<%= event._id %>/manage'" >
                        <td scope="row" class="<%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>">
                            <a href="/admin/events/<%= event._id %>/manage" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Event"><i class="bi bi-pencil-square link-dark"></i></a>

                            <a href="/admin/events/<%= event._id %>/manage" class="link-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="View Event Details">
                                <%= event.name %>
                            </a>
                            <%- event.cancelled ? '<span class="text-danger"><small>Cancelled</small></span>' : '' %>
                        </td>
                        <td class="d-none d-md-table-cell <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>" scope="row">
                            <% try { %>
                                <%= event.eventHost.eventSystem.name %>
                                    <%= event.eventHost.display? ` - ${event.eventHost.name}` : '' %>
                                        <% } catch {} %>
                        </td>
                        <td scope="row" class="<%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>">
                            <%= dateOutput(event.eventStart) %>
                        </td>
                        <td class="d-none d-md-table-cell <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>" scope="row">
                            <%= dateOutput(event.eventEnd) %>
                        </td>
                        <td class="d-none d-md-table-cell text-center <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %> <%= event.visible ? 'text-success' : 'text-danger' %>" scope="row" data-bs-toggle="tooltip" data-bs-placement="top" title="<%= event.eventApproved ? '' : 'This event has not been approved!' %>">
                            <%- event.visible ? '<i class="bi bi-check-square-fill"></i>' : '<i class="bi bi-x-square-fill"></i>' %>
                        </td>
                        <td class="d-none d-md-table-cell text-center <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %> <%= event.allowBookings ? 'text-success' : 'text-danger' %>" scope="row" data-bs-toggle="tooltip" data-bs-placement="top" title="<%= event.eventApproved ? '' : 'This event has not been approved!' %>">
                            <%- event.allowBookings ? '<i class="bi bi-check-square-fill"></i>' : '<i class="bi bi-x-square-fill"></i>' %>
                        </td>
                    </tr>
                    <% } %>
            </tbody>
        </table>
        <ul id="eventsNavPosition" class="pagination pager-nav justify-content-center"></ul>
        <script src="/js/pagination.js"></script>
        <script>
            const eventsPager = new Pager('events', 15);
            eventsPager.init();
            eventsPager.showPageNav('eventsPager', 'eventsNavPosition');
            eventsPager.showPage(1);
        </script>
    </div>