{% set defaults = {
	theme: attribute(themes, "blue")|default,
	classes: [],
	heading: "",
	items: [],
	paginated: false,
	pageLimit: 10,
	organism: "cards",
	type: "generic",
	layout: "full",
	includeSeparator: false,
	carousel: false,
	noResults: "No results were found",
	border: true,
	padding:[],
} %}

{% set self = defaults|merge(self) %}

{% set layouts = {
	full: "grid-cols-1",
	halves: "grid-cols-1 md:grid-cols-2",
	thirds: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
	quarters: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4",
} %}

  {% if self.paginated %}
	{% paginate self.items.limit(self.pageLimit|default(10)) as pageInfo, loopItems %}
		{% else %}
			{% set loopItems = self.items %}
	{% endif %}

	{% if self.heading|default %}

		<div class="relative mt-20 mb-8">
			<div class="container flex items-center mx-auto ">
				<h2 class="px-4 text-blue-800 heading-3">{{ self.heading|default }}</h2>
			</div>
		</div>

	{% endif %}

	<div class="relative h-full">

		{% if loopItems|length %}

			{# {% block listingHeader %}{% if self.paginated and pageInfo|default %}
									<p class="block w-full pt-3 mb-12 text-base border-t border-blue text-blue">Showing <span class="font-normal">{{ (pageInfo.currentPage * self.pageLimit) - (self.pageLimit - 1) }}</span>&thinsp;&ndash;&thinsp;<span class="font-normal">{{ pageInfo.currentPage == pageInfo.totalPages ? pageInfo.total : pageInfo.currentPage * self.pageLimit }}</span> of <span class="font-normal">{{ pageInfo.total }}</span> results.</p>
								{% endif %}{% endblock %} #}

			<div class="relative h-full grid gap-12 xl:gap-20 xxl:gap-24 {{ self.classes|length ? " #{self.classes|join(' ')}" }} {{ layouts[self.layout]|default(" full") }}">
				{% for item in loopItems %}

					<div class="{% if self.border %} pl-6 xl:pl-8 border-l border-grey-400 rounded-tl-20 {% endif %} relative flex flex-col {{ self.padding|length ? " #{self.padding|join(' ')}" }}" {{ self.carousel ? ' data-carousel-cell' }}>
						{% include ["partials/#{self.organism}/#{self.type}", "partials/cards/generic"] with {
						item: item,
						loop: loop,
					} %}
					</div>

					{% if self.includeSeparator and not loop.last %}
						<hr class="w-full mb-10 border-t-2 border-gray-200 md:mx-6 lg:mx-8 xl:mx-10">
					{% endif %}

				{% endfor %}

				{% block afterLoop %}{% endblock %}

			</div>

			{% block listingFooter %}
				{% if self.paginated and pageInfo|default %}
					{% include "partials/pagination" with { pageInfo: pageInfo } %}
				{% endif %}
			{% endblock %}

		{% else %}

			<div class="mb-24 border-gray-300">
				<p class="heading-4">{{ self.noResults }}</p>
			</div>

		{% endif %}
	</div>