<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>
        My 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">
    <%- 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"><%= user.display%>'s Stats</h1><h3 class="text-muted ms-2 d-inline-block"><%=config.code + user.username%></h3>
            <br><br>
            <h2 class="text-muted">Where Have I been?</h2>
            <p id="loadingIndicator">Loading...</p>
            <div id="map"></div>
            <br>
            <h2 class="text-muted d-inline-block">Summary of my flights</h2>
            <a class="btn btn-<%= config.other.navColor[2] %> ms-3 mb-2" href="/oldPirep">View All</a>
            <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>
        </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>
            const data = JSON.parse(atob('<%- Buffer.from(JSON.stringify(user)).toString("base64") %>'));
        </script>
        <script src="/public/scripts/stats.js"></script>
</body>

</html>