<% 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>Manage Event Systems</h4>
                </div>
                <div class="card-body">
                    <div class="text-end ms-auto">
                        <a href="/admin/systems/new" class="btn btn-secondary"><i class="bi bi-plus-circle"></i> Add Event System</a>
                    </div>
                    <table id="eventSystems" class="table-striped table table-hover">
                        <thead>
                            <th scope="col">Name</th>
                            <th scope="col"></th>
                        </thead>
                        <tbody>
                            <% for (eventSystem of eventSystems) { %>
                                <% if (currentUser.eventSystems.filter(a => a._id.equals(eventSystem._id)).length > 0 || adminGroups.includes(currentUser.role)){ %>
                                <tr onclick="window.location='/admin/systems/<%= eventSystem._id %>'" style="cursor: pointer;">
                                    <td scope="row">
                                        <%= eventSystem.name %>
                                    </td>
                                    </td>
                                    <td scope="row"><a href="/admin/systems/<%= eventSystem._id %>" class="link-dark"><i class="bi bi-pencil-square"></i></a></td>
                                </tr>
                                <% }} %>
                        </tbody>
                    </table>
                    <ul id="systemsNavPosition" 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>
                    <script src="/js/pagination.js"></script>
                    <script>
                        const systemsPager = new Pager('eventSystems', 15);
                        systemsPager.init();
                        systemsPager.showPageNav('systemsPager', 'systemsNavPosition');
                        systemsPager.showPage(1);
                    </script>
                </div>
            </div>
        </div>
    </div>
    <% 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(eventSystems,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>