Info Table

<!-- Default -->
{% if table %}
	{% if wrapper %}
		<div class="{{ namespace }}infoTableBox">
	{% endif %}
	<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
		<tbody>
		{% for key, item in tableItems %}
			{% if item %}
				<tr>
					<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.icon %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
							{% endif %}
							{% render "@label",{
								eltType: "div",
								text: item.label
							},true %}
							{% if item.infoDot %}
								{% render '@info-dot--small' %}
							{% endif %}
						</div>
					</td>
					<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.iconRight %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
							{% endif %}
							{% if item.amountNeg %}
								{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
							{% elseif item.amountNegLarge %}
								{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
							{% elseif item.amountPos %}
								{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
							{% elseif item.amountPosLarge %}
								{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
							{% elseif item.amountDef %}
								{% render "@amount--default",{
									text: item.amountDef,
									classes: item.amountDefClasses,
									currency: item.currency
								},true %}
							{% elseif item.amountDefLarge %}
								{% render "@amount--large",{
									text: item.amountDefLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.amountDefXtraLarge %}
								{% render "@amount--xtra-large",{
									text: item.amountDefXtraLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.empty %}
								{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
							{% else %}
								<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
									{{ item.text | safe }}
								</div>
							{% endif %}
						</div>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
		</tbody>
	</table>
	{% if wrapper %}
		</div>
	{% endif %}
{% endif %}
{% if collapse %}
	<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
		<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			<tbody>
			{% for key, item in tableItemsCollapse %}
				{% if item %}
					<tr>
						<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.icon %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
								{% endif %}
								{% render "@label",{
									eltType: "div",
									text: item.label
								},true %}
							</div>
						</td>
						<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.iconRight %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
								{% endif %}
								{% if item.amountNeg %}
									{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
								{% elseif item.amountNegLarge %}
									{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
								{% elseif item.amountPos %}
									{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
								{% elseif item.amountPosLarge %}
									{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
								{% elseif item.amountDef %}
									{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
								{% elseif item.amountDefLarge %}
									{% render "@amount--large",{
										text: item.amountDefLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.amountDefXtraLarge %}
									{% render "@amount--xtra-large",{
										text: item.amountDefXtraLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.empty %}
									{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
								{% else %}
									<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
										{{ item.text | safe }}
									</div>
								{% endif %}
							</div>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
			</tbody>
		</table>
	</div>
	{% if btnCentered %}
		<div class="text-center">
	{% endif %}
		{% render  "@btn-secondary--icon-left-collapse-trigger",{
			icon: "icon-plus",
			text: "Afficher le détail",
			attrs: {
				"data-toggle": "collapse",
				"data-target": "#"+collapseID
			}
		},true %}
	{% if btnCentered %}
		</div>
	{% endif %}
{% endif %}

<!-- Box -->
{% if table %}
	{% if wrapper %}
		<div class="{{ namespace }}infoTableBox">
	{% endif %}
	<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
		<tbody>
		{% for key, item in tableItems %}
			{% if item %}
				<tr>
					<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.icon %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
							{% endif %}
							{% render "@label",{
								eltType: "div",
								text: item.label
							},true %}
							{% if item.infoDot %}
								{% render '@info-dot--small' %}
							{% endif %}
						</div>
					</td>
					<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.iconRight %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
							{% endif %}
							{% if item.amountNeg %}
								{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
							{% elseif item.amountNegLarge %}
								{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
							{% elseif item.amountPos %}
								{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
							{% elseif item.amountPosLarge %}
								{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
							{% elseif item.amountDef %}
								{% render "@amount--default",{
									text: item.amountDef,
									classes: item.amountDefClasses,
									currency: item.currency
								},true %}
							{% elseif item.amountDefLarge %}
								{% render "@amount--large",{
									text: item.amountDefLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.amountDefXtraLarge %}
								{% render "@amount--xtra-large",{
									text: item.amountDefXtraLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.empty %}
								{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
							{% else %}
								<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
									{{ item.text | safe }}
								</div>
							{% endif %}
						</div>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
		</tbody>
	</table>
	{% if wrapper %}
		</div>
	{% endif %}
{% endif %}
{% if collapse %}
	<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
		<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			<tbody>
			{% for key, item in tableItemsCollapse %}
				{% if item %}
					<tr>
						<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.icon %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
								{% endif %}
								{% render "@label",{
									eltType: "div",
									text: item.label
								},true %}
							</div>
						</td>
						<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.iconRight %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
								{% endif %}
								{% if item.amountNeg %}
									{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
								{% elseif item.amountNegLarge %}
									{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
								{% elseif item.amountPos %}
									{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
								{% elseif item.amountPosLarge %}
									{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
								{% elseif item.amountDef %}
									{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
								{% elseif item.amountDefLarge %}
									{% render "@amount--large",{
										text: item.amountDefLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.amountDefXtraLarge %}
									{% render "@amount--xtra-large",{
										text: item.amountDefXtraLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.empty %}
									{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
								{% else %}
									<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
										{{ item.text | safe }}
									</div>
								{% endif %}
							</div>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
			</tbody>
		</table>
	</div>
	{% if btnCentered %}
		<div class="text-center">
	{% endif %}
		{% render  "@btn-secondary--icon-left-collapse-trigger",{
			icon: "icon-plus",
			text: "Afficher le détail",
			attrs: {
				"data-toggle": "collapse",
				"data-target": "#"+collapseID
			}
		},true %}
	{% if btnCentered %}
		</div>
	{% endif %}
{% endif %}

<!-- Has Icon -->
{% if table %}
	{% if wrapper %}
		<div class="{{ namespace }}infoTableBox">
	{% endif %}
	<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
		<tbody>
		{% for key, item in tableItems %}
			{% if item %}
				<tr>
					<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.icon %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
							{% endif %}
							{% render "@label",{
								eltType: "div",
								text: item.label
							},true %}
							{% if item.infoDot %}
								{% render '@info-dot--small' %}
							{% endif %}
						</div>
					</td>
					<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.iconRight %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
							{% endif %}
							{% if item.amountNeg %}
								{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
							{% elseif item.amountNegLarge %}
								{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
							{% elseif item.amountPos %}
								{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
							{% elseif item.amountPosLarge %}
								{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
							{% elseif item.amountDef %}
								{% render "@amount--default",{
									text: item.amountDef,
									classes: item.amountDefClasses,
									currency: item.currency
								},true %}
							{% elseif item.amountDefLarge %}
								{% render "@amount--large",{
									text: item.amountDefLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.amountDefXtraLarge %}
								{% render "@amount--xtra-large",{
									text: item.amountDefXtraLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.empty %}
								{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
							{% else %}
								<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
									{{ item.text | safe }}
								</div>
							{% endif %}
						</div>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
		</tbody>
	</table>
	{% if wrapper %}
		</div>
	{% endif %}
{% endif %}
{% if collapse %}
	<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
		<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			<tbody>
			{% for key, item in tableItemsCollapse %}
				{% if item %}
					<tr>
						<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.icon %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
								{% endif %}
								{% render "@label",{
									eltType: "div",
									text: item.label
								},true %}
							</div>
						</td>
						<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.iconRight %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
								{% endif %}
								{% if item.amountNeg %}
									{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
								{% elseif item.amountNegLarge %}
									{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
								{% elseif item.amountPos %}
									{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
								{% elseif item.amountPosLarge %}
									{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
								{% elseif item.amountDef %}
									{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
								{% elseif item.amountDefLarge %}
									{% render "@amount--large",{
										text: item.amountDefLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.amountDefXtraLarge %}
									{% render "@amount--xtra-large",{
										text: item.amountDefXtraLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.empty %}
									{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
								{% else %}
									<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
										{{ item.text | safe }}
									</div>
								{% endif %}
							</div>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
			</tbody>
		</table>
	</div>
	{% if btnCentered %}
		<div class="text-center">
	{% endif %}
		{% render  "@btn-secondary--icon-left-collapse-trigger",{
			icon: "icon-plus",
			text: "Afficher le détail",
			attrs: {
				"data-toggle": "collapse",
				"data-target": "#"+collapseID
			}
		},true %}
	{% if btnCentered %}
		</div>
	{% endif %}
{% endif %}

<!-- Periodicite -->
<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<tr>
		<td class="{{ namespace }}infoTable__cellAlignTop">
			<div class="{{ namespace }}infoTable__cellContent">
				{% render "@label",{
					eltType: "div",
					text: "Périodicité"
				},true %}
			</div>
		</td>
		<td class="{{ namespace }}infoTable__cellAlignTop">
			<div class="{{ namespace }}infoTable__cellContent">
				<div class="{{ namespace }}stackXxs">
					<div>Personnalisée</div>
					<div class="{{ namespace }}infoTable__helper {{ namespace }}textHelperSmall">Tous les ans au mois de: Janvier, Février, Mars, Avril, Juin, Juillet, Août, Septembre, Octobre, Novembre, Décembre</div>
				</div>
			</div>
		</td>
	</tr>
</table>

<!-- Empty -->
{% if table %}
	{% if wrapper %}
		<div class="{{ namespace }}infoTableBox">
	{% endif %}
	<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
		<tbody>
		{% for key, item in tableItems %}
			{% if item %}
				<tr>
					<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.icon %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
							{% endif %}
							{% render "@label",{
								eltType: "div",
								text: item.label
							},true %}
							{% if item.infoDot %}
								{% render '@info-dot--small' %}
							{% endif %}
						</div>
					</td>
					<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.iconRight %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
							{% endif %}
							{% if item.amountNeg %}
								{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
							{% elseif item.amountNegLarge %}
								{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
							{% elseif item.amountPos %}
								{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
							{% elseif item.amountPosLarge %}
								{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
							{% elseif item.amountDef %}
								{% render "@amount--default",{
									text: item.amountDef,
									classes: item.amountDefClasses,
									currency: item.currency
								},true %}
							{% elseif item.amountDefLarge %}
								{% render "@amount--large",{
									text: item.amountDefLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.amountDefXtraLarge %}
								{% render "@amount--xtra-large",{
									text: item.amountDefXtraLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.empty %}
								{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
							{% else %}
								<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
									{{ item.text | safe }}
								</div>
							{% endif %}
						</div>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
		</tbody>
	</table>
	{% if wrapper %}
		</div>
	{% endif %}
{% endif %}
{% if collapse %}
	<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
		<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			<tbody>
			{% for key, item in tableItemsCollapse %}
				{% if item %}
					<tr>
						<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.icon %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
								{% endif %}
								{% render "@label",{
									eltType: "div",
									text: item.label
								},true %}
							</div>
						</td>
						<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.iconRight %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
								{% endif %}
								{% if item.amountNeg %}
									{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
								{% elseif item.amountNegLarge %}
									{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
								{% elseif item.amountPos %}
									{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
								{% elseif item.amountPosLarge %}
									{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
								{% elseif item.amountDef %}
									{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
								{% elseif item.amountDefLarge %}
									{% render "@amount--large",{
										text: item.amountDefLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.amountDefXtraLarge %}
									{% render "@amount--xtra-large",{
										text: item.amountDefXtraLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.empty %}
									{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
								{% else %}
									<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
										{{ item.text | safe }}
									</div>
								{% endif %}
							</div>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
			</tbody>
		</table>
	</div>
	{% if btnCentered %}
		<div class="text-center">
	{% endif %}
		{% render  "@btn-secondary--icon-left-collapse-trigger",{
			icon: "icon-plus",
			text: "Afficher le détail",
			attrs: {
				"data-toggle": "collapse",
				"data-target": "#"+collapseID
			}
		},true %}
	{% if btnCentered %}
		</div>
	{% endif %}
{% endif %}

<!-- Collapse -->
{% if table %}
	{% if wrapper %}
		<div class="{{ namespace }}infoTableBox">
	{% endif %}
	<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
		<tbody>
		{% for key, item in tableItems %}
			{% if item %}
				<tr>
					<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.icon %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
							{% endif %}
							{% render "@label",{
								eltType: "div",
								text: item.label
							},true %}
							{% if item.infoDot %}
								{% render '@info-dot--small' %}
							{% endif %}
						</div>
					</td>
					<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
						<div class="{{ namespace }}infoTable__cellContent">
							{% if item.iconRight %}
								<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
							{% endif %}
							{% if item.amountNeg %}
								{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
							{% elseif item.amountNegLarge %}
								{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
							{% elseif item.amountPos %}
								{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
							{% elseif item.amountPosLarge %}
								{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
							{% elseif item.amountDef %}
								{% render "@amount--default",{
									text: item.amountDef,
									classes: item.amountDefClasses,
									currency: item.currency
								},true %}
							{% elseif item.amountDefLarge %}
								{% render "@amount--large",{
									text: item.amountDefLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.amountDefXtraLarge %}
								{% render "@amount--xtra-large",{
									text: item.amountDefXtraLarge,
									currency: item.currency,
									classes: classes
								},true %}
							{% elseif item.empty %}
								{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
							{% else %}
								<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
									{{ item.text | safe }}
								</div>
							{% endif %}
						</div>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
		</tbody>
	</table>
	{% if wrapper %}
		</div>
	{% endif %}
{% endif %}
{% if collapse %}
	<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
		<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			<tbody>
			{% for key, item in tableItemsCollapse %}
				{% if item %}
					<tr>
						<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.icon %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
								{% endif %}
								{% render "@label",{
									eltType: "div",
									text: item.label
								},true %}
							</div>
						</td>
						<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
							<div class="{{ namespace }}infoTable__cellContent">
								{% if item.iconRight %}
									<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
								{% endif %}
								{% if item.amountNeg %}
									{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
								{% elseif item.amountNegLarge %}
									{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
								{% elseif item.amountPos %}
									{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
								{% elseif item.amountPosLarge %}
									{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
								{% elseif item.amountDef %}
									{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
								{% elseif item.amountDefLarge %}
									{% render "@amount--large",{
										text: item.amountDefLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.amountDefXtraLarge %}
									{% render "@amount--xtra-large",{
										text: item.amountDefXtraLarge,
										currency: item.currency,
										classes: classes
									},true %}
								{% elseif item.empty %}
									{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
								{% else %}
									<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
										{{ item.text | safe }}
									</div>
								{% endif %}
							</div>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
			</tbody>
		</table>
	</div>
	{% if btnCentered %}
		<div class="text-center">
	{% endif %}
		{% render  "@btn-secondary--icon-left-collapse-trigger",{
			icon: "icon-plus",
			text: "Afficher le détail",
			attrs: {
				"data-toggle": "collapse",
				"data-target": "#"+collapseID
			}
		},true %}
	{% if btnCentered %}
		</div>
	{% endif %}
{% endif %}

<!-- Horizontal Table Inside -->
<div class="{{ namespace }}box -insetLg -boxSunken">

	<div class="row col-separator flex-md-nowrap justify-content-between">

		<div class="col-12 col-md-12 flex-md-shrink-1">
			<div class="row align-items-center">
				<div class="col-12">
					<div class="{{ namespace }}stackLg">
						<h4 class="h4">Récapitulatif</h4>
						<div class="{{ namspace }}wysiwyg">
							<p>
								Avec S-Invest, un investissement d’une somme de <b>14.400 €</b> sur <b>8 ans</b> via un versement de <b>150 € par mois</b> vous aurait permis de construire un capital d’environ :
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-12 col-md-auto">
			{% render '@snet-info-table',{
				classes: ["-hasTotal"],
				tableItems: tableItems
			}, true %}
		</div>

	</div>

</div>