{# Buttons #}
{% set chevronRight = craft.assets()
	.volume('icons')
	.title('Chevron Right')
	.one()
%}

{% set chevronLeft = craft.assets()
	.volume('icons')
	.title('Chevron Left')
	.one()
%}

{# Query entries for slides #}
{% set homePageEntries = craft.entries()
	.type('homePage')
	.one()
%}

<section class="our-process-swiper overflow-x-hidden">
	<div class="swiper-wrapper">
		{% for slide in homePageEntries.ourProcessSlides.all() %}
			{# Use loop index to display slide number #}
			{% set index = loop.index < 10 ? "0#{loop.index}" : loop.index %}

			<div class="swiper-slide bg-raisen-black grid text-white lg:grid-cols-2">
				<div class="inner-container-l flex flex-col justify-center justify-self-center pr-7 py-20 md:py-32 lg:justify-self-start lg:py-0 xxxl:justify-self-center xxxl:px-0">
					<h1 class="font-poppins text-base mb-7 uppercase">Our Process</h1>
					<h2 class="font-poppins text-4xl leading-14 mb-8 min-h-[112px] sm:w-96">
						<strong class="font-semibold">{{ index }}</strong>
						{{ slide.heading }}
					</h2>
					<p class="font-acumin font-light mb-10 min-h-[170px] text-xl sm:w-120">{{ slide.description }}</p>
					<div class="flex items-center space-x-4">
						<button class="our-process-swiper-prev swiper-button bg-phillipine-grey border-2 border-phillipine-grey hover:bg-[#a3a69e] hover:border-[#a3a69e] rounded-full transition-all">
							{{ svg(chevronLeft)|attr({ class: "fill-white" }) }}
						</button>
						<button class="our-process-swiper-next swiper-button bg-phillipine-grey border-2 border-phillipine-grey hover:bg-[#a3a69e] hover:border-[#a3a69e] rounded-full transition-all">
							{{ svg(chevronRight)|attr({ class: "fill-white" }) }}
						</button>
					</div>
				</div>

				{% set image = slide.image.one() %}
				<img class="object-cover max-h-[77rem] w-full" src="{{ image.getUrl() }}" alt="{{ image.altText }}"/>
			</div>
		{% endfor %}
	</div>
</section>