{% if component.allOds is same as(true) %}
    {% set ods_entries = craft.entries.section('odssEntries').all() %}
{% else %}
    {% set ods_entries = component.odsEntries %}
{% endif %}
{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}

<section {{ dataComponent }} id="{{ id }}" class="container slideofODS bg-{{ index.index0 }} {{ separation }}" data-slider="{{ods_entries|length}}">
    <div class="row justify-content-center">
        <div class="col-md-12 text-center text-md-{{component.alignText}}">
            <h2 class="slideofODS_title">{{component.blockTitle}}</h2>
            <p class="slideofODS_subtitle">{{component.subtitle}}</p>
        </div>
        {% if not component.fieldLinkCustomText.isEmpty() %}
			<div class="col-md-12 text-center text-md-{{component.alignText}}">
				{% include 'components/_btnArrow' with {
          btn: component.fieldLinkCustomText,
          parentClass: 'd-inline-block',
		  classCustom: 'btn_pink'
        } only %}
			</div>
		{% endif %}
    </div>
    <div class="row justify-content-center py-4">
        <div class="{{ods_entries|length > 4 ? 'col-md-12':'col-md-10  col-xl-9'}}  slideofODS_top">
            <div class="swiper slideofODS_tumbs pb-5">
                <div class="swiper-wrapper">
                  <!-- Slides -->
                  {% for el in ods_entries %} 
                  <div class="swiper-slide" style="--color:{{el.fieldColor}}">
                    {% set img = el.image[0] ?? null %}
                    {% if img is not empty %}
                       <img data-src="{{img.url}}" src="{{img.url}}" alt="{{img.title}}" loading="lazy" class="lazyload slideofODS_tumbs__img">
                    {% endif %}
                  </div>
                  {% endfor %}
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    <div class="row py-4 px-xxl-4">
        <div class="col-md-12  slideofODS_bottom">
            <div class="swiper slideofODS_mainslide" data-slider="{{ods_entries|length }}">
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    {% for el in ods_entries %}
                    <div class="swiper-slide">
                        <div class="slideofODS_mainslidecard">
                            <div class="slideofODS_mainslidecard__content-img">
                                {% set imgods = el.fieldImage[0] ?? null %}
                                    {% if imgods %}
                                        {% include 'components/_imageTransformsSimple' with {
                                        img: imgods,
                                        setClass: 'slideofODS_mainslidecard__img',
                                        alt: el.title,
                                        transforms: {
                                            '(min-width: 1197px)': {
                                            width: 750
                                            },
                                            '(min-width: 1196px)': {
                                            width: 500,
                                            height: 1300
                                            },
                                            '(min-width: 695px)': {
                                            width: 710
                                            }
                                        },
                                        default: {
                                            width: 560
                                        }
                                        } only %}
                                {% endif %}
                            </div>
                            <div class="slideofODS_mainslidecard__content-info">  
                                <h3 class="slideofODS_mainslidecard__title" style="--color:{{el.fieldColor}}">{{el.subtitle}}</h3>
                                <div class="slideofODS_mainslidecard__content">
                                    {{el.description}}
                                </div>

                            </div>
                        </div>

                    </div>
                    {% endfor %}
                  </div>
                  <!-- If we need pagination -->
                  <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    {% include 'quarks/_loadJsComponent' with {
        name:  '_' ~ component.type
      } only %} 
</section>