{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type 
} only %}
<section {{ dataComponent }} id="{{ id }}" class="bg-{{ index.index0 }} hexagonFigure {{ separation }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %} 
        {% 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 id="' ~ id ~ '" x="0" y="0" width="1" height="1"><image xlink:href="'~ icon.url ~ '" x="0" y="0" width="'~(icon.getWidth() - 2) ~ '" height="'~(icon.getHeight() - 2)~'" /></pattern>' %}
            {% if h.text is not empty %}
            {% set  arrtooltips =  arrtooltips|merge({('class="s' ~ loop.index0 ~ '"'): 'class="s' ~ loop.index0 ~ ' tooltips_hex" data-info="' ~ (h.text ?? '') ~ '"'})%}
            {% endif %}
        {% endfor %}
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="hexagonFigure__description w-100">
                    {{component.description}}
                </div>
            </div>
        </div>
		<div class="row">
            <div class="col-md-12 p-md-5">
                <div class="hexagonFigure_container">
                    {{svg('@webroot/assets/img/hexagon-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:none;
                  cursor:pointer;
                }
            {% endfor %}
        {% endcss %}
	</div>
    {% include 'quarks/_loadJsComponent' with {
        name:  '_' ~ component.type
      } only %}
</section>