{% load ocyan_thumbnail wagtailcore_tags styling_tags %}
{% if self.layout == "layout1" %}
<section class="hero content layout1">
	<div class="container">
		<div class="row">
			<div class="hero-lead col-lg-5 ms-auto">
				<div class="hero-lead-inner">
					{{ self.body|richtext }}
					{% if self.buttons %}
					<div class="buttons-wrapper gap-3 d-flex mt-5">
						{% for button in self.buttons %}
							{% include "coyote/blocks/partials/button.html" %}
						{% endfor %}
					</div>
					{% endif %}
				</div>
			</div>
			<div class="col-lg-7 ps-lg-5">
				<div class="row outer-images">
					<div class="col-lg-6 pe-4">
						{% responsive_image self.image.file alt=self.image.title classes="h-80 img-fluid" %}
					</div>
					<div class="col-lg-6 ps-4">
						{% responsive_image self.secondairy_image.file alt=self.image.title %}
						<a href="{{ self.go_to_link }}" class="d-block pt-4" title="Go to the category page">{{ self.go_to_text|default:"Bekijk de volledige collectie" }}<i class="fa fa-arrow-right ms-2 "></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
{% elif self.layout == "layout2" %}
<section class="hero content layout2{% block animations %} animations{% endblock %}">
	<div class="image-wrapper primary">{% responsive_image self.image.file alt=self.image.title %}</div>
	<div class="image-wrapper secondary">{% responsive_image self.secondairy_image.file alt=self.image.title %}</div>
	<div class="image-wrapper tertiary">{% responsive_image self.tertiary_image.file alt=self.image.title %}</div>
	<div class="container">
		<div class="row">
			<div class="hero-lead col-lg-5 ms-auto">
				<div class="hero-lead-inner">
					{{ self.body|richtext }}
					{% if self.buttons %}
					<div class="buttons-wrapper gap-3 d-flex mt-5">
						{% for button in self.buttons %}
							{% include "coyote/blocks/partials/button.html" %}
						{% endfor %}
					</div>
					{% endif %}
				</div>
			</div>
			<div class="col-lg-3"></div>
		</div>
	</div>
</section>
{% endif %}