{% if carte is defined %}
    <div id="map" class="tests" width="{{carte.getWidth()}}" height="{{carte.getHeight()}}">

        <img src="{{carte.urlImg()}}" alt="{{carte.name}}">

        {% if markers is defined %}
            {% for m in markers %}
                <div class="marker mk_{{(m.type != 0)?m.type:1}}" data-id="{{m.id}}" data-coords="{{m.posX}},{{m.posY}}" data-name="{{m.print('name')|raw}}">
                    <h3>{{m.print('name')|raw}}</h3>
                    {% if editMod is not defined %}
                        {{ m.print('image')|raw}}
                        {{ m.print('description')|raw}}
                        {{ m.print('lien')|raw}}
                        {{ m.print('son')|raw}}
                        {{ m.print('video')|raw}}
                    {% endif %}
                </div>
            {% endfor %}
        {% endif %}
    </div>
    <div class="mention">
        <div id="mentionlegal">Mentions légales </div>
    </div>

    <div class="popupmention">
        <div class="close">  <img src="images/cancel.png" alt="" width="20"/></div>
        <div id="fra">
            {{ carte.mentions|raw }}
        </div>
        <div id="eng" style="display: none;">
            {{ carte.mentions_en|raw }}
        </div>
    </div>

    <script type="text/javascript">
        $(".mention").on('click', function() {
            var lang = window.location.search.includes('lang=en') ? 'en' : 'fra';
            $('.popupmention').css('display', 'block');
            if (lang === 'en') {
                $('#fra').hide();
                $('#eng').show();
            } else {
                $('#eng').hide();
                $('#fra').show();
            }
        });

        $(".close").on('click', function() {
            $('.popupmention').css('display', 'none');
        });
    </script>   
{% else %}

<p>Carte non définie</p>

{% endif %}