{% if carte is defined %}
<div id="map-wrapper">
    <div id="map" class="test"
         data-base-width="{{ carte.getWidth() }}"
         data-base-height="{{ carte.getHeight() }}">
            <!-- Image de la carte -->
            <img src="{{ carte.urlImg() }}" alt="{{ carte.name }}" class="map-image base-image">

            {% 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 }}">
        <div class="markerContent" style="display: none;">
    <button class="expand-popup">&#x2922;</button> <!-- Icône d'agrandissement -->            <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>
    </div>
{% endfor %}



            {% endif %}
        </div>
    </div>

    <!-- Boutons de zoom -->
    <div id="zoom-controls">
        <button id="zoomIn">+</button>
        <button id="zoomOut">-</button>
    </div>
</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 %}