{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/download-thumb.njk" as downloadThumb %}
{% import "components/folder-thumb.njk" as folderThumb %}
{% import "components/overlay.njk" as overlay %}
{% import "components/image-carousel.njk" as imageCarousel %}

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

	<div class="bp-c-download-grid bp-js-download-grid">
		{{overlay.default("", {
			id: data.id,
			content: imageCarousel.default("bp-c-download-grid__carousel", {
				items: data.items,
				downloadable: true
			})
		})}}

		<div class="bp-l-grid bp-l-grid--with-spacing">
			{% for item in data.items %}
				{% set ext = item.extension %}
				{% set isImage = ext === "jpg" or ext === "png" or ext === "svg" or item.preview %}

				<div class="bp-c-download-grid__item bp-l-grid__col bp-l-grid__col--4@viewport-9 bp-l-grid__col--6@viewport-7">
					{{downloadThumb.default("bp-c-download-thumb--image" if isImage else "", {
						id: loop.index,
						item: item,
						overlayId: data.id
					})}}
				</div>
			{% endfor %}

			{% for item in data.folders %}
				<div class="bp-c-download-grid__item bp-l-grid__col bp-l-grid__col--4@viewport-9 bp-l-grid__col--6@viewport-7">
					{{folderThumb.default("", item)}}
				</div>
			{% endfor %}
		</div>
	</div>

{% endmacro %}