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

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

<section class="c-interest-rate l-section l-section--background-pink {{classes}}">
	<div class="c-interest-rate__container l-container">
		<h2 class="c-interest-rate__title">{{data.title}}</h2>
		<p class="c-interest-rate__text">{{data.text}}</p>

		<table class="c-interest-rate__table" cellspacing="0">
			<tbody class="c-interest-rate__body">
				<tr class="c-interest-rate__row">
					{% for item in data.items %}
						<th class="c-interest-rate__head {{'c-interest-rate__head--first' if loop.first}} {{'c-interest-rate__head--last' if loop.last}}">{{item.year}} jaar</th>
					{% endfor %}
				</tr>
				<tr class="c-interest-rate__row">
					{% for item in data.items %}
						<td class="c-interest-rate__data {{'c-interest-rate__data--first' if loop.first}} {{'c-interest-rate__data--last' if loop.last}}">{{item.text}}%</td>
					{% endfor %}
				</tr>
			</tbody>
		</table>

		{{button.default("c-button--inverted c-interest-rate__button", data.button)}}
	</div>
</section>

{% endmacro %}