{% extends "layouts/base.twig" %}

{% set caseStudiesListing = craft.entries()
	.section('caseStudiesListing')
	.one()
%}

{% block content %}
	<div class="bg-cultured">

		<section class="outer-container">
			<div class="inner-container flex flex-col">
				<h1 class="heading-0 my-12 md:my-16 lg:mt-32 lg:mb-36">{{ caseStudiesListing.pageTitle }}</h1>

				{% set featureImage = caseStudiesListing.featureImage.one() %}
				<img class="mb-36" src="{{ featureImage.getUrl() }} " alt="{{ featureImage.altText }}">
			</div>
		</section>

		{# Main Article #}
		<section class="outer-container">
			<div class="inner-container flex flex-col items-center mb-36">
				<article class="lg:mb-24 xl:mb-36">
					<h1 class="heading-1 mb-12">{{ entry.articleTitle }}</h1>

					<div class="grid gap-x-20 gap-y-6 mb-28 lg:grid-cols-2 lg:gap-y-16">
						{% for block in entry.twoColumnArticle.all() %}
							{% if block.type == "text" %}
								{# Render text for each column #}
								<div class="flex flex-col gap-6">
									{{ block.leftAlignText }}
								</div>
								<div class="flex flex-col gap-6">
									{{ block.rightAlignText }}
								</div>
							{% elseif block.type == "images" %}
								{# Render images #}
								{% for image in block.images.all() %}
									<figure>
										<img class="xl:pt-24" src="{{ image.getUrl() }}" alt="{{ image.altText }}">
									</figure>
								{% endfor %}
							{% endif %}
						{% endfor %}

					</div>

					{# Subarticles #}
					<div class="last:border-b last:border-timber-wolf" data-accordion="collapse" data-active-classes="bg-cultured border-t-2 border-spicy-mix open">
						{% for article in entry.subarticles.all() %}
							{# TODO: Extract accordion into reuseable component #}
							{% set plusIcon = craft.assets()
								.volume('icons')
								.title('Plus Solid')
								.one()
							%}

							{% set minusIcon = craft.assets()
								.volume('icons')
								.title('Minus Solid')
								.one()
							%}

							<div>
								<button type="button" class="accordion-button border-t border-timber-wolf flex group justify-between pt-10 text-left w-full" data-accordion-target="#accordion-collapse-body-{{ loop.index }}" aria-expanded="false" aria-controls="accordion-collapse-body-{{ loop.index }}">
									<h2 class="font-poppins text-xl text-spicy-mix mb-11">{{ article.heading }}</h2>
									<span class="relative h-7 w-7">
										{{ svg(plusIcon)|attr({ class:"plus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
										{{ svg(minusIcon)|attr({ class:"minus-icon absolute fill-spicy-mix-tint group-hover:fill-spicy-mix h-7" }) }}
									</span>
								</button>
								<div class="hidden mb-14 redactor" id="accordion-collapse-body-{{ loop.index }}">
									{{ article.body }}
								</div>
							</div>
						{% endfor %}
					</div>

				</article>
			</div>
		</section>

		{# ---------- Case Studies List ---------- #}

		{# Query Case Studies #}
		{% set caseStudies = craft.entries()
			.section('caseStudies')
			.all()
		%}

		{# Preview Image Cropping #}
		{% set previewImageCrop = {
			mode: 'crop',
			width: 465,
			height: 620,
			quality: 100
		} %}

		<section class="outer-container" id="case-studies-listing">
			<div class="inner-container flex flex-col mb-20 xl:mx-auto xl:mb-72">

				<h1 class="font-poppins text-base mb-4 uppercase">Case Studies</h1>
				<h2 class="heading-1 mb-24 w-80 lg:mb-16">View All Case Studies</h2>

				{# Case Studies Listing #}
				<div class="flex flex-col gap-28 lg:gap-56">
					{% for case in caseStudies %}
						{# Create HTML for case title #}
						{% set caseTitleHtml = 
						"<div class=\"group\">
							<span class=\"block text-poppins text-base uppercase mb-6\">View Project</span>
							<h1 class=\"heading-0 group-hover:text-spicy-mix transition-all\">#{case.title}</h1>
						</div>"
					%}

						{# Create HTML element for case preview image #}
						{% set previewImage = case.previewImage.one() %}
						{% set casePreviewImageHtml = 
						"<div class=\"group overflow-hidden\">
							<img class=\"group-hover:scale-105 transition-all\" src=\"#{previewImage.getUrl(previewImageCrop)}\" alt=\"#{previewImage.altText}\">
						</div>"
					%}

						<a href="{{ url('case-studies/' ~ case.slug) }}">
							<div class="group grid gap-x-16 gap-y-28 items-end md:grid-cols-2 lg:gap-y-56">
								<div class="hidden justify-self-start md:block">
									{% if loop.index is odd %}
										{{ caseTitleHtml|raw }}
									{% else %}
										{{ casePreviewImageHtml|raw }}
									{% endif %}
								</div>
								{# Alternate side each element is rendered based on loop count #}
								<div class="hidden justify-self-end md:block">
									{% if loop.index is odd %}
										{{ casePreviewImageHtml|raw }}
									{% else %}
										{{ caseTitleHtml|raw }}
									{% endif %}
								</div>

								<!-- Mobile Layout -->
								<div class="flex flex-col gap-10 justify-self-center md:hidden">
									{{ casePreviewImageHtml|raw }}
									{{ caseTitleHtml|raw }}
								</div>
							</div>
						</a>
					{% endfor %}
				</div>
			</div>
		</section>

		{% include "partials/pageSections/_contactUsBanner" %}
	</div>
{% endblock %}