<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Events || <%= config.name %>
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <%- include("./components/head.ejs")%>
</head>

<body class="w-100 bg-light-light h-auto">
    <%- include("./components/nav.ejs")%>
        <div class="w-100 content bg-light-light px-3 px-md-5 pt-3 mb-4" id="content">
            <h2>Events</h2>
            <p class="text-muted">Click on an event to see more.</p>
            <div class="table-responsive">
            <table data-toggle="table" data-search="true" data-show-columns="true" id="mainTable">
                <thead>
                    <tr class="tr-class-2">
                        <th data-field="title">Title</th>
                        <th data-field="data">Date</th>
                        <th data-field="locations">Locations</th>
                    </tr>
                </thead>
                <tbody>
                    <% events.forEach(event=>{%>
                        <tr id="tr-id-<%=event.id%>" class="tr-class-<%=event.id%> pirepClickable" data-title="<%=event.id%>"
                            title="<%= event.id%>" data-object='{"key": "value"}' style="cursor: pointer;"
                            data-bs-toggle="modal" data-bs-target="#modal-<%=event.id%>">
                            <td id="td-id-<%=event.id %>" class="td-class-<%=event.id %>" data-title="<%= event.id %>">
                                <strong>
                                        <%= event.title%>
                                </strong>
                            </td>
                            <td data-text="<%= new Date(event.depTime).toLocaleDateString() %>">
                                <%= new Date(event.depTime).toLocaleDateString() %>
                            </td>
                            <td data-text="<%= event.depAir %> <i class='bi bi-chevron-right'></i> <%= event.arrAir%>">
                                <%= event.depAir %> <i class="bi bi-chevron-right"></i> <%= event.arrAir%>
                            </td>
                        </tr>
                    <%})%>
                </tbody>
            </table>
            </div>
        </div>
        <% events.forEach(event =>{%>
            <!-- Modal -->
            <div class="modal fade modal-fullscreen-sm-down" id="modal-<%=event.id%>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">
                                <%= event.title%>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <h4>
                                <%= event.title%>
                            </h4>
                            <p>
                                <%= event.body%>
                            </p>
                            <hr>
                            <h5>Details</h5>
                            <p>
                                <strong><i class="fa fa-plane"></i> Aircraft:</strong>
                                <%= event.airName%><br>
                                    <strong><i class="fa fa-plane-departure"></i> Departure:</strong>
                                    <%= event.depAir%><br>
                                        <strong><i class="fa fa-plane-arrival"></i> Arrival:</strong>
                                        <%= event.arrAir%><br>
                                            <strong><i class="bi bi-globe2"></i> Server:</strong>
                                            <%= event.server%><br>
                                                <strong><i class="bi bi-calendar2"></i> Date:</strong>
                                                <%= new Date(event.depTime).toLocaleString("EN-AU", {Hour12: true})%><br>
                                                    <strong><i class="bi bi-card-checklist"></i> Gates:</strong>
                                                    <% (event.gates.sort()).forEach(gate =>{%>
                                                        <%= gate.gate %>,    
                                                    <%})%><br>
                                                        </p>
                                                    </div>
                                                    <div class=" modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        <%})%>
        <%- include('components/footer.ejs') %>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
            crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
        
</body>

</html>