{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{id}}" class="container circleFigure bg-{{ index.index0 }} {{ separation }}">
    <div class="row justify-content-center">
        <div class="col-md-11">
            <div class="circleFigure__circle">
                {% set imageshex = ''%}
                {% set arrtooltips = {} %}
                {% for h in component.hexagons.all %}
                    {% set id = 'img-hex' ~ loop.index0 %}
                    {% set icon = h.icon.one %}
                    {% set imageshex = imageshex  ~ '<pattern preserveAspectRatio="none" id="' ~ id ~ '" x="0" y="0" width="1" height="1">' ~ svg(icon)|raw ~'</pattern>' %}
                    {% if h.text is not empty %}
                    {% set  arrtooltips =  arrtooltips|merge({('class="s' ~ loop.index0 ~ '"'): 'class="s' ~ loop.index0 ~ ' tooltips_circle" data-info="' ~ (h.text ?? '') ~ '"'})%}
                    {% endif %}
                {% endfor %}
           
                {{svg('@webroot/assets/img/drive-path.svg')|replace(arrtooltips)|append(imageshex)}}
            </div>
        </div>
    </div>
    {% css %}
    {% for h in component.hexagons.all %}
        #hex-{{loop.index0}}{
          fill: url('#img-hex{{loop.index0}}'); 
          stroke-width: 0;
          cursor:pointer;
        }
    {% endfor %}
   {% endcss %}
</section>
{% include 'quarks/_loadJsComponent' with {
    name:  '_' ~ component.type
  } only %}