{# ========================================================================= #}
{# :: IMPORTS #}
{# ========================================================================= #}
{% import "atoms/button/button-macros.njk" as button %}

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

<ul class="m-pagination {{classes}}">
	<li>
		{{button.default("m-pagination__button m-pagination__button--prev u-mobile-hide", {
			text: "vorige",
			icon: {before: "icon-arrow-left"}
		})}}
	</li>
	<li>
		{{button.default("m-pagination__button m-pagination__button--prev u-mobile-show", {
			text: "",
			icon: {before: "icon-arrow-left"}
		})}}
	</li>

	{% for i in range(0, amount) %}
		{% if i == 5 and i != loop.length %}
			<li class="m-pagination__item">
				<a href="/">...</a>
			</li>
		{% elseif i < 5 and i < loop.length or i == loop.length %}
			<li class="m-pagination__item {% if loop.index == 1 %}is-active{% endif %}">
				<a href="/">{{i + 1}}</a>
			</li>
		{% endif %}
	{% endfor %}

	<li>
		{{button.default("a-button--icon-after m-pagination__button m-pagination__button--next u-mobile-hide", {
			text: "volgende",
			icon: {after: "icon-arrow-right"}
		})}}
	</li>
	<li>
		{{button.default("a-button--icon-after m-pagination__button m-pagination__button--next u-mobile-show", {
			text: "",
			icon: {after: "icon-arrow-right"}
		})}}
	</li>
</ul>

{% endmacro %}