<% layout('layouts/boilerplate') %>
    <div class="card shadow py-3 px-3 mb-3">
        <div class="card-header bg-white mb-3">
            <h4>Manage 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>
        <div class="card-body">
            <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>
                    <% for (event of events) { %>
                        <% if ((currentUser.eventSystems.filter(a => a._id.equals(event.eventHost.eventSystem._id)).length > 0 || currentUser.eventHosts.filter(a => a._id.equals(event.eventHost._id)).length > 0) || adminGroups.includes(currentUser.role)) { %>
                        <tr style="cursor: pointer;" onclick="window.location= '/admin/events/<%= event._id %>/manage'" title="<%= event.eventEnd < archiveDate ? 'This event has been archived' : '' %>">
                            <td scope="row" class="<%= event.eventEnd < archiveDate ? 'text-muted' : '' %>">
                                <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 <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>"></i></a>

                                <a href="/admin/events/<%= event._id %>/manage" class="link-dark <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %>" 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 <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %> text-center <%= 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 <%= event.eventEnd < archiveDate ? 'text-muted text-decoration-line-through' : '' %> text-center <%= 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>
            <div class="text-end" style="margin-top:20px"><small><a href="" class="link-dark" data-bs-toggle="modal" data-bs-target="#jsonModal">View JSON</a></small></div>
        </div>
    </div>
    <script src="/js/pagination.js"></script>
    <script>
        const eventsPager = new Pager('events', 15);
        eventsPager.init();
        eventsPager.showPageNav('eventsPager', 'eventsNavPosition');
        eventsPager.showPage(1);
    </script>
    <% function replacer(key,value)
    {
        if (key=="_id") return undefined;
        else if (key=="__v") return undefined;
        else return value;
    } %>
<div id="jsonModal" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">JSON View</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <pre id="jsonText" onclick="selectText('jsonText')"><%= JSON.stringify(events,replacer,2) %></pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>