{# HACK mode on: define rotation icons as inlined svgs #}
{# predefine a block without initially rendering it; see https://stackoverflow.com/a/30080005 #}
{% if false %}
    {% block quarter_circle_arrow_svg %}
    <svg viewBox="0 40 70 200"><g><path
         d="M67.41,62.55L58.02,53c-26.94,26.47-41.77,61.84-41.77,99.6c0,11.12,1.58,27.16,5.94,40.14
            c-5.66,3.35-10.12,5.99-11,6.51c-2.06,1.22-4.12,2.43-6.26,3.7c17.87,12.64,35.65,25.22,53.62,37.94
            c-2.49-21.85-4.96-43.47-7.45-65.25c-2.02,1.2-9.28,5.49-17.07,10.1c-2.74-9.4-4.39-21.59-4.39-33.13
            C29.64,118.46,43.05,86.48,67.41,62.55z"/></g></svg>
    {% endblock %}
{% endif %}
{% 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 component">
          <span class="iconMove"></span>
      </div>
    {% endif %}
{%- if 'rotation' in configuration.components -%}
    <div class="component">
      <div class="rotation toolBarColors">
        <span class="rotate-cw toolbar-button-hover-effect clickable" data-degrees="45">{{ block('quarter_circle_arrow_svg') }}</span>
        <span class="reset-rotation toolbar-button-hover-effect clickable" data-rotation-bias="-45"><i class="fa fa-location-arrow default-rotate-left-45"></i></span>
        <span class="rotate-ccw toolbar-button-hover-effect clickable" data-degrees="-45">{{ block('quarter_circle_arrow_svg') }}</span>
      </div>
    </div>
{%- endif -%}
    <div class="component">
  <ul class="toolPane toolBarColors">
    {% if 'zoom_max' in configuration.components %}
      <li class="zoom-world clickable toolbar-button-hover-effect" title="{{ "mb.core.zoombar.zoombyworld" | trans }}">
        <i class="fa fa-globe fas fa-globe-americas"></i>
      </li>
    {% endif %}
    {%- if 'zoom_home' in configuration.components -%}
        <li class="clickable toolbar-button-hover-effect -fn-zoom-home" title="{{ "mb.core.zoombar.zoom_home" | trans }}">
          <i class="fa fas fa-home"></i>
        </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="zoom-in clickable toolbar-button-hover-effect" title="{{ "mb.core.zoombar.zoomin" | trans }}"><i class="fa far fa-plus-square fa-plus-square-o"></i></div>
        {% endif %}
        {% if 'zoom_slider' in configuration.components and zoom_levels is not empty %}
        <ul class="zoomSliderLevels list-unstyled">
            {%- for _level, _scale in zoom_levels -%}
            {%- if not loop.first -%}
            <li class="zoom-level-gap"><i class="fa fas fa-ellipsis-v"></i></li>
            {%- endif -%}
            <li class="iconZoomLevel clickable toolbar-button-hover-effect" title="1:{{ _scale }}" data-zoom="{{ _level }}"></li>
            {%- endfor -%}
        </ul>
        {% endif %}
        {% if 'zoom_in_out' in configuration.components %}
        <div class="zoom-out clickable toolbar-button-hover-effect" title="{{ "mb.core.zoombar.zoomout" | trans }}"><i class="fa far fa-minus-square fa-minus-square-o"></i></div>
        {% endif %}
      </li>
    {% endif %}
  </ul>
    </div>
</div>
{% endspaceless %}
