{% extends 'base.html.twig' %}

{% block body %}
    <div class="ContentBody">
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzXvU9v8DysRtMoW0ikY510A1CSEEinoI&callback=initMap&libraries=&v=weekly" defer></script>

        <script>
            // Initialize and add the map
            function initMap() {
                // The location of Uluru
                const caudry = { lat: 50.12502516109897, lng: 3.4103563037052};
                // The map, centered at Uluru
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 14,
                    center: caudry,
                });
                // The marker, positioned at Uluru
                const marker = new google.maps.Marker({
                    position: caudry,
                    map: map,
                });
            }
        </script>
        <article style="margin-left: 450px;">
            <img src="https://via.placeholder.com/350x101">
            <p>Logo Quali-Distrib</p>
        </article>
        <br>
        <br>
        <br>
        <article>
            <p>Activité</p>
        </article>
        <article>
            <p>Adresse<br>Téléphone</p>
        </article>
        <article>
            <p>Spécialité</p>
        </article>
        <article>
            <p>Horaires d'ouverture</p>
        </article>
        <article>
            <p>Jour de fermeture</p>
        </article>
        <article>
            <p>Prise de commande : Oui / Non</p>
        </article>
        <article>
            <p>Programme fidélité : Oui / Non</p>
        </article>
        <article>
            <p>Localisation des distributeurs</p>
        </article>
        <article>
            <h3>My Google Maps Demo</h3>
            <!--The div element for the map -->
            <div id="map"></div>
        </article>
    </div>
    <br>
    <br>
    <br>
{% endblock %}