User: Signup

<div class="o-container u-size-full-view u-flex u-column">

    <header id="c-header" class="c-header u-py-medium u-py-medium@md c-header--vanilla c-header--inverse u-z-high u-relative  u-relative u-flex u-justify-center u-size-full">
        <a class="u-flex u-justify-center" href="/">

            <svg class="c-brand 
  c-brand--resize-small 
   
   
  " viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg">

                <path d="M22.5 40.6l1.5 8.5h10.5L24.5.9H10L0 49.1h10.2l1.4-8.5h10.9zM278.3 0c11 0 17.7 6.6 17.7 25 0 18.3-6.6 25-17.7 25-11 0-17.7-6.5-17.7-25 0-18.3 6.6-25 17.7-25zM53.2 0c9.7 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.4-6.8-4.6 0-6.8 4-6.8 14.5 0 11.9 2.5 16.3 7.8 16.3 4 0 5.8-2.2 6.3-4.3v-4.8h-7v-9.5h16.4V49h-9.2v-3h-.2a11 11 0 01-8.6 3.6c-8.3 0-15.9-5.7-15.9-25C35.6 6.2 42.6 0 53.2 0zm86.7 0c9.8 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.3-6.8-4.7 0-7 4-7 14.5 0 11.9 2.6 16.3 8 16.3 3.9 0 5.7-2.2 6.3-4.3v-4.8h-7v-9.5h16.3V49h-9.1v-3h-.2a11 11 0 01-8.6 3.6c-8.4 0-16-5.7-16-25 0-18.6 7-24.7 17.6-24.7zM89.1.9c9.5 0 14.4 6.5 14.4 15.9 0 5.9-2.2 10.5-6.5 12.7l7.6 19.6H93.3l-6-17.4-1.4.1h-1.4v17.3h-10V.9zm29.1 0v48.2h-10V.9h10zm69.3 0v9.6h-16.3v9.3h12.2V29h-12.2v10.4H188V49h-26.7V.9h26.3zm15.2 0l12.9 28h.2V.9h9.6v48.2h-10.2l-12.9-27h-.2v27h-9.6V.9h10.2zm56.2 0v9.6h-9.8V49h-10V10.5h-9.8V.9h29.6zm19.4 8.7c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5zm-261.1.8l1.5 9 2.1 12h-7.5l2.1-12.1 1.5-8.9h.3zm71.2 0h-4v13h4.2c2.9 0 4.8-2 4.8-6.5 0-4-1.7-6.5-5-6.5z" class="c-brand__edition"></path>
                <path d="M356.8 0c11 0 17.8 6.6 17.8 25 0 18.3-6.6 25-17.8 25-11 0-17.8-6.5-17.8-25 0-18.3 6.7-25 17.8-25zm-44.6.9l13 28h.1V.9h9.6v48.2h-10.2l-12.9-27h-.2v27H302V.9h10.2zm93.8 0v9.6h-10V49h-10V10.5h-9.9V.9H406zm14 0v48.2h-10.1V.9h10zm33 0V11l-13.4 22.2-3.7 6 .1.3h17.2v9.6h-28.7v-9.7L438.8 16l3.3-5.4-.1-.2h-17V.9h28zm14.9 0v48.2h-10.1V.9h10zm31.8 0v9.6h-16.4v9.3h12.2V29h-12.2v10.4H500V49h-26.8V.9h26.5zM356.8 9.6c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5z" class="c-brand__network"></path>

            </svg>

        </a>
    </header>

    <div class="c-tab u-p-none u-m-auto">
        <!-- tabs module -->
        <input type="radio" value="intro" id="intro-form-radio" class="u-none" name="c-tabs__choice" checked>
        <div id="intro-form-tab" class="c-tab__content u-size-1-2@md u-pl-base u-pr-base u-pl-none@md u-pr-none@md u-m-auto">
            <!-- email form -->

            <form id="email-signup-form" class="fw__wrapper u-mb-large" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" action="myPage.php" novalidate>
                <fieldset data-toggle="email-signup-fw__step" class="fw__inputs o-divider email-signup-fw__step u-pl-none u-pr-none u-mb-medium">

                    <!-- hgroup -->
                    <div class="u-text-center u-mb-large">
                        <h1 class="u-heading-09">Crea il tuo profilo personale</h1>
                        <p class="u-body-03 u-mb-large u-color-secondary">Scegli una modalità di registrazione</p>
                    </div>
                    <!-- end hgroup -->
                    <!-- social logins -->
                    <div class="u-flex u-row">
                        <div class="u-mb-base u-wrap-row">
                            <a href="user--edit2021" class="c-btn c-btn--google u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-google"></use>
                                </svg>
                                <span class="u-none u-inline-block@sm">Google</span>
                            </a>
                        </div>
                        <div class="u-mb-base u-mr-small u-ml-small u-wrap-row">
                            <a href="user--edit2021" class="c-btn c-btn--facebook u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use>
                                </svg>
                                <span class="u-none u-inline-block@sm">Facebook</span>
                            </a>
                        </div>
                        <div class="u-mb-base u-wrap-row">
                            <a href="user--edit2021" class="c-btn c-btn--apple u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
                                <svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-apple"></use>
                                </svg>
                                <span class="u-none u-inline-block@sm">Apple</span>
                            </a>
                        </div>
                    </div>
                    <!-- end social logins -->
                    <p class="o-text-overline u-text-center">
                        <span class="u-body-04 o-text u-color-light">oppure registrati con la tua email</span>
                    </p>
                    <!-- native login -->
                    <div class="u-flex u-column u-row@md">
                        <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Email*</label>

                                <input class=" u-block u-size-full" type="text" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                        <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Password*</label>

                                <input class=" u-block u-size-full" type="password" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                    </div>
                    <div class="u-flex u-column u-row@md">
                        <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Nome*</label>

                                <input class=" u-block u-size-full" type="text" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                        <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Cognome*</label>

                                <input class=" u-block u-size-full" type="text" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                    </div>
                    <div class="u-mb-base ">
                        <div class="">

                            <label class="u-label-04 u-color-base" for="">Indirizzo*</label>

                            <input class=" u-block u-size-full" type="text" placeholder="">

                        </div>

                        <!-- TODO: REVIEW ICON POSITION -->

                    </div>
                    <div class="u-my-large">
                        <strong class="u-mb-base">Autorizzo al trattamento dei miei dati per:</strong>

                        <div class="c-accordion c-accordion--borderless u-label-07">
                            <p class="u-mb-base">
                                Ricevere informazioni promozionali e sondaggi di opinione via e-mail, sms e notifiche da parte di Citynews S.p.A.&#39;
                            </p>
                        </div>
                        <div class="u-flex u-column u-row@md u-mb-base">
                            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Do il consenso</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                            <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                        </div>

                        <div class="c-accordion c-accordion--borderless u-label-07">
                            <p class="u-mb-base">
                                Comunicare i miei dati a società terze per ricevere informazioni promozionali e sondaggi di opinione via e-mail, sms e notifiche
                            </p>
                        </div>
                        <div class="u-flex u-column u-row@md u-mb-base">
                            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Do il consenso</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                            <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                        </div>

                        <div class="c-accordion c-accordion--borderless u-label-07">
                            <p class="u-mb-base">
                                Effettuare analisi di profilazione per migliorare l’offerta e i servizi del sito in linea con le mie preferenze e i miei interessi
                            </p>
                        </div>
                        <div class="u-flex u-column u-row@md u-mb-base">
                            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Accetto</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                            <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
                                <label class="c-form-radio">

                                    <span class="u-label-04 u-color-base u-inline-block" for="">Non accetto</span>

                                    <input type="radio" checked="checked" name="radio">
                                    <span class="c-form-radio__mark"></span>
                                </label>
                            </div>
                        </div>

                    </div>
                    <p class="u-label-07 u-color-secondary u-block u-mb-large">
                        Completando la registrazione dichiaro di essere maggiorenne e di aver preso visione dell’ <a class="o-link-primary" href="https://citynews.it/privacy#gdpr&_ga=2.195002985.558624410.1646066405-2053839960.1623412359">Informativa Privacy</a> redatta ai sensi del Regolamento UE 679/2016 e di accettare i termini e le <a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359">condizioni del servizio</a>.
                    </p>
                    <div class="fw__inputs o-divider__error">
                        <p class="fw__inputs o-divider__error--message"></p>
                    </div>
                    <div class="u-mt-large">

                        <div class="u-flex u-items-center">

                            <div class="u-size-full u-size-1-2@md u-text-right">
                                <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Avanti →" onclick="next()" />
                            </div>

                        </div>

                    </div>
                    <!-- end native login -->
                    <div class="u-text-center u-mt-large u-pl-large u-pr-large u-pl-none@md u-pr-none@md">
                        <span class="u-label-07 u-color-secondary u-block u-mb-small">
                            Sei già registrato?
                            <a class="o-link-primary" href="user--login2021">Accedi col tuo profilo</a>
                        </span>
                        <span class="u-label-07 u-color-secondary u-block u-mb-small">
                            Non hai ancora attivato il tuo profilo?
                            <a class="o-link-primary" href="user--activate2021">Attiva il tuo profilo</a>
                        </span>
                    </div>
                </fieldset>
                <fieldset data-toggle="email-signup-fw__step" class="fw__inputs o-divider email-signup-fw__step u-pl-none u-pr-none u-mb-medium">
                    <!-- page hgroup -->
                    <div class="u-mb-large">
                        <h2 class="u-heading-09 u-text-center">Inserisci il codice di attivazione</h2>
                        <p class="u-body-03 u-mb-large u-text-center">
                            Inserisci il codice di attivazione che hai ricevuto per email.<br />
                            Non hai ancora ricevuto il codice? Richiedi un nuovo <a class="o-link-primary" href="#">codice di attivazione</a>
                        </p>
                    </div>
                    <!-- end page hgroup -->
                    <!-- form activate -->
                    <div class="u-mb-base ">
                        <div class="">

                            <label class="u-label-03 c-form-label u-color-base" for="">Codice di attivazione*</label>

                            <div class="u-flex">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall " data-label="placeholderfieldLabel">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
                                <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center" data-label="placeholderfieldLabel">
                            </div>

                        </div>

                        <script>
                            const inputElements = [...document.querySelectorAll('input.code-input')]
                            inputElements.forEach((ele, index) => {
                                ele.addEventListener('keydown', (e) => {
                                    if (e.keyCode === 8 && e.target.value === '') inputElements[Math.max(0, index - 1)].focus()
                                })
                                ele.addEventListener('input', (e) => {
                                    const [first, ...rest] = e.target.value
                                    e.target.value = first ?? ''
                                    if (index !== inputElements.length - 1 && first !== undefined) {
                                        inputElements[index + 1].focus()
                                        inputElements[index + 1].value = rest.join('')
                                        inputElements[index + 1].dispatchEvent(new Event('input'))
                                    }
                                })
                            })
                        </script>
                    </div>
                    <div class="fw__inputs o-divider__error">
                        <p class="fw__inputs o-divider__error--message"></p>
                    </div>
                    <div class="u-mt-large">

                        <div class="u-flex u-items-center">

                            <div class="u-size-full u-size-1-2@md ">
                                <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
                            </div>

                            <div class="u-size-full u-size-1-2@md u-text-right ">
                                <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center u-size-full" type="submit" value="Registrati" />
                            </div>

                        </div>

                    </div>
                    <!-- end form activate -->
                </fieldset>
                <fieldset data-toggle="email-signup-fw__step" class="fw__inputs o-divider email-signup-fw__step u-pl-none u-pr-none u-mb-medium">
                    <!-- page hgroup -->
                    <div class="u-mb-large">
                        <h2 class="u-heading-03 u-text-center">Completa il tuo profilo personale</h2>
                        <p class="u-mb-large u-text-center">Modifica le informazioni del profilo personale</p>
                    </div>
                    <!-- end page hgroup -->
                    <!-- complete profile form -->
                    <div class="u-mb-xlarge u-flex u-items-center u-column ">
                        <div class="">

                            <div class="c-form-avatar u-relative ">
                                <svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
                                    <defs>
                                        <clipPath id="mask" clipPathUnits="objectBoundingBox">
                                            <path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <input class="u-none" type="file" name="image" accept="image/*" />
                                <div class="c-form-avatar__mask u-size-full"></div>
                                <div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
                                    <svg class="o-icon o-icon--md o-link-text">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
                                    </svg>
                                </div>
                            </div>

                            <script>
                                const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
                                const FILE_INPUT = document.querySelector("input[type=file]");
                                const AVATAR = document.querySelector(".c-form-avatar__mask");
                                UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
                                FILE_INPUT.addEventListener("change", event => {
                                    const file = event.target.files[0];
                                    const reader = new FileReader();
                                    reader.readAsDataURL(file);
                                    reader.onloadend = () => {
                                        AVATAR.setAttribute("aria-label", file.name);
                                        AVATAR.style.background = `url(${reader.result}) center center/cover`;
                                    };
                                });
                            </script>

                        </div>
                        <div class="u-mt-base u-mt-none@sm u-ml-base@sm">
                            <h3 class="u-title-05 u-mb-xsmall">Nome Cognome</h3>
                            <span class="u-label-07 u-color-secondary u-block">email@mailservice.com</span>
                        </div>
                    </div>
                    <div class="u-mb-base u-size-full u-size-1-2 ">

                        <label class="u-label-04 u-color-base u-inline-block" for="">Sesso</label>

                        <select class=" u-block u-size-full" name="select-name" id="select-id">

                            <option>option 1</option>

                            <option>option 2</option>

                            <option>option 3</option>

                            <option>option 4</option>

                        </select>

                    </div>
                    <div class="u-mb-base ">
                        <div class="">

                            <label class="u-label-04 u-color-base" for="">Anno di nascita</label>

                            <input class=" u-block u-size-full" type="text" placeholder="">

                        </div>

                        <!-- TODO: REVIEW ICON POSITION -->

                    </div>
                    <div class="u-flex u-column u-row@md ">
                        <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall@md  ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Impiego</label>

                                <input class=" u-block u-size-full" type="text" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                        <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md  ">
                            <div class="">

                                <label class="u-label-04 u-color-base" for="">Settore</label>

                                <input class=" u-block u-size-full" type="text" placeholder="">

                            </div>

                            <!-- TODO: REVIEW ICON POSITION -->

                        </div>
                    </div>
                    <div class="u-mt-large">

                        <div class="u-flex u-items-center">

                            <div class="u-size-1-2 ">
                                <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Salta passaggio" onclick="next()" />
                            </div>

                            <div class="u-size-full u-size-1-2@md u-text-right">
                                <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Completa profilo" onclick="next()" />
                            </div>

                        </div>

                    </div>
                    <!-- end complete profile form -->
                </fieldset>
                <section data-toggle="email-signup-fw__step" class="fw__result email-signup-fw__step">
                    <div class="u-mb-large">
                        <h2 class="u-heading-09 u-text-center">Grazie per la tua iscrizione</h2>
                        <p class="u-body-03 u-mb-large u-text-center">Ti ringraziamo per la tua iscrizione...</p>
                        <div class="u-mb-base">
                            <a href="homepage--cover" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Leggi
                                le ultime notizie</a>
                        </div>
                        <div class="u-mb-base">
                            <a href="#" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Invia una segnalazione</a>
                        </div>
                    </div>

                    <!-- subscription CTA -->
                    <p class="o-text-overline u-text-center">
                        <span class="o-text">Abbonati</span>
                    </p>
                    <a href="#" class="u-text-center u-block o-link-primary u-bg-primary u-bordered">
                        spotlight banner
                    </a>
                    <!-- end subscription CTA -->

                    <!-- app CTA -->
                    <p class="o-text-overline u-text-center">
                        <span class="o-text">Scarica l'app</span>
                    </p>
                    <a href="https://www.romatoday.it/~shared/do/api/mobile-app/get/?campaign=user_signup">
                        <div class="u-flex u-row@md">
                            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall">
                                <img class="u-size-full" src="/assets/images/site/app/google_play_store.svg" alt="googlePlayStoreImg">
                            </div>
                            <div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall">
                                <img class="u-size-full" src="/assets/images/site/app/ios_app_store.svg" alt="iosAppStoreImg">
                            </div>
                        </div>
                    </a>
                    <!-- end app CTA -->

                    <div id="results" class="u-mb-large u-mt-large"></div>
                </section>
            </form>

            <script>
                window.onload = function() {
                    var stepIndex = 0;
                }
                // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
                // const stepElements = document.querySelector('[data-toggle-step]');
                var stepElements = document.getElementsByClassName("email-signup-fw__step");
                var form = document.getElementById("email-signup-form");
                var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
                // Initialise the form
                function init() {
                    // Reset the step
                    stepIndex = 0;
                    // Clear all fields
                    form.reset();
                    toggleBreadcrumbsStep();
                    showCurrentStep();
                    breadcrumbsItems.classList.add("c-stepper__element--active");
                }
                // Indicate the current step with breadcrumbs
                function toggleBreadcrumbsStep() {
                    Array.from(breadcrumbsItems).forEach(function(el, index) {
                        if (index <= stepIndex) {
                            el.classList.add("c-stepper__element--active");
                        } else {
                            el.classList.remove("c-stepper__element--active");
                        }
                    });
                }
                // Show the current step and hide the rest
                function showCurrentStep() {
                    Array.from(stepElements).forEach(function(el, index) {
                        if (index !== stepIndex) {
                            el.classList.add("u-none");
                        } else {
                            el.classList.remove("u-none");
                        }
                    });
                }
                // Next step action, all fields in current step must be validated before proceed to next step.
                function next() {
                    const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                    // Increment step
                    stepIndex++;
                    toggleBreadcrumbsStep();
                    showCurrentStep();
                }
                // Back button action to navigate 1 step back
                function back() {
                    // Clear all fields in current step
                    const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                    Array.from(fields).forEach(function(field) {
                        const tagName = field.tagName;
                        if (tagName.localeCompare("INPUT") === 0) {
                            field.value = '';
                        } else if (tagName.localeCompare("SELECT") === 0) {
                            field.selectedIndex = 0;
                        }
                    });
                    // Decrement step
                    stepIndex--;
                    toggleBreadcrumbsStep();
                    showCurrentStep();
                }
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                    // all fields in current step must be validated before submission.
                    // Prepare the result in next view
                    showResult();
                    // Navigate to result
                    stepIndex++;
                    // toggleBreadcrumbsStep();
                    showCurrentStep();
                }, false);

                function showResult() {
                    const resultsContainer = document.getElementById("results");
                    // Make sure the result page is empty
                    resultsContainer.innerHTML = "";
                    const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
                    // List out all data
                    fields.forEach(field => {
                        const fieldLabel = field.getAttribute("data-label");
                        const fieldValue = field.value;
                        const resultItem = document.createElement("li");
                        resultItem.setAttribute("class", "fw__result__item");
                        resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
                        resultsContainer.append(resultItem);
                    });
                }
                init();
            </script>
            <!-- end email form -->
        </div>
        <!-- end tabs module -->
    </div>

    <footer class="c-footer c-footer--vanilla u-py-small u-py-medium@md u-mt-auto">
        <div class="u-gap-medium o-divider u-flex u-column u-items-center">
            <div class="u-flex u-column u-row@md u-gap-small u-text-center u-label-08 u-color-light">
                <span> © 2024 Citynews SpA - P.IVA 10786801000 </span>
                <span> <a href=https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359>Termini e Condizioni</a> </span>
                <span> <a href=https://citynews.it/condizioni-particolari#_ga=2.5143347.1498799164.1669298142-1368784910.1664177783>Condizioni particolari </a></span>
                <span> <a href=https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359>Privacy Policy</a> </span>
                <span> <a href=https://www.citynews.it/gruppo/compliance />Modello 231 e Codice Etico</a></span>
            </div>
            <a class="u-mr-base" href="">
                <svg class="c-brand-cn" width="176" height="46">
                    <use xlink:href="#brand-citynews"></use>
                </svg>
            </a>
        </div>
    </footer>

</div>
<div class="o-container u-size-full-view u-flex u-column">
		{% if type == "login" %}
			{% render "@header--vanilla" %}
					{% render "@login", {
						type: type,
						mode: mode,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
				
			{% render "@footer--vanilla" %}	
		{% elif type == "logout" %}
			{% render "@header--vanilla" %}			
				
					{% render "@logout", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
					
			{% render "@footer--vanilla" %}	
		{% elif type == "signup" %}
			{% render "@header--vanilla" %}			
				
					{% render "@signup", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel,
						methods: methods
					}, true %}
				
			{% render "@footer--vanilla" %}	
		{% elif type == "buysignup" %}
			{% render "@header--vanilla" %}			
				
					{% render "@buysignup", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel,
						methods: methods
					}, true %}
					
			{% render "@footer--vanilla" %}	
		{% elif type == "activate" %}
			{% render "@header--vanilla" %}			
				
					{% render "@activate", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
					
			{% render "@footer--vanilla" %}	
		{% elif type == "recovery" %}
			{% render "@header--vanilla" %}			
				
					{% render "@recovery", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
					
			{% render "@footer--vanilla" %}	
		{% elif type == "delete" %}
			{% render "@header--vanilla" %}			
				
					{% render "@delete", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
					
			{% render "@footer--vanilla" %}	
		{% elif type == "view" %}
			{% render "@header--vanilla" %}			
				
					{% render "@view", {
						type: type,
						page_title: page_title,
						page_subtitle: page_subtitle,
						actionLabel: actionLabel
					}, true %}
					
			{% render "@footer--vanilla" %}	

		{% else %}
			{# {% render "@user--edit", {
				type: type,
				page_title: page_title,
				page_subtitle: page_subtitle,
				actionLabel: actionLabel,
				userSettingsSections: userSettingsSections
			}, true %}	 #}

			{% render "@user--profile", {
				type: type,
				page_title: page_title,
				page_subtitle: page_subtitle,
				actionLabel: actionLabel,
				userSettingsSections: userSettingsSections
			}, true %}
		{% endif %}
</div>
{
  "sidebarImg": "/assets/images/site/cities/roma_desktop.jpg",
  "hName": "RomaToday",
  "hBrand": "/assets/images/site/brands_orizzontal/Property 1=RomaToday.svg",
  "gBrand": "/assets/images/site/horizontal-white-full@2x.png",
  "type": "signup",
  "zoneRequired": false,
  "actionLabel": "Registrati",
  "errors": false,
  "page_title": "Crea il tuo profilo personale",
  "page_subtitle": "Scegli una modalità di registrazione",
  "methods": [
    {
      "item": null,
      "slug": "creditcard",
      "name": "Credit card",
      "icon": "/assets/images/site/payments/Mastercard-Small.png",
      "checked": true,
      "type": [
        {
          "item": null,
          "slug": "private",
          "name": "Privati",
          "checked": true
        },
        {
          "item": null,
          "slug": "companies",
          "name": "Aziende"
        }
      ]
    },
    {
      "item": null,
      "slug": "paypal",
      "name": "Paypal",
      "icon": "/assets/images/site/payments/PayPal-Small.png",
      "type": [
        {
          "item": null,
          "slug": "private",
          "name": "Privati",
          "checked": true
        },
        {
          "item": null,
          "slug": "companies",
          "name": "Aziende"
        }
      ]
    }
  ]
}

No notes defined.