No notes defined.
<div class="sds-sectionForm__item -hasStickyMobileBtn sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="row row-sm align-items-center">
<div class="col-md-5">
<img class="img-fluid d-block mx-auto" src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-simugood.svg" alt="">
</div>
<div class="col-md-7">
<div class="h2">
Super, votre projet semble réalisable.
</div>
</div>
</div>
<div class="row row-sm flex-md-row-reverse">
<div class="col-md-6">
<div class="sds-stackMd sticky-top" id="housingSimulatorResults">
<div class="h4">Exemples de mensualités du prêt*</div>
<div class="sds-stackMd">
<div class="sds-simulatorResultCard sds-box -boxSunken">
<div class="sds-simulatorResultCard__header">
<div class="sds-textSemiBold sds-textHelper">
Taux variable (1,8%)
</div>
<div class="sds-amount -positive -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
<span class="sds-amount__frequency">
/ mois
</span>
</div>
</div>
<p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
<p class="sds-textHelper">TAEG: 3.76%</p>
</div>
<div class="sds-simulatorResultCard sds-box -boxSunken">
<div class="sds-simulatorResultCard__header">
<div class="sds-textSemiBold sds-textHelper">
Taux variable (1,8%)
</div>
<div class="sds-amount -positive -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
<span class="sds-amount__frequency">
/ mois
</span>
</div>
</div>
<p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
<p class="sds-textHelper">TAEG: 3.76%</p>
</div>
</div>
<div class="text-center">
<button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger">
<span class="sds-icon sds-icon-paperplane"></span>
<span class="sds-btn__text">Envoyer données</span>
</button>
</div>
<p class="sds-formDisclaimer">
(*) mensualités indicatives calculées sur base des données saisies.<br>(**) Vous pouvez ajouter une assurance solde restant dû (ASRD) pour vous protéger. Simulation indicative pour 60% de montant total assuré. <a href=''>Rendez-vous sur lalux</a>
</p>
</div>
</div>
<div class="col-md-6">
<div class="sds-stackMd">
<div class="h4">Résultat simulation</div>
<div>
<div class="form-group">
<div class="sds-label">
Montant
</div>
<div class="sds-amount -amountXl -secondary100">
<span class="sds-amount__value">335,30</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Apport personnel
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Durée du prêt
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="30">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
30
</div>
<div class="sds-input__shadowCurrency">
ans
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="collapse" id="simulationDetail">
<div class="sds-inputRecap">
<div class="row row-xs">
<div class="col-12">
<label for="" class="sds-label -labelForm">
Montant du bien immobilier
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="" class="sds-label -labelForm">
Montant des travaux
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="" class="sds-label -labelForm">
Apport personnel
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-stretch">
<div class="col-5 d-flex flex-column">
<label for="test" class="sds-label -labelForm flex-grow-1">
Frais d'enrgeistrement
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col align-self-end">
<div class="sds-inputRecap__operation">
-
</div>
</div>
<div class="col-5 d-flex flex-column">
<label for="test" class="sds-label -labelForm flex-grow-1">
Crédit d'impôt
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="test" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="test" class="sds-label -labelForm">
Autres frais lirés au projet
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
<div class="sds-inputRecap__total">
<div class="sds-label">
Coût du projet
</div>
<div class="sds-amount -amountLg">
<span class="sds-amount__value">335,30</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-housingSimulator__updateHint -shown js-housingSimulator__updateHint">
<a href="#housingSimulatorResults" class="sds-btn -btnCta -btnCtaHighlight">
<span class="sds-icon sds-icon-arrowtop"></span>
<span class="sds-btn__text">Nouvelles mensualités</span>
</a>
</div>
</div>
<div class="form-group text-center">
<button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger -collapseTrigger" data-toggle="collapse" data-target="#simulationDetail">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Afficher les détails du calcul</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row row-sm sds-exceptionStackXxl">
<div class="col-12">
<p class="sds-formDisclaimer">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de faire une demande en ligne.
</p>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<div class="sds-sectionForm__stickyFooterBtn -shown">
<div class="d-md-none">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Débuter ma demande de projet</span>
</button>
</div>
<div class="d-none d-md-block">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Débuter ma demande de projet</span>
</button>
</div>
</div>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Débuter ma demande de prêt</span>
</button>
</div>
</div>
</div>
<div class="{{ namespace }}sectionForm__item -hasStickyMobileBtn {{ namespace }}box -insetLg {{ namespace }}stackMd{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}sectionForm__itemBody {{ namespace }}stackMd">
<div class="row row-sm align-items-center">
<div class="col-md-5">
<img class="img-fluid d-block mx-auto" src="{{ ("https://design.spuerkeess.lu/media"+ illustrationsSDSPath + svg750xPath + "/hero/sdsillu-simugood.svg") }}" alt="">
</div>
<div class="col-md-7">
<div class="h2">
Super, votre projet semble réalisable.
</div>
</div>
</div>
<div class="row row-sm flex-md-row-reverse">
<div class="col-md-6">
<div class="{{ namespace }}stackMd sticky-top" id="housingSimulatorResults">
<div class="h4">Exemples de mensualités du prêt*</div>
<div class="{{ namespace }}stackMd">
{% render "@snet-simulator-result-card" %}
{% render "@snet-simulator-result-card" %}
</div>
<div class="text-center">
{% render "@btn-secondary--icon-left-collapse-trigger",{
icon: "icon-paperplane",
text: "Envoyer données"
},true %}
</div>
{% render "@form-disclaimer--link" %}
</div>
</div>
<div class="col-md-6">
<div class="{{ namespace }}stackMd">
<div class="h4">Résultat simulation</div>
<div>
<div class="form-group">
{% render "@label--div",{text: "Montant"},true %}
{% render "@amount--xtra-large-secondary-100" %}
</div>
<div class="form-group">
{% render "@label--form",{text: "Apport personnel"},true %}
{% render "@input--shadow",{
value: "4000"
},true %}
</div>
<div class="form-group">
{% render "@label--form",{text: "Durée du prêt"},true %}
{% render "@input--shadow",{
value: "30",
valueType: "ans"
},true %}
</div>
<div class="form-group">
<div class="collapse" id="simulationDetail">
{% render "@snet-input-recap" %}
</div>
<div class="{{ namespace }}housingSimulator__updateHint -shown js-housingSimulator__updateHint">
{% render "@btn-highlight--icon-left",{
eltType: "a",
href: "#housingSimulatorResults",
icon: "icon-arrowtop",
text: "Nouvelles mensualités"
},true %}
</div>
</div>
<div class="form-group text-center">
{% render "@btn-secondary--icon-left-collapse-trigger",{
icon: "icon-plus",
text: "Afficher les détails du calcul",
classes: ["-collapseTrigger"],
attrs: {
"data-toggle": "collapse",
"data-target": "#simulationDetail"
}
},true %}
</div>
</div>
</div>
</div>
</div>
<div class="row row-sm {{ namespace }}exceptionStackXxl">
<div class="col-12">
{% render "@form-disclaimer" %}
</div>
</div>
</div>
<div class="{{ namespace }}sectionForm__itemFooter">
<div class="{{ namespace }}btnGroup">
{% render '@btn-secondary-inverse', {text: "Retour"}, true %}
<div class="{{ namespace }}sectionForm__stickyFooterBtn -shown">
<div class="d-md-none">
{% render '@btn-secondary', {text: "Débuter ma demande de projet"}, true %}
</div>
<div class="d-none d-md-block">
{% render '@btn-secondary-inverse', {text: "Débuter ma demande de projet"}, true %}
</div>
</div>
{% render '@btn-primary',{text: "Débuter ma demande de prêt"}, true %}
</div>
</div>
</div>