{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="gridsTabs bg-{{ index.index0 }} {{ separation }}">
	<div class="container-fluid p-0">
		{% include 'components/_setHeadTitles' %}
		{% if component.tabs.count() > 0 %}
		    <div class="row">
				<div class="col-md-6 p-relative p-0">
					<section class="nav nav-pills nav-fill" id="v-pills-tab" role="tablist" aria-orientation="horizontal">
						{% for item in component.tabs.all() %}
							<button class="nav-link py-3 {{ loop.first ? 'active' : null }}" id="v-pills-{{ loop.index0 }}-tab" data-bs-toggle="pill" data-bs-target="#v-pills-{{ loop.index0 }}" type="button" role="tab" aria-controls="v-pills-{{ loop.index0 }}" aria-selected="{{ loop.first ? 'true' : 'false' }}">
								<p class="gridsTabs__content--title mb-0">
									{{ item.titleTab|upper }}
								</p>
							</button>
						{% endfor %}
					</section>
				</div>
			</div>
			<div class="row gx-0 gridsTabs__content">
				<div class="col-12 col-lg-12 py-5">
					<section class="h-100 tab-content gridsTabs__body" id="v-pills-tabContent">
						{% set arrtabs = [] %}
						{% for item in component.tabs.all() %}
							<div class="tab-pane fade {{loop.first ? 'show active': null }}" id="v-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__body--part1">
										<section class="col-11 mx-auto py-5 px-lg-5">
											{% if item.itemTitle is not empty %}
											<h3 class="gridsTabs__body--title text-start text-md-center">
												{{ item.itemTitle }}
											</h3>
											{% endif %}
											<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__body--part2">
										<section class="gridsTabs__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
												} only %}
											{% endif %}
										</section>
									</div>
								</section>
							</div>
						{% endfor %}
					</section>
				</div>
			</div>
		{% endif %}
	</div>
	{% include 'quarks/_loadJsComponent' with {
		name:  '_' ~ component.type
	} only %}
</section>