<!DOCTYPE html>
<html lang="fr">

<!-- Head -->
<head>
    {% include 'head.html' %}
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyBVRxoSLxgGg0ZzLDBKHz7n8dylAPHEkoM"
            type="text/javascript"></script>
    <script async type="text/javascript">
        // On initialise la latitude et la longitude de Paris (centre de la carte)
        var lat = {
        {
            lat
        }
        }
        ;
        var lon = {
        {
            lon
        }
        }
        ;
        var map = null;
        var marker;

        // Fonction d'initialisation de la carte
        function initMap() {
            // Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
            map = new google.maps.Map(document.getElementById("map"), {
                // Nous mettons la carte au centre avec les coordonnées
                center: new google.maps.LatLng(lat, lon),
                // Nous définissons le zoom par défaut (réglable in HTML)
                zoom: 16,
                // Nous activons en mode carte routière
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                // Nous activons les options de contrôle de la carte
                mapTypeControl: true,
                // Nous désactivons la roulette de souris
                scrollwheel: false,
                // Nous désactivons le déplacement sur la carte
                draggable: false,
                mapTypeControlOptions: {
                    // Cette option sert à définir comment les options se placent
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                // Activation des options de navigation dans la carte (zoom...)
                navigationControl: true,
                navigationControlOptions: {
                    // Comment ces options doivent-elles s'afficher
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                }
            });
            marker = new google.maps.Marker({
                map: map,
                // Nous animons le marqueur en DROP
                animation: google.maps.Animation.DROP,
                // Nous définissons la position
                position: {lat: {
            {
                lat
            }
        },
            lng: {
                {
                    lon
                }
            }
        }
        })
            ;
        }

        window.onload = function () {
            // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
            initMap();
        };
    </script>
    <style type="text/css">
        #map { /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
            height: 700px; /* The height is 400 pixels */
            width: 100%; /* The width is the width of the web page */
        }
    </style>
</head>
<!-- End of Head -->
<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    {% include 'sidebar.html' %}
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                {% include 'topbar.html' %}
            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                {% if loc==0 %}
                <!-- Page Heading -->
                <div class="text-center">
                    <h3>Localisation du patient ({{town}})</h3>
                    <div id="map">
                        <!-- Ici s'affichera la carte -->
                    </div>
                </div>
                {% endif %}
                {% if loc==1 %}
                <!-- Page Heading -->
                <div class="text-center">
                    <h3>Aucune donnée de localisation</h3>
                </div>
                {% endif %}

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        {% include 'footer.html' %}
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    {% include 'auth/logout_modal.html' %}
</div>

</body>

</html>