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

{% block title %}{{ 'display.title'|trans }} - accueil{% 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;
        } 
    </style>
{% endblock %}

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

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm p-4">
               Ce site permet aux commerçants et aux lieux référencés sur OpenStreetMap de modifier leurs informations facilement pour gagner en visibilité sur des milliers de sites web à la fois.
            </div>
        </div>
        <span class="p-3">
            <span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce['@attributes'].timestamp }}</span>, 
            {{ 'display.days_ago'|trans({'%days%': date(commerce['@attributes'].timestamp).diff(date()).days}) }} 
            {{ 'display.by'|trans }} 
            <a href="https://www.openstreetmap.org/user/{{ commerce['@attributes'].user }}" >{{ commerce['@attributes'].user }}</a>
            <div class="lien-OpenStreetMap">
                <a href="https://www.openstreetmap.org/node/{{ commerce['@attributes'].id }}" >{{ 'display.view_on_osm'|trans }}</a>
            </div>
        </span>

        <div class="disclaimer p-3">
            <p>
                <strong>{{ 'display.disclaimer.title'|trans }}:</strong>
                {{ 'display.disclaimer.text'|trans }}
            </p>
        </div>
    </div>

    
</div>

{% block javascripts %}
    {{ parent() }} 
{% endblock %}
{% endblock %}