{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/components/usp/usp-macros.njk" as usp %}

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

	<div class="c-usp-list l-section l-section--large {{classes}}">

		{% if data.curve %}
			<div class="l-section--with-curve"></div>
		{% endif %}

		<div class="c-usp-list__container l-container">
			<ul class="c-usp-list__content l-grid l-grid--with-spacing l-grid--align-center">
				{% for item in data.items %}

					<li class="c-usp-list__item l-grid__col l-grid__col--4@desktop l-grid__col--6@tablet u-padding-left-3x@desktop u-padding-right-3x@desktop">
						{{usp.default(item.classes, item)}}
					</li>

				{% endfor %}
			</ul>

			{% if data.button %}
				{{button.default("c-usp-list__button " + data.button.classes, data.button)}}
			{% endif %}
		</div>

	</div>

{% endmacro %}

{# ========================================================================== #}
{# :: Interactive #}
{# ========================================================================== #}
{% macro interactive(classes, data) %}

	<div class="c-usp-list c-usp-list--interactive l-section l-section--large js-usp-list {{classes}}">

		<div class="c-usp-list__container l-container">
			<ul class="c-usp-list__content">
				{% for item in data.items %}

					<li class="c-usp-list__item">
						<button class="c-usp-list__button" data-usp-id="{{loop.index - 1}}">
							{{usp.default(item.classes, item)}}
						</button>
					</li>

				{% endfor %}
			</ul>
		</div>

	</div>

{% endmacro %}