{# @var form \Mapbender\VectorTilesBundle\Entity\VectorTileInstance #}
{% extends "@MapbenderManager/Repository/instance.html.twig" %}


{% block form_main1 %}
    {{ parent() }}
    {{ form_row(form.minScale) }}
    {{ form_row(form.maxScale) }}
    {{ form_row(form.printScaleCorrection) }}
{% endblock %}


{% block form_main2 %}
    {{ parent() }}
    {{ form_row(form.selected) }}
    {{ form_row(form.allowSelected) }}

    <h4 class="mt-4">{{ 'mb.vectortiles.admin.featureinfo.heading' | trans }}</h4>
    {{ form_row(form.featureInfo) }}
    {{ form_row(form.featureInfoAllowToggle) }}
    <div tabindex="0" class="showmore clickable" onclick="this.nextElementSibling.classList.toggle('hidden')">
        {{ 'mb.vectortiles.admin.featureinfo.advanced' | trans }}
    </div>
    <div class="advanced hidden">
        {{ form_row(form.featureInfoTitle) }}
        {{ form_row(form.hideIfNoTitle) }}
        {{ form_row(form.featureInfoPropertyMap) }}
    </div>

    <h4 class="mt-4">{{ 'mb.vectortiles.admin.legend.heading' | trans }}</h4>
    {{ form_row(form.legendEnabled) }}
    <div tabindex="0" class="showmore clickable" onclick="this.nextElementSibling.classList.toggle('hidden')">
        {{ 'mb.vectortiles.admin.featureinfo.advanced' | trans }}
    </div>
    <div class="advanced hidden">
        {{ form_row(form.legendPropertyMap) }}
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {
                html: true,
                placement: 'left',
                trigger: 'click focus'
            }));
        });
    </script>
{% endblock %}
