{% extends "@MapbenderManager/Repository/instance.html.twig" %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('components/jquery-ui/themes/base/jquery-ui.min.css') }}" type="text/javascript" />
  {{parent()}}
{% endblock %}

{% block js %}
  <script type="text/javascript" src="{{ asset('bundles/mapbenderwms/mapbender.wms.dimension.js') }}"></script>
  {{parent()}}
  <script type="text/javascript" src="{{ asset('bundles/mapbenderwms/backend/instance-dimension.js') }}"></script>

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

{% block form_main1 %}
  {{ parent() }}
  {{ form_row(form.format) }}
  {{ form_row(form.infoformat) }}
  {{ form_row(form.exceptionformat) }}
  {{ form_row(form.buffer) }}
  {{ form_row(form.ratio) }}
{% endblock form_main1 %}

{% block form_main2 %}
  <div class="extendedGroup">
    {% if form.dimensions is defined %}
      <div class="card content-toggle-container closed mb-3">
        <div class="card-header content-toggle clickable clearfix">
          <i class="fa-lg fas fa-plus pull-right"></i>
          {{ 'mb.wms.repo.instance.label.dimensions' | trans }}
        </div>
        <div class="content-toggle-target">
          {% for dim in form.dimensions %}
              {%- include "@MapbenderWms/Repository/dimension-form.html.twig"  with {'dim': dim} -%}
          {% endfor %}
        </div>
      </div>
    {% endif %}
    <div class="card content-toggle-container closed mb-3">
      <div class="card-header content-toggle clickable clearfix">
        <i class="fas fa-lg fa-plus pull-right"></i>
        {{ 'mb.wms.wmsloader.repo.instance.vendorspecific.label' | trans }}
      </div>
      <div class="card-body content-toggle-target vendorspecifics-form">
        {{ form_widget(form.vendorspecifics) }}
      </div>
    </div>
  </div>
  <div>
    {{ parent() }}
    {{ form_row(form.transparency) }}
    {{ form_row(form.tiled) }}
  {% if form.layerOrder is defined %}
    {{ form_row(form.layerOrder) }}
  {% endif %}
  {{ form_row(form.refreshInterval) }}
  </div>
{% endblock form_main2 %}

{% block form_layers %}
    {% set root = instance.source.getRootlayer() %}
    <table id="instanceTable" class="table table-condensed table-outlined instanceTable">
      <thead>
      {% set _proto = form.layers.vars.prototype %}
        <tr>
          <th></th>
          <th>{{"mb.manager.source.option.title"|trans}}</th>
          <th>{{"mb.wms.wmsloader.repo.instance.label.minsc"|trans}}</th>
          <th>{{"mb.wms.wmsloader.repo.instance.label.maxsc"|trans}}</th>
          <th class="checkboxColumn">{{"mb.wms.wmsloader.repo.instance.label.active"|trans}}</th>
          <th class="checkboxColumn group-start group-end" colspan="2">{{"mb.wms.wmsloader.repo.instance.label.select"|trans}}</th>
          <th class="checkboxColumn" colspan="2">{{"mb.wms.wmsloader.repo.instance.label.info"|trans}}</th>
          <th class="checkboxColumn group-start group-end" colspan="2">{{"mb.wms.wmsloader.repo.instance.label.toggle"|trans}}</th>
          <th></th>
        </tr>
        <tr>
          <th colspan="5"></th>
          <th class="checkboxColumn smallText group-start">{{"mb.wms.wmsloader.repo.instance.label.allow"|trans}}</th>
          <th class="checkboxColumn smallText group-end">{{"mb.wms.wmsloader.repo.instance.label.on"|trans}}</th>
          <th class="checkboxColumn smallText">{{"mb.wms.wmsloader.repo.instance.label.allow"|trans}}</th>
          <th class="checkboxColumn smallText">{{"mb.wms.wmsloader.repo.instance.label.on"|trans}}</th>
          <th class="checkboxColumn smallText group-start">{{"mb.wms.wmsloader.repo.instance.label.allow"|trans}}</th>
          <th class="checkboxColumn smallText group-end">{{"mb.wms.wmsloader.repo.instance.label.on"|trans}}</th>
          <th></th>
        </tr>
        <tr>
          <th colspan="4"></th>
          {{ form_row(_proto.active, {'tagName': 'th'}) }}
          {{ form_row(_proto.allowselected, {'tagName': 'th'}) }}
          {{ form_row(_proto.selected, {'tagName': 'th'}) }}
          {{ form_row(_proto.allowinfo, {'tagName': 'th'}) }}
          {{ form_row(_proto.info, {'tagName': 'th'}) }}
          {{ form_row(_proto.allowtoggle, {'tagName': 'th'}) }}
          {{ form_row(_proto.toggle, {'tagName': 'th'}) }}
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% include "@MapbenderWms/Repository/instance-layer-form.html.twig"  with {'form_layers': form.layers, 'layer': instance.getrootlayer, 'level': 0 }%}
        <tr class="dummy">
          <td colspan="20"></td>
        </tr>
      </tbody>
    </table>
{% endblock form_layers %}
