<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>AMD-R Dashboard</title>
        <!--Leafletjs------------------------------------------------------------->
        <!------------------------------------------------------------------------>
        <!--https://leafletjs.com/examples/quick-start/--------------------------->
        <!--https://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map----->
        <!------------------------------------------------------------------------>
        <link crossorigin="" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" rel="stylesheet" />
        <script crossorigin="" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
        <link href="/css/amd-r/amd-r.css" rel="stylesheet" type="text/css"/>
        <link href="/css/base.css" rel="stylesheet" type="text/css"/>
        <script src="https://kit.fontawesome.com/55e3235dcf.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <%- include('../includes/header') -%>                            
        <h1 class="title">Dashboard for <span id="name">AMD-R</span> </h1>
        <table class="dashboard">
            <tr class="dashboard">
                <td class="dashboard">
                    Call/Home
                    <hr>
                    <button class="call-home">MAIL</button>
                    <button class="call-home">HOME</button>
                </td>
                <td class="dashboard">
                    Battery
                    <hr>
                    <div id="battery">0%</div>
                    <div class="bar-frame">
                        <div class="bar" id="battery-bar">
                        </div>
                    </div>
                </td>
                <td class="dashboard" rowspan="2">
                    Map
                    <hr>
                    <div id="map"></div>
                    <div>If there are any errors in the map please report it to
                        <a href="https://www.openstreetmap.org/fixthemap">Open Street Maps</a>
                    </div>
                </td>
            </tr>
            <tr class="dashboard">
                <td class="dashboard">
                    Task
                    <hr>
                    <div id="task">None</div>
                </td>
                <td class="dashboard">
                    Speed
                    <hr>
                    <div id="speed">0 m/s</div>
                    <div class="bar-frame">
                        <div class="bar" id="speed-bar"></div>
                    </div>
                </td>
            </tr>
        </table>
        <script src="/js/amd-r/amd-r.js"></script>
        <%- include('../includes/footer') -%>                            
    </body>
</html>
