<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>
        VA Stats || <%= 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")%>
        <link rel="stylesheet" href="/public/leaflet/leaflet.css">
        <link rel="stylesheet" href="/public/flags/css/flag-icons.min.css">
    <style>
        .fixed-table-body{
             height: auto !important;
         }
         .statsRow>.col>div>p{
             margin-bottom: 0 !important;
         }
    </style>
</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">
            <h1 class="d-inline-block">
                <%= config.name%>'s Stats
            </h1>
            <br><br>
            <h2 class="text-muted"><span id="map-label">VA Routes</span></h2>
            <p id="loadingIndicator">Loading...</p>
            <div id="allRoutesMap"></div>
            <br>
            <h2 class="text-muted">Summary of VA flights</h2>
            <div class="row g-3 statsRow row-cols-1 row-cols-md-2 row-cols-lg-3">
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_total_flights">Total Flight</h2>
                        <p>Total Flights</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_total_hours">Total Flight Hours</h2>
                        <p>Total Flight Hours</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_common_type">Most Common Type</h2>
                        <p>Most Common Airport Type</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_common_country">Most Common Country</h2>
                        <p>Most Common Country</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_common_flight">Most Common Flight</h2>
                        <p>Most Common Flight</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_common_plane">Most Common Aircraft</h2>
                        <p>Most Common Aircraft</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_value_distance">Distance Flown</h2>
                        <p>Distance Flown (km)</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_value_fuel">Fuel Used</h2>
                        <p>Fuel Used (kg)</p>
                    </div>
                </div>
                <div class="col">
                    <div class="form-control text-center p-2">
                        <h2 id="stat_total_pilots"><%= pilotSize %></h2>
                        <p>Total Pilots</p>
                    </div>
                </div>
            </div>
            <br>
            <h2 class="text-muted">Fleet</h2>
            <table data-toggle="table" data-search="true" data-show-columns="true" id="mainTable">
                <thead>
                    <tr class="tr-class-2">
                        <th data-field="title">Vehicle</th>
                    </tr>
                </thead>
                <tbody>
                    <% aircraft.forEach(vic=>{%>
                        <tr id="tr-id-<%=vic.livID%>" class="tr-class-<%=vic.livID%>" data-title="<%=vic.livID%>"
                            title="<%=vic.livID%>" data-object='{"key": "value"}'>
                            <td id="td-id-<%=vic.livID%>" class="td-class-<%=vic.livID%>" data-title="<%=vic.publicName%>">
                                <strong>
                                    <%=vic.publicName%>
                                </strong>
                            </td>
                        </tr>
                        <%})%>
                </tbody>
            </table>
        </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="/public/leaflet/leaflet.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
            <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
            <script>
                const pireps = JSON.parse(atob('<%- Buffer.from(JSON.stringify(pireps)).toString("base64") %>'));
                const routes = JSON.parse(atob('<%- Buffer.from(JSON.stringify(routes)).toString("base64") %>'));
                const config = JSON.parse(atob('<%- Buffer.from(JSON.stringify(config)).toString("base64") %>'));
            </script>
            <script src="/public/scripts/vastats.js"></script>
</body>

</html>