{% load ocyan_thumbnail wagtailcore_tags styling_tags i18n %}
{% if self.layout == "layout1" %}
<section class="carbasa-icons {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container container-fluid-mobile">
		<div class="row justify-content-lg-center css-slider">
			{% for item in self.icons %}
			<div class="col-lg-3 text-center icon-outer">
				{% if item.icon %}
				<span class="icons-wrapper">
					<i class="fa fa-{{ item.icon }}"></i>
					<i class="fa fa-{{ item.icon }}"></i>
				</span>
				{% endif %}
				<h3 class="{% if not item.body %}mb-0{% endif %} mt-3">{{ item.header }}</h3>
				{% if item.body %}<p class="mb-0 small">{{ item.body }}</p>{% endif %}
			</div>
			{% endfor %}
		</div>
	</div>
</section>
{% else %}
<section class="icons_with_text {{ self.layout }} {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			<div class="col-lg-7 me-auto">
				<div class="row css-slider" data-count="{{ self.icons|length }}">
					{% for item in self.icons %}
					<div class="col-lg-6 mb-3">
						{% block icon_body %}
						<{% if item.link %}a href="{{ item.link.get_url }}" {% else %}div {% endif %}class="icon-block{% if item.body %} has_body{% endif %}">
							{% if self.layout == "layout3" %}{% responsive_image item.image.file classes="background-image" %}{% endif %}
							{% if item.icon %}
							<span class="icons-wrapper">
								<i class="fa fa-{{ item.icon }}"></i>
								<i class="fa fa-{{ item.icon }}"></i>
							</span>
							{% endif %}
							{% if item.header %}
							<span class="info-wrapper{% if item.body %} has-body{% endif %}">
								<h4 class="{% if not item.body %}mb-0{% endif %}">{{ item.header }}</h4>
								{% if item.body and not self.layout == "layout3" %}<p class="mb-0">{{ item.body }}</p>{% endif %}
								{% if self.layout == "layout2" or self.layout == "layout1" %}{% responsive_image item.image.file classes="br-0 img-fluid mt-3" %}{% endif %}
							</span>
							{% endif %}
						</{% if item.link %}a{% else %}div{% endif %}>
						{% endblock %}
					</div>
					{% endfor %}
				</div>
			</div>
			<div class="col-lg-4">
				<div class="lead-wrapper">
					{{ self.body|richtext }}
					<div class="buttons-wrapper">
						{% include "coyote/blocks/partials/button.html" with button=self.button %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
{% endif %}