<% layout('layouts/boilerplate') %>

    <div class="card shadow  py-3 px-3 mb-3">
        <div class="card-header bg-white mb-3">
            <h4>Manage Event Hosts</h4>
        </div>
        <div class=" ms-auto">
            <a href="/admin/hosts/new" class="btn btn-secondary"><i class="bi bi-plus-circle"></i> Add Event Host</a>
        </div>
        <div class="card-body">
            
            <table id="eventHosts" class="table table-hover">
                <thead>
                    <th scope="col">System</th>
                    <th class="hosts" scope="col">
                        <div class="row">
                            <div class="d-none d-md-table-cell col-md-auto">
                                Host Name
                            </div>
                            <div class="col-md"><input id="hostSearch" type="text" class="form-control form-control-sm pe-3" placeholder="Search..."></div>
                            <div class="d-table-cell d-md-none col-md-auto mt-3">
                                Host Name
                            </div>
                        </div></th>
                    <th scope="col"></th>
                </thead>
                <tbody class="hosts">
                    <% for (eventHost of eventHosts.sort((a,b) => a.eventSystem.name.localeCompare(b.eventSystem.name) || a.name.localeCompare(b.name))) { %>
                        <% if (adminGroups.includes(currentUser.role) || currentUser.eventHosts.filter(a => a._id.equals(eventHost._id)).length > 0 || currentUser.eventSystems.filter(a => a._id.equals(eventHost.eventSystem._id)).length > 0) { %>
                            <tr onclick="window.location = '/admin/hosts/<%= eventHost._id %>'" style="cursor: pointer;">
                                <td scope="row">
                                    <%= eventHost.eventSystem?.name %>
                                </td>
                                <td class="hosts" scope="row">
                                    <%= eventHost.name %>
                                </td>
                                <td scope="row"><a href="/admin/hosts/<%= eventHost._id %>" class="link-dark"><i class="bi bi-pencil-square"></i></a></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>
            <script src="/js/pagination.js"></script>
            <script>
                const eventsPager = new Pager('eventHosts', 15);
                eventsPager.init();
                eventsPager.showPageNav('eventsPager', 'eventsNavPosition');
                eventsPager.showPage(1);
                function filterTable(type) {
                    const query = q => document.querySelectorAll(q);
                    const filters = [...query(`th.${type} input`)].map(e => new RegExp(e.value, 'i'));
                    query(`tbody.${type} tr`).forEach(row => row.style.display = 
                    filters.some((f, i) => f.test(row.cells[0].textContent) || f.test(row.cells[1].textContent)) ? '' : 'none');
                }
                document.getElementById('hostSearch').addEventListener('keyup', function() {
                    filterTable('hosts');
                });
            </script>
        </div>
    </div>
<% function replacer(key,value)
{
    if (key=="eventSystem") return undefined;
    else 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(eventHosts,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>