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

{% block title %}{{ 'display.title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container mt-4">
    

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="card-title mb-4">{{ 'display.welcome'|trans }}</h1>
                    <div id="map" style="height: 400px; width: 100%;" class="rounded"></div>

                    {% if commerce_overpass is not empty %}
                         

                        <form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
                            <input type="hidden" name="osm_kind" value="{{ osm_kind }}">
                            <div class="mb-3">
                                <label for="commerce_id" class="form-label">{{ 'display.modify_commerce'|trans }}: 
                                <strong>
                                {% if commerce_overpass.tags_converted.name is defined %}
                                    {{ commerce_overpass.tags_converted.name }}
                                {% elseif commerce_overpass['@attributes'].name is defined %}
                                    {{ commerce_overpass['@attributes'].name }}
                                {% else %}
                                    {{ 'display.unknown'|trans }}
                                {% endif %}
                                </strong>
                                </label>
                                <br/>

                                <a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
                            </div>


                            {% if commerce.tags_converted.image is defined %}
                                <img src="{{ commerce.tags_converted.image }}" alt="Image du lieu" class="img-fluid mb-3">
                            {% endif %}

                            <h2>{{ 'display.attributes'|trans }}</h2>

                            <div class="row mb-3">
                                <div class="col-md-5">
                               
                                  <div class="row mb-3">
                                            <div class="col-md-5">
                                            <label for="commerce_tag_value__name">{{'display.keys.name'|trans}}</label>
                                            </div>
                                            <div class="col-md-5">
                                                <input type="text" class="form-control" name="commerce_tag_value__name" value=" {% if commerce.tags_converted.name is defined %}{{ commerce.tags_converted.name }}{% endif %}">
                                            </div>
                                        </div>

                                        {# cas d'une mairie
                                        #}

                                        {# {% if commerce.tags_converted.amenity is defined %}
                                            {% if commerce.tags_converted.amenity == 'townhall' %}
                                                {% include 'public/edit/townhall.html.twig' %}
                                            {% endif %}

                                            {% if commerce.tags_converted.amenity == 'restaurant' %}
                                                {% include 'public/edit/restaurant.html.twig' %}
                                            {% endif %}
                                        {% endif %} #}
                                </div>
                            </div>

                            
                            {% include 'public/edit/ask_angela.html.twig' %}
                            {# {# {% include 'public/edit/wheelchair.html.twig' %} #}
                            {# {% include 'public/edit/opening_hours.html.twig' %}
                            {% include 'public/edit/address.html.twig' %} #} #}
                            {% include 'public/edit/tags.html.twig' %}
                            
                            <button type="submit" class="btn btn-primary">{{ 'display.submit'|trans }}</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
        <span class="p-3">
            <span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce_overpass['@attributes'].timestamp }}</span>, 
            {{ 'display.days_ago'|trans({'%days%': date(commerce_overpass['@attributes'].timestamp).diff(date()).days}) }} 
            {{ 'display.by'|trans }} 
            <a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" target="_blank">{{ commerce_overpass['@attributes'].user }}</a>
            <div class="lien-OpenStreetMap">
                <a href="https://www.openstreetmap.org/node/{{ commerce_overpass['@attributes'].id }}" target="_blank">{{ 'display.view_on_osm'|trans }}</a>
            </div>

            {{ dump(commerce_overpass) }}
        </span>

        <div class="disclaimer p-3">
            <p>
                <strong>{{ 'display.disclaimer.title'|trans }}:</strong>
                {{ 'display.disclaimer.text'|trans }}
            </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') }}">{{ 'display.home'|trans }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</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 and mapbox_token is not empty and maptiler_token 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_overpass['@attributes'].lon }}, #}
             {# {{ commerce_overpass['@attributes'].lat }} #}
             ], 
            
            zoom: 14
        }); 

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