{% extends "@TigrisContent/element/show.html.twig" %}

{% block element_content %}
<div class="article-header">
<h1>{{ entity.name }} </h1>
{# {% if entity.data.image is not empty %}<img src="{{ entity.data.image.getWebPath('article') }}" />{% endif %} #}
<small>
{{ entity.publishedAt|format_datetime('full','none') }}
</small>
</div>

<div class="article-content">
{% embed '@TigrisContent/widget/_widget.html.twig' with {'name': 'content', 'type': 'text', 'data': entity.getData('content')} %}
{% endembed %}
</div>

{% if entity.gallery is not empty %}
<div class="gallery">
{% for photo in entity.gallery %}
    <a href="{{ asset(photo.webPath) }}" data-gallery><img src="{{ asset(photo.getWebPath('thumbnail')) }}" alt="{{ photo.name }}" /></a>
{% endfor %}
</div>

{% endif %}

{% if entity.data.map is not empty %}
<div class="article-map" id="map"></div>
{% endif %}

<tigris-reaction :user-id="{{ app.user is not empty ? app.user.id : 0 }}" entity-name="Tigris\ContentBundle\Entity\Element" :entity-id="{{ entity.id }}" v-slot="">
    <div class="reactions">
        <reaction-comment></reaction-comment>
    </div>
</tigris-reaction>

<div id="article-bottom"></div>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if entity.data.map is not empty %}
<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
<script>
var center = null;
var markerTitle = null;
{% if entity.data.map == 'salle_des_fetes' %}
center = [48.23117, 6.99244];
markertitle = "Salle des fêtes Entre-Deux-Eaux";
{% elseif entity.data.map == 'stade_rememont' %}
center = [48.25509, 6.98617];
markertitle = "Stade de remémont";
{% endif %}
var map = L.map('map', {
    center: center,
    zoom: 15,
    zoomControl: false,
    attributionControl: false,
    boxZoom: false,
    dragging: false,
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker(center, {
    title: markertitle,
}).addTo(map);
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="+2p+s2+1m-5w+4a"
     data-ad-client="ca-pub-8405240064001035"
     data-ad-slot="1858898777"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
{% endif %}
{% endblock %}