Eurotransfert: Landing

The .js-transactionChainOperations collapses are triggered by the two .sds-btn with the data-target=".js-transactionChainOperations" attribute.
The first button with these attributes shows the operations block and hides the collapse trigger (clicked button), the second one is the close button in the revealed operations block. It closes the operations block and reveals the initial trigger again.
<div class="sds-snetFrame -hasBottomBar">
    <a href="#frameMain" class="sds-skipNavLink">
        Skip to content
    </a>

    <header class="sds-navTopbar sds-snetFrame__header">
        <div class="sds-navTopbar__container">
            <nav class="sds-navTopbar__inner navbar navbar-expand">
                <div class="sds-navTopbar__alignToMainContent">
                    <a class="sds-navTopbar__logo navbar-brand" href="#">
                        <img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
                    </a>
                </div>
                <div class="sds-navTopbar__meta sds-textHelper">
                    <span>S-Net Privé</span>
                    <span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</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 dropdown">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

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

                            </button>

                        </li>

                        <li class="sds-navTopbar__item">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

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

                            </button>
                            <span class="sds-navTopbar__itemLabel sds-textHelper">Aide</span>
                        </li>

                        <li class="sds-navTopbar__item dropdown">

                            <button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                                <div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">

                                    <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                </div>

                                <span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label With Name</span>
                                <span class="sds-iconCircle" aria-hidden="true">

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

                                </span>

                            </button>

                            <div class="sds-userMenu sds-navTopbar__userMenu dropdown-menu dropdown-menu-right">

                                <div class="sds-userMenu__header d-flex align-items-center">

                                    <div class="sds-avatar centeredBgi -avatarXl sds-userMenu__avatar">

                                        <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                    </div>

                                    <div class="sds-userMenu__headerText">
                                        <div class="h3">Jil Schmit Longname</div>
                                        <div class="sds-userMenu__headerMeta sds-textHelper">Espace privé</div>
                                    </div>
                                </div>

                                <ul class="sds-userMenu__content list-unstyled">

                                    <li class="sds-userMenu__item">

                                        <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                            <span class="font-weight-semibold">Mes données personnelles</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                </span>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="sds-userMenu__item">

                                        <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                            <span class="font-weight-semibold">Mes commandes</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-countBadge -primary">
                                                    01
                                                    <span class="sr-only">Notifications non lues</span>
                                                </span>

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                </span>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="sds-userMenu__item">

                                        <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                            <span class="font-weight-semibold">Mes documents</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                </span>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="sds-userMenu__item">

                                        <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                            <span class="font-weight-semibold">Paramètres</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                </span>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="sds-userMenu__item -borderTop">

                                        <button type="button" class="sds-userMenu__link d-flex align-items-center justify-content-between" data-toggle="modal" data-target="#modalConventions">
                                            <span class="font-weight-semibold">Changer compte</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                </span>

                                            </div>
                                        </button>
                                    </li>

                                </ul>

                                <div class="sds-userMenu__footer">
                                    <div class="h4">Votre conseiller</div>
                                    <div class="sds-userMenu__footerRow">

                                        <div class="sds-avatar centeredBgi -avatarXl">

                                            <img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">

                                        </div>
                                        <div class="sds-userMenu__footerContent">
                                            <div class="font-weight-semibold">Admir SKRIJELJ</div>
                                            <div class="sds-userMenu__footerHelperText sds-textHelperSmall">
                                                Personal Banker • Centre Financier Place de Metz
                                            </div>
                                            <div class="sds-userMenu__footerContactInfo">
                                                <a class="d-block" href="tel:+35240158302">+352 4015-8302</a>
                                                <a class="d-block" href="mailto:a.skrijelj@spuerkeess.lu">adresse.longue.skrijelj@spuerkeess.lu</a>
                                            </div>
                                        </div>
                                        <div class="sds-userMenu__footerRowButtons">
                                            <a href="tel:+35240158302" class="sds-btn -iconBtn -secondary10">

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

                                            </a>
                                            <a href="mailto:a.skrijelj@spuerkeess.lu" class="sds-btn -iconBtn -secondary10">

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

                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </li>

                        <li class="sds-navTopbar__item">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

                                <span class="sds-icon sds-icon-logout"></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 class="sds-snetFrame__menu">

                <div class="sds-snetFrame__menuList">

                    <ul class="sds-snetFrame__menuListInner list-unstyled">

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Situation financière" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Situation financière</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem -isActive -isOpen">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Paiements" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Paiements</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="My Intelligent Assistant" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">My Intelligent Assistant</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Instruments financiers" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Instruments financiers</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Mailbox" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Mailbox</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Store" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Store</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Espace fiscal" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

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

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Espace fiscal</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 class="sds-snetFrame__main" id="frameMain">
            <!-- panel header content start -->

            <div class="sds-snetFrame__mainHeader -headroom">

                <div class="sds-panelHeader -headroom">
                    <div class="sds-panelHeader__actionGroup">
                        <nav class="sds-linkTabs">
                            <ul class="sds-linkTabs__inner nav nav-tabs">

                                <li class="nav-item">
                                    <a class="nav-link active" href="">Eurotransfert</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" href="">Autres Virements</a>
                                </li>

                            </ul>
                        </nav>
                    </div>
                    <div class="sds-panelHeader__alignEnd">
                        <div class="sds-panelHeader__actionGroup">
                            <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                            </button>
                        </div>
                    </div>
                </div>

            </div>

            <!-- panel header content end -->
            <div class="sds-snetFrame__mainContent">
                <!-- main content start -->

                <div class="sds-box -insetLg">
                    <div class="row row-sm">
                        <div class="col-6">
                            <div class="sds-stepInput">
                                <div class="sds-stepInput__item">
                                    <div class="sds-stepInput__stepIcon">
                                        <div class="sds-stepInput__circle">

                                            <div class="sds-avatar centeredBgi -avatarSm -bank">

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

                                            </div>
                                        </div>
                                    </div>
                                    <div class="sds-stepInput__input">
                                        <div class="form-group">
                                            <label for="" class="sds-label -form">
                                                Compte donneur d'ordre

                                            </label>
                                            <div class="sds-input -autocomplete">
                                                <input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="">

                                                <div class="sds-input__autocomplete">
                                                    <form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
                                                        <div class="h3">Comptes de la société</div>
                                                        <div class="sds-stackSm">
                                                            <div class="h4">Comptes et cartes</div>
                                                            <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                            non visible
                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                            non visible
                                                                        </div>

                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="sds-stackSm">
                                                            <div class="h4">Epargne</div>
                                                            <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="sds-stepInput__item">
                                    <div class="sds-stepInput__stepIcon">
                                        <div class="sds-stepInput__circle">
                                            <span class="sds-iconCircle -secondary100Outline -small" aria-hidden="true">

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

                                            </span>

                                        </div>
                                    </div>
                                    <div class="sds-stepInput__input">
                                        <div class="form-group">
                                            <label for="" class="sds-label -form">
                                                Montant

                                            </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>
                                </div>
                                <div class="sds-stepInput__item">
                                    <div class="sds-stepInput__stepIcon">
                                        <div class="sds-stepInput__circle">

                                            <div class="sds-avatar centeredBgi -avatarSm -bank">

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

                                            </div>
                                        </div>
                                    </div>
                                    <div class="sds-stepInput__input">
                                        <div class="form-group">
                                            <label for="" class="sds-label -form">
                                                Compte bénéficiaire

                                            </label>
                                            <div class="sds-input -autocomplete">
                                                <input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="">

                                                <div class="sds-input__autocomplete">
                                                    <form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
                                                        <div class="h3">Comptes de la société</div>
                                                        <div class="sds-stackSm">
                                                            <div class="h4">Comptes et cartes</div>
                                                            <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                            non visible
                                                                        </div>

                                                                    </label>
                                                                </div>
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-badge badge -badgePrimary -badgeTonal">

                                                                            non visible
                                                                        </div>

                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="sds-stackSm">
                                                            <div class="h4">Epargne</div>
                                                            <div class="sds-accountSelector__dropdownSection sds-stackSm">
                                                                <div class="sds-accountCard sds-showCustomIndicatorHover">
                                                                    <label class="sds-accountCard__inner">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot  sds-accountCard__checkItem" aria-hidden="true"></span>

                                                                        <div class="sds-avatar centeredBgi -avatarSm">

                                                                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                                                        </div>

                                                                        <span class="sds-accountCard__content sds-stackXs">
                                                                            <div>
                                                                                Jil Schmit

                                                                            </div>
                                                                            <span class="sds-textHelper sds-accountCard__meta">
                                                                                compte courant
                                                                            </span>
                                                                        </span>

                                                                        <div class="sds-amount -positive -amountLg">
                                                                            <span class="sds-amount__value">{+#.###,##}</span>

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

                                                                        </div>

                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 d-flex flex-column">
                            <div class="form-group">
                                <label for="" class="sds-label -form">
                                    Date d’exécution souhaitée

                                </label>
                                <div class="sds-input -hasIcon -calendar">
                                    <input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                                    <div class="sds-input__iconRight">
                                        <span class="sds-icon sds-icon-calendar"></span>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group-xl">
                                <label for="" class="sds-label -form">
                                    Communication

                                </label>
                                <div class="sds-input -multiple">
                                    <input class="sds-input__field form-control" type="text" placeholder="Entrez une communication" value="">
                                    <input class="sds-input__field form-control" type="text" placeholder="" value="">
                                    <input class="sds-input__field form-control" type="text" placeholder="" value="">
                                    <input class="sds-input__field form-control" type="text" placeholder="" value="">

                                </div>
                            </div>
                            <div class="form-group d-flex flex-grow-1">
                                <div class="d-flex align-items-end justify-content-end flex-grow-1">
                                    <button type="button" class="sds-btn -btnSecondary">

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

                                        <span class="sds-btn__text">Ajouter transaction</span>

                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sds-frameContentBottomBar -isActive">
                    <div class="sds-frameContentBottomBar__container container">
                        <div class="d-flex">
                            <div class="sds-checkbox custom-control custom-checkbox">
                                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                <label class="custom-control-label" for="default">Débit global</label>

                            </div>
                            <a href="#!" tabindex="0" class="sds-infoDot sds-checkbox__infoDot" data-trigger="focus" data-container="body" data-placement="top" data-toggle="popover" 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>

                        <div class="sds-frameContentBottomBar__alignEnd sds-btnGroup">
                            <button type="button" class="sds-btn -btnPrimary" disabled>

                                <span class="sds-btn__text">Contrôler</span>

                            </button>
                        </div>
                    </div>
                </div>

                <!-- main content end -->
            </div>

        </main>
    </div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame" %}
{% block panelHeaderContent %}
	<div class="{{ namespace }}panelHeader -headroom">
		<div class="{{ namespace }}panelHeader__actionGroup">
			{% render "@snet-link-tabs",panelHeaderTabs,true %}
		</div>
		<div class="{{ namespace }}panelHeader__alignEnd">
			<div class="{{ namespace }}panelHeader__actionGroup">
				{% render "@icon-btn-secondary",{icon: "icon-questionmark"},true %}
			</div>
		</div>
	</div>
{% endblock %}
{% block panelMainContent %}
	<div class="{{ namespace }}box -insetLg">
		<div class="row row-sm">
			<div class="col-6">
				{% render "@snet-step-input--three-autocomplete" %}
			</div>
			<div class="col-6 d-flex flex-column">
				<div class="form-group">
					{% render "@label--form",{text: "Date d’exécution souhaitée"},true %}
					{% render "@input--calendar" %}
				</div>
				<div class="form-group-xl">
					{% render "@label--form",{text: "Communication"},true %}
					{% render "@input--multiple" %}
				</div>
				<div class="form-group d-flex flex-grow-1">
					<div class="d-flex align-items-end justify-content-end flex-grow-1">
						{% render "@btn-secondary--icon-left",{
							icon: "icon-plus",
							text: "Ajouter transaction"
						},true %}
					</div>
				</div>
			</div>
		</div>
	</div>
	{% render "@snet-frame-content-bottom-bar",{classes: ["-isActive"]},true %}
{% endblock %}