{% if configuration.showFilter %}
    <div class="input-group my-3">
        <input type="search" class="form-control layer-filter-input" placeholder="{{ 'mb.core.layertree.filter.placeholder'| trans }}" tabindex="0">
    </div>
{% endif %}
  <ul class="layers" >
      <li class="-fn-theme-template themeContainer hidden">
        <div class="leaveContainer">
          <span class="-fn-toggle-children clickable" title="{{ 'mb.core.layertree.tooltip.sublayers_openclose'|trans }}" tabindex="0">
              <i class="fas fa-folder fa-fw"></i>
          </span>
          <span class="-fn-toggle-selected clickable" title="{{ 'mb.core.layertree.label.sourcevisibility_onoff' | trans }}" tabindex="0">
                <i class="far fa-square fa-fw"></i>
          </span>
          <span class="layer-title clickable" tabindex="-1"></span>
        </div>
        <ul class="layers"></ul>
      </li>
      <li class="-fn-template hidden leave showLeaves">
        <div class="leaveContainer">
          <span class="-fn-toggle-children clickable" data-test="mb-lt-layer-folder-icon" title="{{ 'mb.core.layertree.tooltip.sublayers_openclose'|trans }}" tabindex="0">
            <i class="fas fa-folder fa-fw"></i>
          </span>
          <span class="clickable -fn-toggle-selected" data-test="mb-lt-layer-visibility" title="{{ 'mb.core.layertree.label.visibility_onoff' | trans }}" tabindex="0">
              <i class="far fa-square fa-fw"></i>
          </span>
          <span class="clickable -fn-toggle-info" title="{{ 'mb.core.layertree.label.featureinfo_onoff' | trans  }}" tabindex="0">
            <i class="fas fa-info fa-fw"></i>
          </span>
          <span class="layer-title clickable" data-test="mb-lt-layer-title" tabindex="-1"></span>
          <span class="error-icon-wrapper"><i class="fas fa-triangle-exclamation"></i></span>
          <span class="loading-icon-wrapper"><i class="fas fa-spinner fa-spin layertree-spinner"></i></span>
          {% if configuration.menu is defined and configuration.menu %}
            {% block layertree_menu %}
              <span class="layer-menu-btn" tabindex="0"><i class="fas fa-bars"></i></span>
              <div class="layer-menu hidden">
                {% block layertree_menu_close %}
                  <div class="text-end">
                    <span class="exit-button" title="{{ 'mb.core.layertree.tooltip.menu.close'|trans }}"><i class="fa fas fa-xmark"></i></span>
                  </div>
                {% endblock %}
                {% block layertree_menu_opacity %}
                {% if 'opacity' in configuration.menu %}
                    <div class="layer-control-opacity focus-highlight" data-menu-action="opacity">
                      <div class="layer-opacity-bar layer-slider-bar" title="{{ "mb.core.layertree.label.opacity"|trans }}">
                          <div class="layer-opacity-handle layer-slider-handle">100</div>
                      </div>
                </div>
                {% endif %}
                {% endblock %}
                {% block layertree_menu_dimension %}
                {% if 'dimension' in configuration.menu %}
                    <div class="layer-control-dimensions" data-menu-action="dimension">
                        <div class="checkbox"><label><input type="checkbox" title="{{ 'mb.core.layertree.label.dimension_onoff' | trans  }}"/><span class="layer-dimension-title"></span></label></div>
                        <div class="layer-dimension-bar layer-slider-bar" title="{{ "mb.core.layertree.label.dimension" |trans }}">
                          <div class="layer-dimension-handle layer-slider-handle"></div>
                        </div>
                        <input type="text" class="layer-dimension-textfield" name="dimension-extent" title="{{ "mb.core.layertree.label.dimension" |trans }}"/>
                    </div>
                {% endif %}
                {% endblock %}
                {% block layertree_menu_select_style %}
                {% if 'select_style' in configuration.menu %}
                    <div class="layer-styles input-group mb-1" data-menu-action="select_style">
                        <label class="input-group-text">{{ 'mb.core.layertree.label.select_style'|trans }}</label>
                        <select
                            class="select-layer-styles form-select"
                            title="{{ 'mb.core.layertree.label.select_style'|trans }}">
                        </select>
                    </div>
                {% endif %}
                {% endblock %}

                <div class="text-end">
                  {% block layertree_menu_zoomtolayer %}
                  {% if 'zoomtolayer' in configuration.menu %}
                  <span data-menu-action="zoomtolayer" class="layer-zoom fa fas fa-search hover-highlight-effect clickable" tabindex="0" title="{{ 'mb.core.layertree.label.zoomtolayer'|trans }}"></span>
                  {% endif %}
                  {% endblock %}
                  {% block layertree_menu_metadata %}
                  {% if 'metadata' in configuration.menu %}
                  <span data-menu-action="metadata" class="layer-metadata fa far fa-file-alt fa-file-text-o hover-highlight-effect clickable" tabindex="0" title="{{ 'mb.core.layertree.label.metadata'|trans }}"></span>
                  {% endif %}
                  {% endblock %}
                  {% block layertree_menu_layerremove %}
                  {% if 'layerremove' in configuration.menu %}
                  <span data-menu-action="layerremove" class="layer-remove-btn fa fas fa-circle-xmark hover-highlight-effect clickable" tabindex="0" title="{{ 'mb.core.layertree.tooltip.removelayer'|trans }}"></span>
                  {% endif %}
                  {% endblock %}
                  {% block layertree_menu_custom_textend %}
                  {% endblock %}
                </div>
                {% block layertree_menu_custom %}
                {% endblock %}
                </div>
              {% endblock %}
          {% endif %}
        </div>
        <ul class="layers"></ul>
      </li>
  </ul>
