Loan Embed: Recap

<div class="{{ namespace }}embed {{ namespace }}loanEmbed {{ namespace }}box {{ namespace }}stackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <div class="row row-sm align-items-center">
		<div class="col">
            <img class="{{ namespace }}embed__logo img-fluid" src="{{ (mediaPath + "/logos/logo-bcee-secondary.svg") | path }}" alt="Spuerkeess.lu Logo">
        </div>
        <div class="col-6 col-md-8">
            {% render '@msp-stepper',{
                steps: steps,
                classes: [namespace + "embed__headerStepper"]
            }, true %}
        </div>
    </div>
    <div class="{{ namespace }}stackXl">
		<div class="h3">{{ title | safe }}</div>
        <ul class="{{ namespace }}exceptionStackLg {{ namespace }}stackLg">
            <li class="{{ namespace }}loanEmbed__recapListItem">
                <img class="{{ namespace }}loanEmbed__recapIcon" src="{{ ("https://design.spuerkeess.lu/media" + brandIconsSDSPath + svg48xPath  + "/sdsbrandicon-funding.svg") }}" alt="">
                <div class="{{ namespace }}textBodyLg flex-grow-1">
                    <span>Avec un remboursement de</span>
                    {% render '@amount--neutral-xl',{
                        currency: "€",
                        text: "1.014",
						frequency: "/mois"
                    }, true %}
                </div>
            </li>
            <li class="{{ namespace }}loanEmbed__recapListItem">
                <img class="{{ namespace }}loanEmbed__recapIcon" src="{{ ("https://design.spuerkeess.lu/media" + brandIconsSDSPath + svg48xPath  + "/sdsbrandicon-calendar.svg") }}" alt="">
                <div class="{{ namespace }}textBodyLg flex-grow-1">
                    <span>à l'aide d'un prêt sur </span>
                    {% render '@select--inline-large',{
                        options: options
                    }, true %}
                </div>
            </li>
            <li class="{{ namespace }}loanEmbed__recapListItem">
                <img class="{{ namespace }}loanEmbed__recapIcon" src="{{ ("https://design.spuerkeess.lu/media" + brandIconsSDSPath + svg48xPath  + "/sdsbrandicon-house.svg") }}" alt="">
                <div class="{{ namespace }}textBodyLg flex-grow-1">
                    <span>vous pouvez acheter un bien d'une valeur de</span>
                    {% render '@amount--positive-xl',{
                        currency: "€",
                        text: "170.811,00"
                    }, true %}
                </div>
            </li>
        </ul>
       <div>
		   <div id="loanEmbed-recapResultCollapse" class="{{ namespace }}loanEmbed__collapse collapse">
			   <div class="{{ namespace }}loanEmbed__collapseInner">
				   {% render '@snet-info-table--box',{
					   tableItems: tableItemsCollapse
				   }, true %}
			   </div>
		   </div>
		   <div class="text-center">
			   {% render '@btn-secondary--icon-left-collapse-trigger',{
				   icon: "icon-plus",
				   text: "Détail calcul",
				   attrs: {
					   "data-toggle": "collapse",
					   "data-target": "#loanEmbed-recapResultCollapse",
					   "aria-expanded": false
				   }
			   }, true %}
		   </div>
	   </div>
        <div class="row row-xs">
            <div class="col-md-6">
                {% render '@snet-amount-card--info',{
                    helper: "Charges/Revenus",
                    currency: "%",
                    amount: "40"
                }, true %}
            </div>
            <div class="col-md-6">
                {% render '@snet-amount-card--info' %}
            </div>
        </div>
        <div>
            <div id="loanEmbed-recapExampleCollapse" class="{{ namespace }}loanEmbed__collapse collapse">
                <div class="{{ namespace }}loanEmbed__collapseInner">
					{% render '@message',{
						text: "<b>Exemple de calcul d'un prêt</b><br> logement Un prêt au logement d'un montant de EUR 500.000 destiné à l'acquisition d'un bien immobilier et conclu au taux nominal de 3,1 % sur une durée de 360 mois, est remboursable par des mensualités de EUR 2.144,56. Les frais de dossier, sous condition d'une détention de package Zebra Premium, s'élèvent à EUR 1.500,00. Le T.A.E.G. (taux annuel effectif global) est de 3,18%. Le montant total à rembourser est de EUR 775.746 (hors frais d'assurance-vie et frais d'inscription hypothécaire)."
					},true %}
				</div>
            </div>
            <div class="text-center">
                {% render '@btn-secondary--icon-left-collapse-trigger',{
                    icon: "icon-plus",
                    text: "Exemple calcul",
                    attrs: {
                        "data-toggle": "collapse",
                        "data-target": "#loanEmbed-recapExampleCollapse",
                        "aria-expanded": false
                    }
                }, true %}
            </div>
        </div>
    </div>
    <div class="{{ namespace }}loanEmbed__footer">
        {% render '@btn-secondary--icon-left',{
            text: "Envoyer une copie",
            icon: "icon-paperplane",
			classes: ["d-md-none"]
        }, true %}
        <div class="d-flex align-items-center justify-content-between">
            {% render '@icon-btn-secondary',{
                icon: "icon-reload"
            }, true %}
            <div class="{{ namespace }}btnGroup">
                {% render '@btn-secondary-inverse--icon-left',{
                    text: "Envoyer une copie",
                    icon: "icon-paperplane",
					classes: ["d-none", "d-md-flex"]
                }, true %}
                {% render '@btn-primary--icon-left',{
                    text: "Prendre rendez-vous",
                    icon: "icon-calendar"
                }, true %}
            </div>
        </div>
    </div>
</div>