{% load wagtailcore_tags ocyan_thumbnail i18n coyote_tags %}
<section class="coyote-category-block {{ self.layout }} {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			<div class="col-lg-5 me-auto pe-lg-5 block-lead{% if self.body %} mb-5{% endif %}">
				{{ self.body|richtext }}
				{% if self.layout == 'layout2' and self.read_more_button %}
					<a class="btn btn-primary btn-lg mt-3" href="{{ self.read_more_link }}">{{ self.read_more_button }}</a>
				{% endif %}
			</div>
			{% if self.layout == 'layout1' %}
			<div class="col-lg-7 coyote-slider">
				<div class="coyote-category-block-slider">
					{% for cat in self.categories %}
						{% if cat.category is not None %}
							<div class="category-wrapper">
								<div class="category-inner">
									<div class="d-flex mb-3">
										<i class="fa fa-{{ cat.icon }} me-2 mt-1"></i>
										<div>
											<h5 class="mb-0 category-title"><a href="{{cat.category.get_absolute_url}}">{{ cat.category.name }}</a></h5>
											<small class="text-muted">{{ cat.category.product_set.all|length }} {% trans "Products" %}</small>
										</div>
									</div>
									<div class="products-wrapper">
										{% for prod in cat.category.product_set.all|slice:2 %}
											<a class="product-wrapper d-block {% if not forloop.last %}mb-3{% endif %}" href="{{ prod.url }}">
												<div class="row">
													<div class="col-lg-5 col-4">
														{% if prod.primary_image %}
														{% picture prod.primary_image.original "150x150" upscale=False alt=prod.get_title %}
														{% endif %}
													</div>
													<div class="col-lg-7 col-8">
														{{ prod.get_title }}
														{% render_optional_template "oscar/catalogue/partials/stock_record.html" product=prod %}
													</div>
												</div>
											</a>
										{% endfor %}
									</div>
								</div>
							</div>
						{% endif %}
					{% endfor %}
				</div>
			</div>
			{% elif self.layout == 'layout2' %}
			<div class="col-lg-7">
				<div class="row gy-3">
				{% for cat in self.categories %}
					{% if cat.category is not None %}
						<div class="col-lg-4">
							<a href="{{cat.category.get_absolute_url}}" class="category-block shadow">
								{% if cat.category.image %}
									{% lazy_responsive_image cat.category.image.file alt=cat.category.name %}
								{% endif %}
								<div class="bottom-wrapper">
									<h5 class="mb-0 category-title">{{ cat.category.name }}</h5>
								</div>
							</a>
						</div>
					{% endif %}
				{% endfor %}
				</div>
			</div>
			{% endif %}
		</div>
	</div>
</section>