{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/back-button.njk" as backButton %}
{% import "components/icon.njk" as icon %}
{% import "components/nav-button.njk" as navButton %}
{% import "components/button.njk" as button %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<div class="bp-c-image-carousel {{classes}}">
		<ul class="bp-c-image-carousel__list">
			{% for item in data.items %}
				{% set ext = item.extension %}
				{% set isImage = ext === "jpg" or ext === "png" or ext === "svg" %}

				{% if isImage %}
					<li class="bp-c-image-carousel__item">
						<div class="bp-c-image-carousel__header">
							<h2 class="bp-c-image-carousel__title">{{item.name}}</h2>

							{{button.link("bp-c-image-carousel__action bp-c-button--outline", {
								text: "Downloaden",
								iconAfter: "download",
								url: item.path
							})}}
						</div>

						<div class="bp-c-image-carousel__image">
							<img class="bp-c-image-carousel__visual" src="{{item.path}}" alt="{{item.name}}" title="{{item.name}}" />
						</div>
					</li>
				{% endif %}
			{% endfor %}
		</ul>

		<div class="bp-c-image-carousel__navigation">
			{{navButton.default("bp-c-image-carousel__previous", {
				type: "Previous",
				icon: "chevron-left"
			})}}

			<div class="bp-c-image-carousel__indicator">
				<span class="bp-c-image-carousel__current"></span>
				/
				<span class="bp-c-image-carousel__total"></span>
			</div>

			{{navButton.default("bp-c-image-carousel__next bp-c-nav-button--reversed", {
				type: "Next",
				icon: "chevron-right"
			})}}
		</div>
	</div>

{% endmacro %}