{% include 'quarks/_loadCssComponent' with {
  name: '_' ~ component.type
} only %}
<section {{ dataComponent }}
  id="{{ id }}"
  class="gridsTabs_vertical bg-{{ index.index0 }} {{ separation }}">
  <div class="container-fluid px-lg-0">
    {% include 'components/_setHeadTitles' %}

    {% if component.tabs.count() > 0 %}
      <section class="row gx-0 gridsTabs_vertical__content">
        <div class="col-lg-3">
          <section class="nav nav-fill nav-pills"
            id="v-pills-tab"
            role="tablist"
            aria-orientation="vertical">
            {% for item in component.tabs.all() %}
              <button class="nav-link {{ loop.first ? 'active' : null }}"
                id="v-pills-{{ loop.index0 }}-tab"
                data-bs-toggle="pill"
                data-bs-target="#vh-pills-{{ loop.index0 }}"
                type="button"
                role="tab"
                aria-controls="v-pills-{{ loop.index0 }}"
                aria-selected="{{ loop.first ? 'true' : 'false' }}">
                <div class="gridsTabs_vertical__content--itemTitle">
                  <p class="gridsTabs_vertical__content--title col-lg-10 mb-0">
                    {{ item.titleTab }}
                  </p>
                </div>
              </button>
            {% endfor %}
          </section>
        </div>
        <div class="col-12 col-lg-9">
          <section class="h-100 tab-content gridsTabs_vertical__body"
            id="v-pills-tabContent">
            {% for item in component.tabs.all() %}
              <div class=" h-100 tab-pane fade {{
                loop.first
                  ? 'show active'
                  : null
                }}"
                id="vh-pills-{{ loop.index0 }}"
                role="tabpanel"
                aria-labelledby="v-pills-{{ loop.index0 }}-tab">
                <section class="row gx-0 h-100">
                  <div class="col-12 col-lg-6 gridsTabs_vertical__body--part1">
                    <section class="col-11 mx-auto py-5">
                      <h4 class="gridsTabs_vertical__body--title text-start text-md-center">
                        {{ item.itemTitle }}
                      </h4>
                      <div class="descriptionList text-start">
                        {{ item.description }}
                      </div>
                      {% if
                        item.linkItem is not empty
                          and item.linkItem.customText is not empty %}
                        {% include 'components/_btnArrow' with {
                          btn: item.linkItem,
                          classCustom: 'justify-content-lg-start',
                          Highlight: true
                        } only %}
                      {% endif %}
                    </section>
                  </div>
                  <div class="col-12 col-lg-6 d-none d-lg-block gridsTabs_vertical__body--part2">
                    <section class="gridsTabs_vertical__body--contentImg h-100 w-100">
                      {% set img = item.image[0] ?? null %}
                      {% if img %}
                        {% include 'components/_imageTransformsSimple' with {
                          img: img,
                          setClass: 'img-absolute',
                          alt: component.itemTitle,
                          transforms: {
                            '(min-width: 1197px)': {
                              width: 900,
                              height: 900
                            },
                            '(min-width: 1196px)': {
                              width: 700,
                              height: 700
                            },
                            '(min-width: 695px)': {
                              width: 500,
                              height: 500
                            }
                          },
                          default: {
                            width: 1200,
                            height: 1200
                          }
                        } only %}
                      {% endif %}
                    </section>
                  </div>
                </section>
              </div>
            {% endfor %}
          </section>
        </div>
      </section>
    {% endif %}
  </div>
</section>