{% spaceless %}
<div id="{{ id }}" class="mb-element mb-element-zoombar {{configuration.anchor}}">
    {% if configuration.draggable is defined and configuration.draggable %}
      <div class="move-icon-wrap">
          <span class="iconMove"></span>
      </div>
    {% endif %}
  {% if 'pan' in configuration.components %}
  <div class="pan">
    <span class="panUp iconTop" title="{{ "mb.core.zoombar.panup" | trans }}"></span>
    <span class="panRight iconRight" title="{{ "mb.core.zoombar.panright" | trans }}"></span>
    <span class="panDown iconDown" title="{{ "mb.core.zoombar.pandown" | trans }}"></span>
    <span class="panLeft iconLeft" title="{{ "mb.core.zoombar.panleft" | trans }}"></span>
  </div>
  {% endif %}
  <ul class="toolPane">
    {% if 'history' in configuration.components %}
      <li class="history">
        <span class="historyPrev iconPrev" title="{{ "mb.core.zoombar.goback" | trans }}"></span>
        <span class="historyNext iconNext" title="{{ "mb.core.zoombar.goforward" | trans }}"></span>
      </li>
    {% endif %}
    {% if 'zoom_box' in configuration.components %}
      <li class="zoomBox">
        <span class="iconZoomSelect iconBig" title="{{ "mb.core.zoombar.zoombybox" | trans }}"></span>
      </li>
    {% endif %}
    {% if 'zoom_max' in configuration.components %}
      <li class="zoomWorld">
        <span class="iconZoomMin iconBig" title="{{ "mb.core.zoombar.zoombyworld" | trans }}"></span>
      </li>
    {% endif %}
    {% if 'zoom_in_out' in configuration.components or 'zoom_slider' in configuration.components %}
      <li class="zoomSlider">
        {% if 'zoom_in_out' in configuration.components %}
        <div class="iconZoomIn iconBig" title="{{ "mb.core.zoombar.zoomin" | trans }}"></div>
        {% endif %}
        {% if 'zoom_slider' in configuration.components %}
        <ul class="zoomSliderLevels"></ul>
        {% endif %}
        {% if 'zoom_in_out' in configuration.components %}
        <div class="iconZoomOut iconBig" title="{{ "mb.core.zoombar.zoomout" | trans }}"></div>
        {% endif %}
      </li>
    {% endif %}
  </ul>
</div>
{% endspaceless %}
