{% set nav_component_item_header_id = 'nav-component-item-header--' ~ component_item.id %}
{% set classes = ['component', 'navigation-component-item'] %}
<div id="{{ nav_component_item_header_id }}" {{ attributes.addClass(component_wrapper_class) }}>
  <div{{ content_attributes.addClass('component-item--content') }}>
    <div class="component-statistic-bar--first">
      {{ title_prefix }}
      {% if label %}
        <h2{{ title_attributes.addClass('title') }}>{{ label }}</h2>
      {% endif %}
      {{ title_suffix }}
      {{ content.field_content_statistic_bar }}
    </div>
    <div class="component-statistic-bar--second">
      {% set items = statistic_bar.field_statistic_bar_progress %}
      {% for item in items %}
        {% set title = item.entity.title.value %}
        {% set process = item.entity.field_process.value %}
        <div class="component-statistic-bar--title">
          <h3>{{ title }}</h3>
          <h3>{{ process }}%</h3>
        </div>
        <div id="component-statistic-bar--progress">
{#          background-color: {{color}};#}
          {% set color_field = item.entity.field_sbp_color.value %}
          {% for color in color_field %}
            {% if color.color is not empty %}
{#              opacity: {{ color.opacity }};#}
{#              '#'~#}
              <div id="component-statistic-bar--bar" style ="background-color: {{ color.color }}; width: {{process}}% "></div>
            {% endif %}
            {% if color.color is empty %}
              <div id="component-statistic-bar--bar" style = "background-color: {{ "#fff" }}; width: {{process}}% "></div>
            {% endif %}
          {% endfor%}
        </div>
      {% endfor %}
    </div>
  </div>
</div>