{% load wagtailcore_tags ocyan_thumbnail %}
<section class="categories-block {{ self.layout }} {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		{% if self.header %}
		<div class="row mb-5">
			<div class="col-lg-6 text-start">
				{% if self.tagline %}<span class="badge bg-primary mb-2">{{ self.tagline }}</span>{% endif %}
				<h2 class="mb-0">{{self.header}}</h2>
			</div>
			<div class="col-lg-6 d-flex">
				{% if self.buttons %}
				<div class="buttons-wrapper justify-content-lg-end d-flex mt-lg-auto mt-3 ms-lg-auto">
					{% for button in self.buttons %}
						{% include "coyote/blocks/partials/button.html" with button=button %}
					{% endfor %}
				</div>
				{% endif %}
			</div>
		</div>
		{% endif %}
		<div class="category-slider-wrapper">
		{% for cat in self.categories %}
    			<div>
    				<a href="{% if cat.page_link %}{{ cat.page_link.get_url }}{% else %}{{cat.category.get_absolute_url}}{% endif %}" class="cat" title="Category block with descriptive image and link that leads to the category">
    					{% responsive_image cat.image.file %}
						{% if cat.label or cat.category.name %}
    					<div class="cat-name">
    						{% if cat.label %}
    						{{ cat.label }}
    						{% else %}
    						{{ cat.category.name }}
    						{% endif %}
    					</div>
    					{% endif %}
    				</a>
    			</div>
		{% endfor %}
		</div>
	</div>
</section>