{# ========================================================================== #}
{# :: 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 previewLarge = item.preview.large if item.preview.large else item.path.large %}
				{% set previewMedium = item.preview.medium if item.preview.medium else item.path.medium %}
				{% set isImage = ext === "jpg" or ext === "png" or ext === "svg" or ext === "image" or preview %}
				{% set path = item.path.medium if item.path.medium else item.path %}

				{% if isImage %}
					<li class="bp-c-image-carousel__item {% if loop.first %} is-shown {% endif %}">
						{% if not data.downloadDisabled %}
							<div class="bp-c-image-carousel__header">
								<h2 class="bp-c-image-carousel__title">{{item.name}}</h2>

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

						<div class="bp-c-image-carousel__image" style="background-image: url('{{previewLarge}}')">
							<img class="bp-c-image-carousel__visual" src="{{previewMedium}}" 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 %}