No notes defined.
<div class="sds-snetFrame -step">
<nav role="navigation">
<ul class="list-unstyled">
<li>
<a href="#sidebarNav" class="sds-skipNavigation sds-box -boxInsetMd sds-scaleInteraction text-underline">
Skip to sidebar navigation
</a>
</li>
<li>
<a href="#frameMain" class="sds-skipNavigation sds-box -boxInsetMd sds-scaleInteraction text-underline">
Skip to content
</a>
</li>
</ul>
</nav>
<header role="banner" class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
<a href="#back" class="sds-navTopbar__back">
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevronleft"></span>
</span>
<span class="sds-textHelper sds-navTopbar__backText">Retour</span>
</a>
<a class="sds-navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
</a>
<div class="sds-navTopbar__centeredContent sds-navTopbar__dropdownWrapper dropdown sds-textHelper">
<span>Commande de package</span>
</div>
<div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
<ul class="sds-navTopbar__content navbar-nav">
<li class="sds-navTopbar__item sds-navTopbar__dropdownWrapper dropdown">
<button type="button" class="sds-btn -btnSecondary -btnHasAvatar sds-navTopbar__btn" data-toggle="dropdown" aria-expanded="false">
<div class="sds-btn__avatar">
<div class="sds-avatar centeredBgi -avatarBase">
<div class="sds-avatar__text">JS</div>
</div>
</div>
<span class="sds-btn__text">
Jil Schmidt
</span>
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<div class="sds-snetFrame__menuContainer">
<nav role="navigation" aria-label="Navigation latérale" class="sds-snetFrame__menu" id="sidebarNav">
<div class="sds-snetFrame__menuList" tabindex="0">
<div class="d-flex sds-staticGapMd align-items-center" title="{Heading} + {Description}">
<div class="sds-media -mediaMd -mediaHasBg">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-staticStackXs text-truncate">
<p class="sds-headingColor sds-textSemiBold text-truncate">{Heading}</p>
<p class="sds-metaColor sds-textHelper text-truncate">{Description}</p>
</div>
</div>
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem -isChecked -isStatic">
<span href="" class="sds-snetFrame__menuLink" aria-label="step completed">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Choix du compte à lier" data-placement="right" data-boundary="window">
<span class="sds-iconBlock -iconBlockInverse sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-check"></span>
</span>
<span class="sr-only">Step 1 of 7</span>
<span class="sr-only">Step complete</span>
</span>
<span class="sds-snetFrame__menuItemText">Choix du compte à lier</span>
</span>
</li>
<li class="sds-snetFrame__menuItem -isChecked -isStatic">
<a href="" class="sds-snetFrame__menuLink" aria-label="step completed">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Choix du package" data-placement="right" data-boundary="window">
<span class="sds-iconBlock -iconBlockInverse sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-check"></span>
</span>
<span class="sr-only">Step 2 of 7</span>
<span class="sr-only">Step complete</span>
</span>
<span class="sds-snetFrame__menuItemText">Choix du package</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isActive -isStatic">
<span href="" class="sds-snetFrame__menuLink" aria-label="step progress at 50%" aria-current="step">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Choix de la carte" data-placement="right" data-boundary="window">
<span class="sds-iconBlock sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-iconBlock__progress">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path class="sds-iconBlock__progressTrack" d="M50 1 H99 V99 H1 V1 H50 Z" fill="red" stroke-width="2" />
<path d="M50 1 H99 V99 H1 V1 H50 Z" fill="none" stroke-width="2" stroke-dasharray="133.28 392" stroke-dashoffset="0" />
</svg>
</span>
<span class="sds-iconBlock__text">3</span>
</span>
<span class="sr-only">Step 3 of 7</span>
<span class="sr-only">Progress of current step is 34% percent</span>
</span>
<span class="sds-snetFrame__menuItemText">Choix de la carte</span>
</span>
</li>
<li class="sds-snetFrame__menuItem -isStatic">
<a href="" class="sds-snetFrame__menuLink" aria-label="step pending">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Récapitulatif" data-placement="right" data-boundary="window">
<span class="sds-iconBlock sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-iconBlock__text">4</span>
</span>
<span class="sr-only">Step 4 of 7</span>
<span class="sr-only">Progress of current step is 34% percent</span>
</span>
<span class="sds-snetFrame__menuItemText">Récapitulatif</span>
</a>
</li>
</ul>
<ul class="sds-snetFrame__settings list-unstyled">
<li class="sds-snetFrame__settingsItem sds-snetFrame__settingsOpenMenu">
<button type="button" class="sds-snetFrame__settingsButton">
<span class="sds-snetFrame__settingsButtonIcon sds-icon sds-icon-chevronrightdouble" data-toggle="tooltip" data-title="Toggle Menu" data-placement="right" data-boundary="window"></span>
<span class="sr-only">Déployer le menu</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
<main role="main" class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="row h-100 justify-content-center no-bottom-gutter">
<form class="col-12 col-lg-10">
<div class="sds-sectionForm">
<div class="sds-sectionForm__container -isActive">
<div class="sds-box -boxInsetLg sds-sectionForm__item sds-stackMd">
<h2 class="sds-sectionForm__itemHeading h3">Configurez votre carte</h2>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="row align-items-start">
<div class="col-12 col-lg-6 col-xxl-5">
<div class="sds-box -boxSunken -boxInsetXl sds-stackXs d-flex flex-column align-items-center text-center">
<div class="sds-media -mediaXl">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-creditcardhorizontal.svg" alt="">
</div>
<p class="h4">Visa Classic <span aria-hidden="true">•</span> Gratuit</p>
<a href="#" class="sds-btn -btnSecondary -btnInverse -btnSmall sds-exceptionStackMd">
<span class="sds-btn__text">
En savoir plus
</span>
</a>
</div>
</div>
<div class="col-12 col-lg-6 col-xxl-7">
<div class="form-group">
<label for="orderFlowCardName" class="sds-label -labelForm">
Nom affiché
</label>
<div class="sds-select">
<select id="orderFlowCardName" class="sds-select form-control" disabled>
<option selected value="opt-0">{Value}</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="orderFlowAddress" class="sds-label -labelForm">
Adresse d’envoi pour la carte & PIN
</label>
<div class="d-flex align-items-center sds-staticInlineSm">
<div class="sds-textarea flex-grow-1">
<div class="sds-textarea__inner">
<textarea class="form-control" id="orderFlowAddress" rows="2" placeholder="" readonly>12, RUE DES MESANGES
1234 LUXEMBOURG</textarea>
</div>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span aria-hidden="true" class="sds-icon sds-icon-edit"></span>
<span class="sr-only">Modifier l’adresse</span>
</button>
</div>
</div>
<div class="form-group d-flex align-items-end sds-staticInlineSm">
<div class="sds-input sds-inputPhone flex-grow-1 js-input-phone-intl">
<div class="d-flex align-items-baseline">
<label for="orderFlowPhone" class="sds-label -labelForm sds-inputPhone__label">
Numéro de mobile
</label>
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="" data-toggle="popover" title="Numéro de mobile" data-content="Ce numéro sera utilisé pour les notifications liées à votre carte.">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<input type="tel" id="orderFlowPhone" class="form-control" placeholder="" value="123 456 789" autocomplete="tel" readonly />
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span aria-hidden="true" class="sds-icon sds-icon-edit"></span>
<span class="sr-only">Modifier le numéro de mobile</span>
</button>
</div>
<div class="form-group">
<div class="d-flex align-items-baseline">
<label for="orderFlowLimit" class="sds-label -labelForm">
Limite de paiement mensuelle
</label>
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="" data-toggle="popover" title="Limite de paiement" data-content="Montant maximal des paiements par mois avec cette carte.">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<div class="sds-select">
<select id="orderFlowLimit" class="sds-select form-control">
<option selected value="opt-0">250,00 €</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-btn__text">
Retour
</span>
</button>
</li>
<li>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">
Continuer
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame--step" %}
{% block panelMainContent %}
<div class="row h-100 justify-content-center no-bottom-gutter">
<form class="col-12 col-lg-10">
<div class="{{ namespace }}sectionForm">
<div class="{{ namespace }}sectionForm__container -isActive">
<div class="{{ namespace }}box -boxInsetLg {{ namespace }}sectionForm__item {{ namespace }}stackMd">
<h2 class="{{ namespace }}sectionForm__itemHeading h3">Configurez votre carte</h2>
<div class="{{ namespace }}sectionForm__itemBody {{ namespace }}stackMd">
<div class="row align-items-start">
<div class="col-12 col-lg-6 col-xxl-5">
<div class="{{ namespace }}box -boxSunken -boxInsetXl {{ namespace }}stackXs d-flex flex-column align-items-center text-center">
{% render "@media--xl", {img: cardIllustration, internalResource: false}, true %}
<p class="h4">Visa Classic <span aria-hidden="true">•</span> Gratuit</p>
{% render "@btn-secondary-inverse--small", {
eltType: "a",
href: "#",
text: "En savoir plus",
classes: [namespace + "exceptionStackMd"]
}, true %}
</div>
</div>
<div class="col-12 col-lg-6 col-xxl-7">
<div class="form-group">
{% render "@label--form", {labelFor: "orderFlowCardName", text: "Nom affiché"}, true %}
{% render "@select--disabled", {
id: "orderFlowCardName",
options: {"0": {value: "{Value}", state: "selected"}, "1": false, "2": false}
}, true %}
</div>
<div class="form-group">
{% render "@label--form", {labelFor: "orderFlowAddress", text: "Adresse d’envoi pour la carte & PIN"}, true %}
<div class="d-flex align-items-center {{ namespace }}staticInlineSm">
{% render "@input-textarea--readonly", {
labelFor: "orderFlowAddress",
rows: "2",
value: deliveryAddress,
parentClasses: ["flex-grow-1"]
}, true %}
{% render "@icon-btn-secondary--ghost", {icon: "icon-edit", action: "Modifier l’adresse"}, true %}
</div>
</div>
<div class="form-group d-flex align-items-end {{ namespace }}staticInlineSm">
{% render "@input-phone--readonly", {
labelFor: "orderFlowPhone",
labelText: "Numéro de mobile",
infoDotOptions: {
title: "Numéro de mobile",
text: "Ce numéro sera utilisé pour les notifications liées à votre carte.",
classes: [namespace + "label__infoDot", "-small"]
},
value: "123 456 789",
placeholder: "",
parentClasses: ["flex-grow-1"]
}, true %}
{% render "@icon-btn-secondary--ghost", {icon: "icon-edit", action: "Modifier le numéro de mobile"}, true %}
</div>
<div class="form-group">
{% render "@label--info-dot", {
labelFor: "orderFlowLimit",
text: "Limite de paiement mensuelle",
infoDotOptions: {title: "Limite de paiement", text: "Montant maximal des paiements par mois avec cette carte."}
}, true %}
{% render "@select", {
id: "orderFlowLimit",
options: {"0": {value: "250,00 €", state: "selected"}, "1": false, "2": false}
}, true %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sectionForm__itemFooter">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@btn-secondary", {text: "Retour"}, true %}
</li>
<li>
{% render "@btn-primary", {text: "Continuer"}, true %}
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
{% endblock %}