{% extends "base.twig" %}

{% block content %}

{% if fields.turn_off_intro_section == false %}

	<section class="project-view-section">
		<div class="row">
			<div class="col-md-6 col-xl-7">
				{% if post.thumbnail %}
					<div class="project-view-section__img">
						<img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}">
					</div>
				{% endif %}
			</div>

			<div class="col-md-6 col-xl-5 col-xxl-4 d-flex align-center">
				<div class="project-view-section__content">
					{% if post.post_title %}
						<h1 class="h3 project-view-section__content-title">{{ post.post_title }}</h1>
					{% endif %}
					<div class="project-view-section__content-text">
						{% if fields.turn_off_intro_section == false and fields.use_custom_content %}
							{{ fields.custom_content }}
						{% else %}
							{{ post.post_content }}
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</section>

{% endif %}

{% if fields.sections %}
	{% for project in fields.sections %}

	{% set box_container = project.image_size == 'full' ? '' : 'container-fluid' %}
	{% set box_col_img = project.image_size == 'full' ? 'col-md-6 col-xl-7' : 'col-md-6 col-xl-5' %}
	{% set box_col_content = project.image_size == 'full' ? 'col-md-6 col-xl-5 col-xxl-4' : 'col-md-6 col-xl-5 col-xxl-5' %}
	{% set box_center = project.image_size == 'full' ? '' : 'justify-center' %}
	{% set image_position = project.image_position == 'right' ? 'row-reverse' : '' %}

	{% if project.image_size == 'inset' %}
		{% set box_container = 'container-fluid' %}
		{% set box_center = '' %}
		{% set box_col_img = 'col-xl-6 insert-position d-flex align-center' %}
		{% set box_col_content = 'col-xl-8 offset-xl-1 col-xxl-6 offset-xxl-1' %}
		{% set image_position = 'row-reverse' %}
	{% endif %}

	{% if not project.image %}
		{% set box_col_content = 'col-md-8 col-xl-7 col-xxl-7' %}
	{% endif %}

	<section class="project-view-section {{ project.has_green_background and project.image_size != 'inset' ? 'project-view-section-bg' : '' }} {{ project.image_size == 'inset' ? 'inset' : '' }}">
		<div class="{{ project.image_size == 'inset' ? 'container-fluid' : box_container }}">
			<div class="row {{ project.image_size == 'inset' ? '' : box_center }} {{ image_position }}">
				{# If video code is set, we show the video player (even if Image is set) #}
				{% if project.video_code %}
				<div class="{{ box_col_img }}">
					<div
						class="project-view-section__img"
						data-video-id="{{ project.video_code }}"
					>
						<div class="project-view-section__video-container">
							<img
							src="{{ function('get_youtube_thumbnail', project.video_code) }}"
							alt="{{ project.content_title }} video thumbnail"
							class="project-view-section__video-thumbnail"
							/>
							<div class="project-view-section__video-overlay"></div>
							<button
								type="button"
								class="project-view-section__play-button"
							>
								<img src="{{ function("get_frontend_static_asset", "assets/images/play-button-icon.svg") }}" alt="{{ project.content_title }} play video icon">
								<span class="">
									Play video
								</span>
							</button>
						</div>
					</div>       
				</div>  
				{% elseif project.image %}
					<div class="{{ box_col_img }}">
						<div class="project-view-section__img">
							<img src="{{ images[loop.index0].src }}" alt="{{ images[loop.index0].alt }}">
						</div>
					</div>
				{% endif %}

				<div class="{{ box_col_content }} {{ project.has_green_background and project.image_size == 'inset' ? 'project-view-section-bg' : '' }} d-flex align-center">
					<div class="project-view-section__content">
						{% if project.content_title %}
							<h4 class="project-view-section__content-title {{ loop.index0 == 0 ? "h3" : "" }}">{{ project.content_title }}</h4>
						{% endif %}
						<div class="project-view-section__content-text">
							{{ project.content }}
						</div>
						{% if project.video_button_text and project.video_code %}
							<span class="project-view-section__content-button journeys-video__video" data-video-code="{{ project.video_code }}" data-play-video>{{ project.video_button_text }} <img src="{{ function('get_frontend_static_asset', 'assets/images/play.svg') }}" alt="{{ t('Icon play') }}"></span>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</section>

	{% if project.video_code %}

	<div class="video-modal" id="video-modal">
		<span class="close-btn">
				<img src="{{ function('get_frontend_static_asset', 'assets/icons/close-button.svg') }}" alt="{{ t('close') }}"/>
		</span>
		<div class="modal"></div>
	</div>

	{% endif %}

	{% endfor %}
{% endif %}

<section class="small-projects-related light-border-top">
	<div class="container-fluid">
		<div class="row justify-center">
			<div class="col-12 col-xl-10 col-l-8 small-projects-related__wrap">
				<h3 class="t-700">{{ t('Read next') }}</h3>
				{% if related_projects %}
				<div class="small-projects-related__projects">
					{% for related in related_projects %}
						{% include 'templates/partials/small-project-card.twig' with {'project': related, 'image': related_images[loop.index0]} %}
					{% endfor %}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</section>

{% endblock %}