<div{{ attributes.addClass(component_wrapper_class) }}>

  {{ title_prefix }}
  {% if component_wrapper.display_title.value == 1 %}
    {% if label %}
      <h2{{ title_attributes.addClass('title') }}>{{ label }}</h2>
    {% endif %}
  {% endif %}
  {{ title_suffix }}

  {% if header is not empty %}
    <div class="component-wrapper--header">
      {{ header }}
    </div>
  {% endif %}

  <div{{ content_attributes.addClass('component-wrapper--content') }}>
    <div class="circular-tabs-content">
{#      {{ content|without('title') }}#}
      {% set temp_big_content = 0 %}
      {% for key,item in items %}
        {% if item["is_inside"] == 0 %}
          {% if temp_big_content == 0 %}
            <div id="circular-tab-content--{{ component_wrapper.id + temp_big_content }}" class="circular-tab-content circular-tabs-content-id--{{ component_wrapper.id }}">
              {{ content.field_circular_tabs[key] }}
            </div>
          {% else %}
            <div id="circular-tab-content--{{ component_wrapper.id + temp_big_content }}" class="circular-tab-content circular-tabs-content-id--{{ component_wrapper.id }}" style="display:none">
              {{ content.field_circular_tabs[key] }}
            </div>
          {% endif %}
          {% set temp_big_content = temp_big_content + 1 %}
        {% endif %}
      {% endfor %}

      {% set temp_small_content = 0 %}
      {% for key,item in items %}
        {% if item["is_inside"] == 1 %}
          <div id="circular-tab-content--{{ component_wrapper.id + temp_small_content + items|length }}" class="circular-tab-content circular-tabs-content-id--{{ component_wrapper.id }}" style="display:none">
            {{ content.field_circular_tabs[key] }}
          </div>
          {% set temp_small_content = temp_small_content + 1 %}
        {% endif %}
      {% endfor %}
    </div>

    <div class="draw-circular-menu" id="{{ component_wrapper.id }}">
      {% set temp_big = 0 %}
      {% for key,item in items %}
        {% if item["is_inside"] == 0 %}
          <div class="circular-menu-item big-item big-menu-item-{{ temp_big }}-wrapper">
            {% if temp_big == 0 %}
              <button class="circular-tab-button circular-tab--{{ component_wrapper.id + temp_big }} active">{{ item["field_title_tab_content"] }}</button>
            {% else %}
              <button class="circular-tab-button circular-tab--{{ component_wrapper.id + temp_big }}">{{ item["field_title_tab_content"] }}</button>
            {% endif %}
          </div>
          {% set temp_big = temp_big + 1 %}
        {% endif %}
      {% endfor %}

      {% set temp_small = 0 %}
      {% for key,item in items %}
        {% if item["is_inside"] == 1 %}
          <div class="circular-menu-item small-item small-menu-item-{{ temp_small }}-wrapper">
            <button class="circular-tab-button circular-tab--{{ component_wrapper.id + temp_small + items|length }}">{{ item["field_title_tab_content"] }}</button>
          </div>
          {% set temp_small = temp_small + 1 %}
        {% endif %}
      {% endfor %}
    </div>
  </div>

  {% if footer is not empty %}
    <div class="component-wrapper--footer">
      {{ footer }}
    </div>
  {% endif %}

</div>
