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

{% block title %}Hello PublicController!{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
{% endblock %}

{% block body %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 rounded shadow-sm">
                <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="{{ path('app_public_index') }}">Accueil</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ path('app_public_index') }}">Statistiques</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ path('app_public_index') }}">Contacter un humain</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="card-title mb-4">Bienvenue dans les commerces!</h1>
 <div id="map" style="height: 400px; width: 100%;" class="rounded"></div>

                    {% if commerce is not empty %}

{# {{dump(commerce)}} #}
                        <div class="row mb-4">
                            <div class="col-12">
                               
                            </div>
                        </div>

                        <form action="{{ path('app_public_submit', {'osm_object_id': commerce['@attributes'].id, 'version': commerce['@attributes'].version, 'changesetID': commerce['@attributes'].changeset }) }}" method="post" class="needs-validation">
                            <div class="mb-3">
                                <label for="commerce_id" class="form-label">Modifier votre commerce: 
                                <strong>{{ commerce.tags_converted.name }}</strong>
                                </label>
                                <br/>

                                <a  class="btn btn-info" href="{{ path('app_public_index') }}">? Contacter des humains d'OSM France pour m'aider</a>
                            </div>

                            <h2>Tags</h2>
                            <fieldset>
                                {% for attributes in commerce.tag %}
                                    {% for kv in attributes %}
                                    <div class="row mb-3">
                                        <div class="col-md-5">
                                            <input type="text" class="form-control" name="commerce_tag_key__{{ kv.k }}" value="{{ kv.k }}" readonly>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="text" class="form-control" name="commerce_tag_value__{{ kv.k }}" value="{{ kv.v }}">
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% endfor %}

                                 
                            </fieldset>
                            
                            <button type="submit" class="btn btn-primary">Envoyer</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>

<span class="last-modification">Dernière modification: {{ commerce['@attributes'].timestamp }}</span> par <a href="https://www.openstreetmap.org/user/{{ commerce['@attributes'].user }}" target="_blank">{{ commerce['@attributes'].user }}</a>
<div class="lien-OpenStreetMap">
    <a href="https://www.openstreetmap.org/node/{{ commerce['@attributes'].id }}" target="_blank">Voir sur OpenStreetMap</a>
</div>

        <div class="disclaimer p-3">
            <p>
                <strong>Attention:</strong>
                Ce site est un travail en cours, ceci est une démonstration sur un objet fictif qui utilise les données de l'API OpenStreetMap.
            </p>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <nav class="bg-light p-3 rounded shadow-sm">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('app_public_index') }}">Accueil</a>
                    </li>
                    {# <li class="nav-item">
                        <a class="nav-link" href="{{ path('app_public_index') }}">Statistiques</a>
                    </li> #}
                    <li class="nav-item">
                        <a class="nav-link" href="https://openstreetmap.fr/contact/">Contacter un humain</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

{% block javascripts %}
    {{ parent() }}
    {# <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>  #}
    {# <script>
        {% if commerce is not empty %}
        mapboxgl.accessToken = '{{ mapbox_token }}'; 
        map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [{{ commerce['@attributes'].lon }}, {{ commerce['@attributes'].lat }}],
            
            zoom: 14
        }); 

        // Ajout du marqueur
        new mapboxgl.Marker()
            .setLngLat([{{ commerce.lon }}, {{ commerce.lat }}])
            .setPopup(new mapboxgl.Popup({
                offset: 25
            }).setHTML('<h1>{{ commerce.tags_converted.name }}</h1>'))
            .addTo(map);
         {% endif %}
    </script> #}
{% endblock %}
{% endblock %}