Pret Personnel Embed

No notes defined.

<!-- Default -->
<div class="sds-embed sds-pretPersonnelEmbed sds-box sds-stackXl">
    <img class="sds-embed__logo img-fluid" src="../../media/logos/logo-bcee-secondary.svg" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
            <fieldset class="sds-stackLg">
                <div class="sds-stackXs">
                    <h3 class="h3">Simulation de votre prêt personnel</h3>
                    <p>Simulez les mensualités de remboursement</p>
                </div>
                <div class="form-group">
                    <label for="inputPretPersonnel-amount" class="sds-label -form">
                        Prix du bien

                    </label>
                    <div class="sds-input -hasShadow">
                        <input id="inputPretPersonnel-amount" class="sds-input form-control" type="number" placeholder="0" value="25000">

                        <div class="sds-input__shadowInput form-control" aria-hidden="true">
                            <div class="sds-input__shadowValue">
                                25000
                            </div>
                            <div class="sds-input__shadowCurrency"></div>
                        </div>

                        <div class="sds-input__hint">min. 5.000,00 € - max. 50.000,00 €</div>

                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPretPersonnel-range" class="sds-label -form">
                        Durée

                    </label>
                    <div class="sds-range -alignToInput">
                        <div class="sds-range__body">
                            <input type="range" class="custom-range" id="inputPretPersonnel-range" value="4" min="0" max="8">

                            <div class="sds-range__indicator">
                                <span>4</span> ans
                            </div>

                        </div>

                    </div>
                </div>
                <div class="sds-exceptionStackXl">
                    <div class="sds-checkbox custom-control custom-checkbox">
                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="pretPersonnelAgeRadio"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                        <label class="custom-control-label" for="pretPersonnelAgeRadio">J'ai moins de 30 ans</label>

                        <div class="sds-checkbox__error invalid-feedback">Error message</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-12 sds-stackSm">
            <div class="sds-box -insetLg -elevated sds-stackSm">
                <h4 class="h4">Récapitulatif</h4>
                <div class="sds-stackSm">

                    <table class="sds-infoTable table -hasTotal">
                        <tbody>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Montant du prêt

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">25.000,00</span>

                                            <span class="sds-amount__currency"></span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Taux nominal

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">5,1795</span>

                                            <span class="sds-amount__currency">%</span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            TAEG

                                        </div>

                                        <a href="#!" tabindex="0" class="sds-infoDot -small" data-trigger="focus" data-container="body" data-placement="right" 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>
                                        </a>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">3,18</span>

                                            <span class="sds-amount__currency">%</span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Mensualité

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountXl -hasTotal">
                                            <span class="sds-amount__value">472,47</span>

                                            <span class="sds-amount__currency"></span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>

                    <div class="sds-exceptionStackMd text-center">
                        <a href="" class="sds-btn -btnPrimary">

                            <span class="sds-btn__text">Faire une demande</span>

                            <span class="sds-icon sds-icon-arrownext"></span>

                        </a>
                    </div>
                </div>
            </div>
            <p class="sds-formDisclaimer -small -insetHorizMd">
                La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
            </p>
        </div>
    </div>
</div>

<!-- Loading -->
<div class="sds-embed sds-pretPersonnelEmbed sds-box sds-stackXl">
    <img class="sds-embed__logo img-fluid" src="../../media/logos/logo-bcee-secondary.svg" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
            <fieldset class="sds-stackLg">
                <div class="sds-stackXs">
                    <h3 class="h3"><span class="sds-skeletonUnit -h3"></span></h3>
                    <p><span class="sds-skeletonUnit -textBody"></span></p>
                </div>
                <div class="form-group">
                    <span class="sds-skeletonUnit -formGroup"></span>
                </div>
                <div class="form-group">
                    <span class="sds-skeletonUnit -formGroup"></span>
                </div>
                <div class="sds-exceptionStackXl">
                    <span class="sds-skeletonUnit -formGroup"></span>
                </div>
            </fieldset>
        </div>
        <div class="col-12 sds-stackSm">
            <span class="sds-skeletonUnit -floating"></span>
            <div class="sds-box -insetLg -elevated sds-stackSm">
                <h4 class="h4">Récapitulatif</h4>
                <div class="sds-stackSm">

                    <table class="sds-infoTable table -hasTotal">
                        <tbody>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Montant du prêt

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">25.000,00</span>

                                            <span class="sds-amount__currency"></span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Taux nominal

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">5,1795</span>

                                            <span class="sds-amount__currency">%</span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            TAEG

                                        </div>

                                        <a href="#!" tabindex="0" class="sds-infoDot -small" data-trigger="focus" data-container="body" data-placement="right" 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>
                                        </a>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountLg -hasTotal">
                                            <span class="sds-amount__value">3,18</span>

                                            <span class="sds-amount__currency">%</span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-label">
                                            Mensualité

                                        </div>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="sds-infoTable__cellContent">

                                        <div class="sds-amount -amountXl -hasTotal">
                                            <span class="sds-amount__value">472,47</span>

                                            <span class="sds-amount__currency"></span>

                                        </div>

                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>

                    <div class="sds-exceptionStackMd text-center">
                        <a href="" class="sds-btn -btnPrimary">

                            <span class="sds-btn__text">Faire une demande</span>

                            <span class="sds-icon sds-icon-arrownext"></span>

                        </a>
                    </div>
                </div>
            </div>
            <p class="sds-formDisclaimer -small -insetHorizMd">
                La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
            </p>
        </div>
    </div>
</div>

<!-- Default -->
<div class="{{ namespace }}embed {{ namespace }}pretPersonnelEmbed {{ namespace }}box {{ namespace }}stackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <img class="{{ namespace }}embed__logo img-fluid" src="{{ (mediaPath + "/logos/logo-bcee-secondary.svg") | path }}" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
            <fieldset class="{{ namespace }}stackLg">
				<div class="{{ namespace }}stackXs">
					<h3 class="h3">Simulation de votre prêt personnel</h3>
					<p>Simulez les mensualités de remboursement</p>
				</div>
				<div class="form-group">
					{% render "@label--form",{
						text: "Prix du bien",
						labelFor: "inputPretPersonnel-amount"
					},true %}
					{% render "@input--shadow",{
						value: "25000",
						id: "inputPretPersonnel-amount",
						hint: {
							feedback: "min. 5.000,00 € - max. 50.000,00 €"
						}
					},true %}
				</div>
				<div class="form-group">
					{% render "@label--form",{
						text: "Durée",
						labelFor: "inputPretPersonnel-range"
					},true %}
					{% render "@range",{
						classes: ["-alignToInput"],
						footer: false,
						hasIndicator: true,
						minValue: "0",
						maxValue: "8",
						currentValue: "4",
						indicatorValueType: " ans",
						id: "inputPretPersonnel-range"
					},true %}
				</div>
				<div class="{{ namespace }}exceptionStackXl">
					{% render "@checkbox",{inputName: "checkbox-age",id: "pretPersonnelAgeRadio", text: "J'ai moins de 30 ans"},true %}
				</div>
			</fieldset>
        </div>
        <div class="col-12 {{ namespace }}stackSm">
			<div class="{{ namespace }}box -insetLg -elevated {{ namespace }}stackSm">
				<h4 class="h4">Récapitulatif</h4>
				<div class="{{ namespace }}stackSm">
					{% render '@snet-info-table',{
						classes: ["-hasTotal"],
						tableItems: tableItems
					}, true %}
					<div class="{{ namespace}}exceptionStackMd text-center">
						{% render '@btn-primary--icon-right',{
							eltType: "a",
							icon: "icon-arrownext",
							text: "Faire une demande"
						}, true %}
					</div>
				</div>
			</div>
			{% render '@form-disclaimer--small',{
				modifiers: ["-small", "-insetHorizMd"]
			}, true %}
        </div>
    </div>
</div>

<!-- Loading -->
<div class="{{ namespace }}embed {{ namespace }}pretPersonnelEmbed {{ namespace }}box {{ namespace }}stackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <img class="{{ namespace }}embed__logo img-fluid" src="{{ (mediaPath + "/logos/logo-bcee-secondary.svg") | path }}" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
            <fieldset class="{{ namespace }}stackLg">
				<div class="{{ namespace }}stackXs">
					<h3 class="h3">{% render "@skeleton-unit--h3" %}</h3>
					<p>{% render "@skeleton-unit--text-body" %}</p>
				</div>
				<div class="form-group">
					{% render "@skeleton-unit--form-group" %}
				</div>
				<div class="form-group">
					{% render "@skeleton-unit--form-group" %}
				</div>
				<div class="{{ namespace }}exceptionStackXl">
					{% render "@skeleton-unit--form-group" %}
				</div>
			</fieldset>
        </div>
        <div class="col-12 {{ namespace }}stackSm">
			{% render '@skeleton-unit',{
				classes: ["-floating"]
			},true %}
			<div class="{{ namespace }}box -insetLg -elevated {{ namespace }}stackSm">
				<h4 class="h4">Récapitulatif</h4>
				<div class="{{ namespace }}stackSm">
					{% render '@snet-info-table',{
						classes: ["-hasTotal"],
						tableItems: tableItems
					}, true %}
					<div class="{{ namespace}}exceptionStackMd text-center">
						{% render '@btn-primary--icon-right',{
							eltType: "a",
							icon: "icon-arrownext",
							text: "Faire une demande"
						}, true %}
					</div>
				</div>
			</div>
			{% render '@form-disclaimer--small',{
				modifiers: ["-small", "-insetHorizMd"]
			}, true %}
        </div>
    </div>
</div>