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

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

	<div class="c-interest-table l-section js-interest-table {{classes}}">
		<div class="c-interest-table__container l-container">
			<div class="c-interest-table__header">
				<ul class="c-interest-table__list">
					<li class="c-interest-table__list-item">
						<button class="c-interest-table__button" data-table-id="0">
							<span class="c-interest-table__list-item-title">Annuïtair</span>

							<div class="c-interest-table__flyout u-show@tablet">
								{{flyout.default("", {
									trigger: {
										content: "<span class='fas fa-info-circle c-interest-table__icon'></span>"
									},
									content: "<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
									& click</p>"
								})}}
							</div>

						</button>
					</li>
					<li class="c-interest-table__list-item">
						<button class="c-interest-table__button" data-table-id="1">
							<span class="c-interest-table__list-item-title">Lineair</span>

							<div class="c-interest-table__flyout u-show@tablet">
								{{flyout.default("", {
									trigger: {
										content: "<span class='fas fa-info-circle c-interest-table__icon'></span>"
									},
									content: "<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
									& click</p>"
								})}}
							</div>

						</button>
					</li>
					<li class="c-interest-table__list-item">
						<button class="c-interest-table__button" data-table-id="2">
							<span class="c-interest-table__list-item-title">Aflosvrij</span>

							<div class="c-interest-table__flyout u-show@tablet">
								{{flyout.default("", {
									trigger: {
										content: "<span class='fas fa-info-circle c-interest-table__icon'></span>"
									},
									content: "<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
									& click</p>"
								})}}
							</div>

						</button>
					</li>
				</ul>

				{{input.select("c-interest-table__collapse", {
					label: { text: "Rentehistoriek:" },
					id: "input-select-1",
					name: "input-select-1",
					input: {
						icon: "fas fa-sort-down",
						options: data.period
					}
				})}}
			</div>

			<div class="c-interest-table__content-container l-indent-right">
				{% for item in data.items %}

						<div class="c-interest-table__content" data-table-id="{{loop.index - 1}}">
							<table class="c-interest-table__item" cellspacing="0">
								<tbody class="c-interest-table__body c-interest-table__body--bg-gray">
									<tr class="c-interest-table__row-header">
										<th class="c-interest-table__head c-interest-table__head--with-icon c-interest-table__head--sticky">
											<span>Perioden</span>

											<div class="c-interest-table__flyout c-interest-table__flyout--small u-show@tablet">
												{{flyout.default("", {
													trigger: {
														content: "<span class='fas fa-info-circle c-interest-table__icon'></span>"
													},
													content: "<p>dit is een tooltip met extra info, deze verschijnt enkel on hover & click</p>"
												})}}
											</div>

										</th>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">1 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">2 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">3 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">4 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">5 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">6 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">7 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">8 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">9 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">10 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">12 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">15 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">20 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">25 jaar</td>
									</tr>
									<tr class="c-interest-table__static">
										<td class="c-interest-table__data">30 jaar</td>
									</tr>
								</tbody>
							</table>

							<div class="c-interest-table__item c-interest-table__item--toggle">
								<table class="c-interest-table__item-content" cellspacing="0">
									<tbody class="c-interest-table__body">
										<tr class="c-interest-table__row-header">
											<th class="c-interest-table__head">NHG</th>
											<th class="c-interest-table__head">t/m 65%</th>
											<th class="c-interest-table__head">t/m 80%</th>
											<th class="c-interest-table__head">t/m 95%</th>
											<th class="c-interest-table__head">t/m 106%</th>
											<th class="c-interest-table__head c-interest-table__head--last">t/m 115%</th>
										</tr>

											{% for period in item.periods %}

												<tr class="c-interest-table__row {% if period.expandable %} c-interest-table__row--expandable {% endif %}">
													<td class="c-interest-table__data">{{period.nhg}}%</td>
													<td class="c-interest-table__data">{{period.sixtyfive}}%</td>
													<td class="c-interest-table__data">{{period.eighty}}%</td>
													<td class="c-interest-table__data">{{period.ninetyfive}}%</td>
													<td class="c-interest-table__data">{{period.onehundredsix}}%</td>
													<td class="c-interest-table__data">{{period.onehundredfifteen}}%</td>
												</tr>

											{% endfor %}

									</tbody>
								</table>
							</div>
						</div>

				{% endfor %}
			</div>

			<button class="c-interest-table__expand">
				<span class="c-interest-table__expand-text">meer rentes</span>
				<span class="fas fa-sort-down c-interest-table__expand-icon"></span>
			</button>

		</div>
	</div>

{% endmacro %}