<beeathy-test>
    <nav if="{ enable_top_buttons }" data-type="scroll-buttons">
        <button data-type="back" tabindex="0" class="{ hidden: (current_step <= 0) }" onclick="{goBack}"><span class="icons8-simple-arrow"></span></button>
        <button data-type="forward" tabindex="6" class="{ hidden: !(current_step < (steps.length-1) && Number(filled_steps.indexOf(steps[current_step])) !== -1) }" onclick="{goForward}"><span class="icons8-arrow-pointing-to-right"></span></button>
    </nav>
    <ol data-type="scroller" data-completed="{ filled_steps.length }">
        <li each="{v, i in steps}" class="{active: (current_step === i), completed: (i < current_step), await: (i > current_step && filled_steps.length > i)}"></li>
    </ol>



    <div ref="wrapper" data-type="wrapper">
        <div data-type="slider" ref="slider" style="-moz-transform: translate(-{ current_step * 100 }%, 0); -webit-transform: translate(-{ current_step * 100 }%, 0); transform: translate(-{ current_step * 100 }%, 0);">
            <div class="slide {active: (steps[current_step] === 'info')}" data-type="info">
                <h6>Due dati su di Voi</h6>
                <div class="row">
                    <div class="twelve columns">
                        <div class="avatar">
                            <img src="{ gender[collectedData.sesso] }" width="100" alt="Sesso"/>
                            <label for="man">Sesso <sup>*</sup></label>
                            <span class="icons8-drop-down-arrow select-arrow"></span>
                            <select name="sesso" onchange="{ setGender }" tabindex="{ (steps[current_step] === 'info') ? 1 : '-1'}" disabled="{lock_user ? 'disabled' : ''}">
                                <option value="donna" selected="{collectedData.sesso === 'donna' ? 'selected' : ''}">Donna</option>
                                <option value="uomo" selected="{collectedData.sesso === 'uomo' ? 'selected' : ''}">Uomo</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="six columns">
                        <label>Nome <sup>*</sup></label>
                        <input type="text" placeholder="Nome *" value="{ collectedData.nome || '' }" name="name" required pattern="[a-zA-Z\s\W]\{2,\}" class="u-full-width" data-property="nome" onchange="{ setUserInput }"  onkeydown="{ waitForReturn }" tabindex="{ (steps[current_step] === 'info') ? 2 : '-1'}" disabled="{lock_user ? 'disabled' : ''}">
                        <span class="error" aria-live="polite">Nome troppo corto</span>
                    </div>
                    <div class="six columns">
                        <label>Cognome <sup>*</sup></label>
                        <input type="text" placeholder="Cognome *" name="surname" value="{ collectedData.cognome || '' }" required pattern="[a-zA-Z\s\W]\{2,\}" class="u-full-width" data-property="cognome" onchange="{ setUserInput }"  onkeydown="{ waitForReturn }" tabindex="{ (steps[current_step] === 'info') ? 3 : '-1'}" disabled="{lock_user ? 'disabled' : ''}">
                        <span class="error" aria-live="polite">Cognome troppo corto</span>
                    </div>
                    <div class="twelve columns">
                        <label>Email <sup>*</sup></label>
                        <input type="email" placeholder="Email *" name="email" value="{ collectedData.email || '' }"  required class="u-full-width" data-property="email" onchange="{ setUserInput }" onkeydown="{ waitForReturn }" tabindex="{ (steps[current_step] === 'info') ? 4 : '-1'}" disabled="{lock_user ? 'disabled' : ''}">
                        <span class="error" aria-live="polite">Email non valida</span>
                    </div>
                </div>

            </div>

            <div class="slide {active: (steps[current_step] === 'data')}" data-type="data">
                <h6>Dati antropometrici</h6>

                <div class="row requireds">
                    <div class="four columns">
                        <label>Età <sup>*</sup></label>
                        <input type="number" value="{ collectedData.eta || '' }" name="age"pattern="\d+" required ref="eta" step="1" min="13" max="99" class="number" data-property="eta" onchange="{ setUserInput }" onkeydown="{ waitForReturn }" placeholder="YY"  tabindex="{ (steps[current_step] === 'data') ? 1 : '-1'}">
                        <span class="error" aria-live="polite">Il valore dell'età non è valido:<br>min. 13 e max 99</span>
                    </div>

                    <div class="four columns">
                        <label>Peso <sup>*</sup></label>
                        <input type="number" value="{ collectedData.peso || '' }" name="weight" required pattern="\d+\.?\d+?" ref="peso" step="0.1" min="10" max="380" class="number" data-property="peso" onkeydown="{ waitForReturn }" onchange="{ setUserInput }" placeholder="Kg"  tabindex="{ (steps[current_step] === 'data') ? 2 : '-1'}">
                        <span class="error" aria-live="polite">Il peso non è valido:<br>min 10, max 380</span>
                    </div>

                    <div class="four columns">
                        <label>Altezza <sup>*</sup></label>
                        <input type="number" name="height" value="{ collectedData.altezza || '' }" required pattern="\d+\.?\d+?" ref="altezza" step="0.1" min="40" max="250" class="number" data-property="altezza" onkeydown="{ waitForReturn }" onchange="{ setUserInput }" placeholder="cm"  tabindex="{ (steps[current_step] === 'data') ? 3 : '-1'}">
                        <span class="error" aria-live="polite">L'altezza non valida:<br> min. 40 e max 250</span>
                    </div>
                </div>

                <div class="row optionals">
                    <div class="four columns">
                        <label>Fianchi</label>
                        <input type="number" step="0.1" name="fianchi" required pattern="\d+\.?\d+?" min="25" class="number" value="{collectedData.misure.fianchi || ''}" data-property="misure.fianchi" tabindex="{ (steps[current_step] === 'data') ? 4 : '-1'}" placeholder="cm" onkeydown="{ waitForReturn }" onchange="{ setUserInput }">
                        <span class="error" aria-live="polite">Valore non valido</span>
                    </div>
                    <div class="four columns">
                        <label>Vita</label>
                        <input type="number" step="0.1" name="vita" required pattern="\d+\.?\d+?" placeholder="cm" min="25" class="number" value="{collectedData.misure.vita || ''}" data-property="misure.vita" tabindex="{ (steps[current_step] === 'data') ? 5 : '-1'}"  placeholder="cm" onkeydown="{ waitForReturn }" onchange="{ setUserInput }">
                        <span class="error" aria-live="polite">Valore non valido</span>
                    </div>
                    <div class="four columns">
                        <label>Collo</label>
                        <input type="number" step="0.1" name="collo" required pattern="\d+\.?\d+?" min="8" class="number" value="{collectedData.misure.collo || ''}" data-property="misure.collo" tabindex="{ (steps[current_step] === 'data') ? 6 : '-1'}" placeholder="cm" onkeydown="{ waitForReturn }" onchange="{ setUserInput }">
                        <span class="error" aria-live="polite">Valore non valido</span>
                    </div>
                </div>

                <!--<div class="row navbar centered">
                    <p>
                        Volete aggiungere altri dati (opzionali) come il giro vita, la circonferenza dei fianchi e delle coscie?
                        <span class="small-button" data-popup="data" onclick="{ togglePopup }">Cliccate qui!</span>
                    </p>
                </div>-->

                <div class="row questions">
                    <div class="twelve columns patologie">
                        <p class="evidence">
                            Soffri di patologie croniche?
                            <small>Es. Anemie, patologie cardiache, ipertensione, osteoporosi o altro</small>
                        </p>
                        <span show="{ collectedData['patologie'] && collectedData['patologie'].length > 0 }" data-property="patologie" onclick="{ setUserInput }" class="edit"><svg class="icon icon-natural"><use xlink:href="#icon-edit"></use></svg></span>
                        <div class="toggler inline">
                            <input class="toggler-input" ref="patologie" checked="{ (collectedData['patologie'] && collectedData['patologie'].length > 0) ? 'checked' : '' }" id="patologie" type="checkbox" hidden="true" data-property="patologie" onchange="{ setUserInput }">
                            <label class="choices" for="patologie">
                                <span class="choice on">Si</span>
                                <span class="choice off">No</span>
                                <div class="knob"></div>
                            </label>
                        </div>



                    </div>

                    <div class="twelve columns statofisiologico">
                        <p class="evidence">Ti trovi in stati fisiologici particolari?
                            <small>Sei ad esempio uno sportivo professionisti oppure sei in gravidanza, in post-grazidanza o in allattamento. Sei in andropausa o menopausa ...</small>

                        </p>
                        <span  show="{ collectedData['fisiologie'] && collectedData['fisiologie'].length > 0 }"  data-property="fisiologie" onclick="{ setUserInput }" class="edit"><svg class="icon icon-natural"><use xlink:href="#icon-edit"></use></svg></span>
                        <div class="toggler">
                            <input class="toggler-input" ref="fisiologie" id="fisiologie" type="checkbox" checked="{ (collectedData['fisiologie'] && collectedData['fisiologie'].length > 0) ? 'checked' : '' }" hidden="true" data-property="fisiologie" onchange="{ setUserInput }">
                            <label class="choices" for="fisiologie">
                                <span class="choice on">Si</span>
                                <span class="choice off">No</span>
                                <div class="knob"></div>
                            </label>
                        </div>

                    </div>

                    <div class="twelve columns intolleranze">
                        <p class="evidence">Siete allergici o intolleranti a qualche cosa?
                            <small>Come le uova, il lattosio, i molluschi o altro</small>

                        </p>
                        <span show="{ collectedData['intolleranze'] && collectedData['intolleranze'].length > 0 }" data-property="intolleranze" onclick="{ setUserInput }" class="edit"><svg class="icon icon-natural"><use xlink:href="#icon-edit"></use></svg></span>
                        <div class="toggler">
                            <input class="toggler-input" ref="intolleranze" id="intolleranze" checked="{ (collectedData['intolleranze'] && collectedData['intolleranze'].length > 0) ? 'checked' : '' }" type="checkbox" hidden="true" data-property="intolleranze" onchange="{ setUserInput }">
                            <label class="choices" for="intolleranze">
                                <span class="choice on">Si</span>
                                <span class="choice off">No</span>
                                <div class="knob"></div>
                            </label>
                        </div>

                    </div>



                </div>

            </div>

            <div class="slide {active: (steps[current_step] === 'gym')}" data-type="gym">
                <h6>Lavoro e attività fisica</h6>

                <div class="row">
                    <div class="twelve columns">
                        <p class="evidence">Che tipo di lavoro svolgi?</p>
                        <span class="icons8-drop-down-arrow select-arrow"></span>
                        <select ref="gym" name="gym-frequency" class="u-full-width" data-property="lavoro" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'gym') ? 1 : -1 }">
                            <option each="{works}" value="{ value }" {(parent.collectedData.lavoro === value) ? 'SELECTED' : '' } >{ label }</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="twelve columns">
                        <p class="evidence">Pratichi abitualmente qualche attività fisica?</p>
                        <span class="icons8-drop-down-arrow select-arrow"></span>
                        <select name="gym" class="u-full-width" data-property="sport" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'gym') ? 2 : -1 }">
                            <option each="{sport}" value="{ value }" {(parent.collectedData.sport) === value ? 'SELECTED' : '' }>{ label }</option>
                        </select>
                    </div>
                </div>

                <div class="row" show="{ collectedData.sport }">
                    <div class="six columns">
                        <p class="evidence">Tipo d'attività?</p>
                        <span class="icons8-drop-down-arrow select-arrow"></span>
                        <select name="gym-type" class="u-full-width" ref="sport_type" data-property="sport_type" onchange="{ setUserInput }" disabled="{(!collectedData.sport ? 'disabled' : '')}"  tabindex="{ (steps[current_step] === 'gym') ? 3 : -1 }">
                            <option each="{sport_type}" value="{ value }" {(parent.collectedData.sport_type) === value ? 'SELECTED' : '' }> { label }</option>
                        </select>
                    </div>

                    <div class="six columns" show="{ collectedData.sport }">
                        <p class="evidence">Con quale frequenza?</p>
                        <span class="icons8-drop-down-arrow select-arrow"></span>
                        <select name="gym-frequency" class="u-full-width" ref="sport_frequency"  data-property="sport_frequency" onchange="{ setUserInput }" disabled="{(!collectedData.sport ? 'disabled' : '')}" tabindex="{ (steps[current_step] === 'gym') ? 4 : -1 }">
                            <option each="{sport_frequency}" value="{ value }" {(parent.collectedData.sport) === value ? 'SELECTED' : '' }> { label }</option>
                        </select>
                    </div>
                </div>




            </div>

            <div class="slide {active: (steps[current_step] === 'gruppi_alimentari')}" data-type="gruppi_alimentari">
                <div class="row">
                    <div class="twelve columns">
                        <p class="evidence">Quante volte alla settimana consumi i seguenti alimenti?</p>
                        <div each="{v,i in gruppi_alimentari}" class="split-button">
                            <input type="checkbox" type="hidden" ref="ga_{i}" id="ga_{i}" class="{active: (parent.collectedData['ga'][v.value])}">
                            <span class="label">{v.label}</span>
                            <label for="ga_{i}" onclick="{ setActiveSlipButton }">
                                <span class="value" ref="ga_val_{i}">{ (parent.collectedData && parent.collectedData['ga']) ? parent.collectedData['ga'][v.value] || 0 : 0 }</span>
                                <span class="icons8-drop-down-arrow"></span>
                            </label>
                            <ul data-type="ga" data-group="{ v.value }" data-toggle="ga_{i}" data-value="ga_val_{i}">
                                <li each="{val, j in v.values}" class="{active: val == parent.collectedData['ga'][v.value]}" onclick="{ parent.setGroupQty }">{val}</li>
                            </ul>
                        </div>
                    </div>

                    <div class="twelve columns bevande">
                        <p class="evidence">In che quantità giornaliere consumi i seguenti condimenti o bevande?
                            <!--<small>(Bicchiere o Tazza = 200 ml per tutte le bevande tranne che per super alcolici per cui  1 bicchiere = 50ml. Tazzina = 30ml)</small>-->
                        </p>
                        <div each="{v,i in bevande}" class="split-button">
                            <input type="checkbox" type="hidden" ref="be_{i}" id="be_{i}" class="{active: (parent.collectedData['be'][v.value])}">
                            <span class="label">{v.label}</span>
                            <label for="be_{i}" onclick="{ setActiveSlipButton }">
                                <span class="value" ref="be_val_{i}">{ (parent.collectedData && parent.collectedData['be']) ? collectedData['be'][v.value] || 0  : 0 }</span>
                                <span class="icons8-drop-down-arrow"></span>
                            </label>

                            <ul data-type="be" data-group="{ v.value }" data-toggle="be_{i}" data-value="be_val_{i}">
                                <li data-type="info-label">{v.info}</li>
                                <li each="{val, j in v.values}" class="{active: val == parent.collectedData['be'][v.value]}" onclick="{ parent.setGroupQty }">{(v.labels && v.labels[j]) ? v.labels[j] : val}</li>
                            </ul>
                        </div>
                    </div>

                </div>


            </div>

            <div class="slide {active: (steps[current_step] === 'conclusione')}" data-type="conclusione">
                <h6>Lavoro e attività fisica</h6>

                <div class="row">
                    <div class="twelve columns">
                        <p class="evidence">Quale obbiettivo/i vuoi raggiungere?</p>
                        <span class="icons8-drop-down-arrow select-arrow"></span>
                        <select name="obbiettivo" class="u-full-width" data-property="obbiettivo" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'conclusione') ? 1 : '-1'}" >
                            <option each="{obbiettivo}" value="{ value }" {(parent.collectedData.obbiettivo === value) ? 'SELECTED' : '' } >{ label }</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="twelve columns">
                        <p class="evidence">Cosa desidereresti nel tuo menu settimanale?</p>
                        <div class="multiplechoice-list">
                            <label each="{menu,i in menu_settimanale}" class="label--checkbox" for="menu_settimanale_{i}">
                                <input type="checkbox" class="checkbox" id="menu_settimanale_{i}" ref="menu_settimanale_{i}" data-property="menu_settimanale" name="menu_settimanale[]" value="{ menu.value }" onchange="{ parent.setUserInput }" tabindex="{ (steps[current_step] === 'conclusione') ? 2 : '-1'}"  />
                                <span>{ menu.label }</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="twelve columns">
                    <p class="evidence">Saresti disposto a diventare vegano o vegetariano?</p>
                    <span class="icons8-drop-down-arrow select-arrow"></span>
                    <select name="interestinbe" class="u-full-width" data-property="interestinbe" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'conclusione') ? 3 : -1 }">
                        <option each="{interestinbe}" value="{ value }" {(parent.collectedData.interestinbe === value) ? 'SELECTED' : '' } >{ label }</option>
                    </select>
                </div>

                <div class="row nutrizionista">
                    <div class="twelve columns">
                        <p class="evidence">Hai mai svolto un colloquio con<br>un nutrizionista o dietologo?</p>
                        <div class="toggler inline">
                            <input class="toggler-input" checked="{ (collectedData.nutrizionista ? true : false) }" value="1" ref="visto_medico" id="visto_medico" type="checkbox" hidden="true" data-property="nutrizionista" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'conclusione') ? 4 : '-1'}" >
                            <label class="choices" for="visto_medico">
                                <span class="choice on">Si</span>
                                <span class="choice off">No</span>
                                <div class="knob"></div>
                            </label>
                        </div>

                    </div>
                    <div class="twelve columns">
                        <p class="evidence">Vorresti essere seguito da<br>un nostro nutrizionista affliliato?</p>
                        <div class="toggler inline">
                            <input class="toggler-input" checked="{ (collectedData.nutrizionista_affiliato ? true : false) }" value="1" ref="nutrizionista_affiliato" id="nutrizionista_affiliato" type="checkbox" hidden="true" data-property="nutrizionista_affiliato" onchange="{ setUserInput }" tabindex="{ (steps[current_step] === 'conclusione') ? 5 : '-1'}" >
                            <label class="choices" for="nutrizionista_affiliato">
                                <span class="choice on">Si</span>
                                <span class="choice off">No</span>
                                <div class="knob"></div>
                            </label>
                        </div>

                    </div>
                </div>

                <div class="row submit">
                    <div class="twelve columns">

                        <button ref="send" class="button button-primary u-full-width" disabled="{ isValid() ? '' : 'disabled' }" onclick="{ submitForm }">Verifica i dati ed invia</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="row" style="text-align: center; margin-top: 12px;">
            <p><strong>Tutti i campi con l'* sono obbligatori</strong></p>
        </div>
    </div>

    <nav data-type="scroll-buttons-bottom">
        <button ref="previous" data-type="back" tabindex="0" class="{ hidden: (current_step <= 0) }" onclick="{goBack}" tabindex="5">Indietro</button>
        <button ref="next" show="{!(current_step >= (steps.length-1))}" data-type="forward" tabindex="6" class="{ hidden: !(current_step < (steps.length-1) && Number(filled_steps.indexOf(steps[current_step])) !== -1) }" onclick="{goForward}">Avanti</button>
    </nav>

    <div if="{ popup === 'data' }" data-type="popup" data-for="data">
        <div class="container">
            <div class="row title">
                <div class="six columns info">
                    <div>
                        Sono misure semplici da prendere <strong>ma ricordati di indossare qualche cosa di aderente</strong>
                        <ol>
                            <li>
                                <strong>Petto:</strong> Nel suo punto più ampio, sotto le scelle per il maschio e sui capezzoli per la bonna.
                            </li>
                            <li>
                                <strong>Braccia:</strong> La circonferenza del bicipite (la parte più ampia)
                            </li>
                            <li>
                                <strong>Vita:</strong> La zona più sottile normalkemnte situata tra i 2.5 e i 5cm sopra l'ombelico
                            </li>
                            <li>
                                <strong>Pancia:</strong> La circonferenza va presa in prossimità dell'ombelico o leggermente sotto
                            </li>
                            <li>
                                <strong>Fianchi: </strong> La circonferenza va misurata appena sopra il cavallo
                            </li>
                            <li>
                                <strong>Cosce:</strong> All'altezza del punto più largo normalmente situato a 3/4 dal ginoccio
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="six columns infografica"></div>
            </div>
            <div class="row inputs">
                <div class="four columns">
                    <label>Fianchi</label>
                    <input type="number" step="0.1" required pattern="\d+\.?\d+?" min="25" class="number" value="{collectedData.misure.fianchi || ''}" data-property="misure.fianchi" placeholder="cm" onchange="{ setUserInput }">
                    <span class="error" aria-live="polite">Valore non valido</span>
                </div>
                <div class="four columns">
                    <label>Vita</label>
                    <input type="number" step="0.1" required pattern="\d+\.?\d+?" min="25" class="number" value="{collectedData.misure.vita || ''}" data-property="misure.vita" placeholder="cm" onchange="{ setUserInput }">
                    <span class="error" aria-live="polite">Valore non valido</span>
                </div>
                <div class="four columns">
                    <label>Petto</label>
                    <input type="number" step="0.1" required pattern="\d+\.?\d+?" min="30" class="number" value="{collectedData.misure.petto || ''}" data-property="misure.petto" placeholder="cm" onchange="{ setUserInput }">
                    <span class="error" aria-live="polite">Valore non valido</span>
                </div>
                <div class="four columns">
                    <label>Collo</label>
                    <input type="number" step="0.1" required pattern="\d+\.?\d+?" min="8" class="number" value="{collectedData.misure.collo || ''}" data-property="misure.collo" placeholder="cm" onchange="{ setUserInput }">
                    <span class="error" aria-live="polite">Valore non valido</span>
                </div>
                <div class="four columns">
                    <label>Coscia</label>
                    <input type="number" step="0.1" required pattern="\d+\.?\d+?" min="8" class="number" value="{collectedData.misure.coscia || ''}" placeholder="cm" data-property="misure.coscia" onchange="{ setUserInput }">
                    <span class="error" aria-live="polite">Valore non valido</span>
                </div>
            </div>
            <nav><button onclick="{ togglePopup }" class="button-primary">Ok</button></nav>
        </div>
    </div>

    <div if="{ popup === 'patologie' }" data-type="popup" data-for="patologie">
        <div class="container">
            <button onclick="{ togglePopup }" class="button close">X</button>
            <div class="row">
                <strong>Soffri di una delle seguenti patologie?</strong><br>
                <p class="evidence">Selezionate tutte le patologie di cui soffrite tra quelle elencate di seguito.</p>
            </div>
            <div class="row">
                <div each="{ patologie }" class="patologia">
                    <label class="material-checkbox" no-reorde>
                        <input type="checkbox" checked="{(parent.collectedData.patologie && parent.collectedData.patologie.indexOf(value) !== -1)}" name="patologie[]" data-property="patologie" value="{ value }" onchange="{ parent.setCondition }">
                        <span>{ label} <small if="{extra}"> {extra} </small></span>
                    </label>
                </div>

            </div>
            <nav><button onclick="{ togglePopup }" class="button-primary">OK</button></nav>
        </div>
    </div>

    <div if="{ popup === 'fisiologie' }" data-type="popup" data-for="fisiologie">
        <div class="container">
            <button onclick="{ togglePopup }" class="button close">X</button>
            <div class="row">
                <strong>Stati fisiologici/condizioni particolari</strong><br>
                <p>Selezionate lo stato fisiologico particolare in cui vi trovate, tra quelli disponibili.</p>
                <div each="{ fisiologie[collectedData.sesso] }" class="patologia" no-reorde>
                    <label class="material-checkbox">
                        <input type="checkbox" checked="{(parent.collectedData.fisiologie && parent.collectedData.fisiologie.indexOf(value) !== -1)}" name="fisiologie[]" data-property="fisiologie" value="{ value }" onchange="{ parent.setCondition }">
                        <span>{ label } <small if="{extra}"> {extra} </small></span>
                    </label>
                </div>
            </div>
            <nav><button onclick="{ togglePopup }" class="button-primary">Ok</button></nav>
        </div>
    </div>

    <div if="{ popup === 'intolleranze' }" data-type="popup" data-for="intolleranze">
        <div class="container">
            <button onclick="{ togglePopup }" class="button close">X</button>
            <div class="row">
                <strong>Sei ipersensibile ad uno dei seguenti allergeni?</strong><br>
                <p>Selezionate le allergie o intolleranze alimentari che avete tra quelle elencate di seguito</p>
                <div class="twelve columns">
                    <div each="{ intolleranze }" class="patologia">
                        <label class="material-checkbox" no-reorde>
                            <input type="checkbox" checked="{(parent.collectedData.intolleranze && parent.collectedData.intolleranze.indexOf(value) !== -1)}" name="intolleranze[]" data-property="intolleranze" value="{ value }" onchange="{ parent.setCondition }">
                            <span>{ label} <small if="{extra}"> {extra} </small></span>
                        </label>
                    </div>
                </div>
            </div>
            <nav><button onclick="{ togglePopup }" class="button-primary">Ok</button></nav>
        </div>
    </div>



    <script>
        var _activeSpliMenu, _activeSpliSubmenu;
        function _createAndSubmitForm(){
            var f, i, t, v;
            f = document.createElement('form');
            f.setAttribute('action', this.action);
            f.setAttribute('method', 'POST');
            i = document.createElement('input');
            i.setAttribute('type', 'hidden');
            i.setAttribute('name', 'test');
            i.setAttribute('value', window.btoa(encodeURIComponent(JSON.stringify(this.collectedData))));

            console.log(JSON.stringify(this.collectedData));
            console.log(encodeURIComponent(JSON.stringify(this.collectedData)));
            //return;
            t = document.createElement('input');
            t.setAttribute('type', 'hidden');
            t.setAttribute('name', 'token');
            t.setAttribute('value', this.token);

            f.appendChild(i);
            f.appendChild(t)
            this.root.appendChild(f);
            f.submit();
        }

        function _checkFilledSteps(){

            var filled = [];
            if(this.collectedData.sesso
                && this.collectedData.nome
                && this.collectedData.cognome
                && this.collectedData.email)  {

                filled.push('info');
                /*if(this.current_step < filled.length) {
                    this.current_step = filled.length;
                    this.refs.eta.setAttribute('tabindex', 1);
                }*/
            }

            if(this.collectedData.eta
                && this.collectedData.peso
                && this.collectedData.altezza)  {
                filled.push('data');
            }

            if(this.collectedData.lavoro && filled.indexOf('data') !== -1)  filled.push('gym');
            if(this.collectedData.lavoro && filled.indexOf('gym') !== -1)  filled.push('gruppi_alimentari');
            if(this.collectedData.lavoro && filled.indexOf('gruppi_alimentari') !== -1)  filled.push('conclusione');

            this.filled_steps = filled;
            console.log('FILLED STEPS:', filled, this.isValid());
        }

        function _getKeyDown(e){
            if(e.key === 'Escape' && _activeSpliMenu){
                e.stopPropagation();
                e.preventDefault();
                _activeSpliMenu.checked = false;
                _activeSpliSubmenu = null;
                window.removeEventListener('keydown', _getKeyDown, true);
                window.removeEventListener('click', _getClickOutside, true);
            }
        }

        function _getClickOutside(e){
            console.log(e.target);
            if(_activeSpliSubmenu && e.target && !_activeSpliSubmenu.contains(e.target) ){
                // e.stopPropagation();
                // e.preventDefault();
                _activeSpliMenu.checked = false;
                _activeSpliSubmenu = null;
                window.removeEventListener('keydown', _getKeyDown, true);
                window.removeEventListener('click', _getClickOutside, true);
            }
        }

        function validateEmail(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(String(email).toLowerCase());
        }

        function getPrefillTestData(){
            return {
                'sesso' :'donna',
                'misure' : {},
                'lavoro': 'sedentario',
                'sport': 0,
                'ga' : {},
                'be' : {},
                'obbiettivo': 'indeciso',
                'dieta': 'indeciso',
                'nutrizionista' : false
            };
        }

        function _prefillMenuChoice(value){
            if(!this.menu_settimanale) return;
            this.menu_settimanale.map(function(menu, i){
                if(this.collectedData.menu_settimanale.indexOf(menu.value) !== -1) {
                    this.refs['menu_settimanale_'+i].checked = true;
                }
            }.bind(this));
        }

        this.gender = {
            'uomo' : 'assets/images/beeathy/man_2.svg',
            'donna' : 'assets/images/beeathy/woman_2.svg',
        };
        this.works = [
            {label: 'Sedentario', value: 'sedentario'},
            {label: 'Moderatamente attivo', value: 'moderatamente attivo'},
            {label: 'Attivo', value: 'Attivo'}
        ];
        this.sport= [
            {label: 'No', value: 0},
            {label: 'Si', value: 1}
        ];
        this.sport_type= [
            {label: 'Aerobica', value:'Aerobica'},
            {label: 'Anaerobica', value: 'Anaerobica'}
        ];
        this.sport_frequency= [
            {label: '1 ora alla settimana', value: 1},
            {label: '2 ore alla settimana', value: 2},
            {label: '3 ore alla settimana', value: 3},
            {label: '4 o più ore alla settimana', value: 4}
        ];
        this.fisiologie = {
            'donna' :[
                {label: 'Post-gravidanza', extra: 'fino a sei mesi dal parto', value: 'Post-gravidanza'},
                {label: 'Gravidanza', value: 'Gravidanza'},
                {label: 'Allattamento', value: 'Allattamento'},
                {label: 'Menopausa', value: 'Menopausa'},
                {label: 'Sportiva professionista', value: 'Sportiva professionista'},
                {label: 'Disbiosi intestinale', extra: 'malassorbimento', value: 'Disbiosi intestinale malassorbimento'},
            ],
            'uomo': [
                {label: 'Andropausa', value: 'Andropausa'},
                {label: 'Sportivo professionista', value: 'Sportivo professionista'},
                {label: 'Disbiosi intestinale', extra: 'malassorbimento', value: 'Disbiosi intestinale malassorbimento'},
            ]
        };
        this.patologie = [
            {label: 'Anemia', value: 'Anemia'},
            {label: 'Patologie cardiache', value: 'Patologie cardiache'},
            {label: 'Ipertensione', value: 'Ipertensione'},
            {label: 'Ipercolesterolemia', value: 'Ipercolesterolemia'},
            {label: 'Diabete', value: 'Iperglicemia'},
            {label: 'Patologie oncologiche', value: 'Patologie oncologiche'},

            {label: 'Reflusso gastrico', value: 'Reflusso gastrico'},
            {label: 'Disfunzioni della tiroide', value: 'Disfunzioni della tiroide'},
            {label: 'Osteoporosi', value: 'Osteoporosi'},
            {label: 'Celiachia', value: 'Celiachia'},
            {label: 'Insufficienza renale', value: 'Insufficienza renale'},

            {label: 'Patologie infiammatorie',  extra: 'croniche', value: 'Patologie infiammatorie croniche'},

        ];
        this.intolleranze = [
            {label: 'Uova e derivati', value: 'Uova'},
            {label: 'Proteine del latte', value: 'Proteine del latte'},
            {label: 'Lattosio', value: 'Lattosio'},
            {label: 'Glutine', value: 'Glutine'},
            {label: 'Soia e derivati', value: 'Soia'},
            {label: 'Frutta secca a guscio e derivati', value: 'Frutta secca a guscio'},
            {label: 'Pesce e derivati', value: 'Pesce'},
            {label: 'Molluschi e derivati', value: 'Molluschi'},
            {label: 'Crostacei e derivati', value: 'Crostacei'},
            {label: 'Aglio', value: 'Aglio'},
            /*{label: 'Nichel', value: 'Nichel'},*/
            {label: 'Glutammato di sodio', value: 'Glutammato di sodio'},
            {label: 'Lievito', value: 'Lievito'},
            {label: 'Vegetali', value: 'Vegetali'},
            {label: 'Frutta', value: 'Frutta'}
        ];
        this.interestinbe = [
            {label: 'Non sapre/Indeciso', value: 'indeciso'},
            {label: 'Sono già vegano', value: 'vegano'},
            {label: 'Sono già vegetariano', value: 'vegetariano'},
            {label: 'Si, vorrei diventare vegano', value: 'vorrei diventare vegano'},
            {label: 'Si, vorrei diventare vegetariano', value: 'vorrei diventare vegetariano'},
        ];
        this.gruppi_alimentari = [
            {label: 'Uova intere', value: 'Uova', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Albume', value: 'Albume', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Mais', value: 'Mais', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Farro', value: 'Farro', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Orzo', value: 'Orzo', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Segale', value: 'Segale', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Quinoa', value: 'Quinoa', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Grano saraceno', value: 'Grano saraceno', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Miglio', value: 'Miglio', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Amaranto', value: 'Amaranto', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},

            {label: 'Tofu', value: 'Tofu', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Seitan', value: 'Seitan', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Hamburger di soia', value: 'Hamburger di soia', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},

            {label: 'Pesce', value: 'Pesce', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Carne rossa', value: 'Carne rossa', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Salumi / affettati', value: 'Salumi / affettati', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Carne bianca', value: 'Carne bianca', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Formaggi', value: 'Formaggi', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Dolciumi', value: 'Dolciumi', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Legumi', value: 'Legumi', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Yogurt Magro / Greco', value: 'Yogurt magro', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Yogurt', value: 'Yogurt', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Pasta', value: 'Pasta', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Riso', value: 'Riso', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Pane', value: 'Pane', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Frutta', value: 'Frutta', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},
            {label: 'Verdura', value: 'Verdura', values: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21]},

        ];
        this.bevande = [
            {label: 'Olio', value: 'Olio', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Cucchiai di olio al giorno'},
            {label: 'Zucchero', value: 'Zucchero', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Cucchiaini al giorno'},
            {label: 'Dolcificante', value: 'Dolcificante', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bustine al giorno'},
            {label: 'Acqua', value: 'Acqua', values: [0, 1, 2, 3, 4, 5 , 6,  7, 8, 9, '10+'], 'info':'Litri di acqua al giorno', 'unit': 'l'},
            {label: 'Caffè', value: 'Caffè', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Caffè al giorno (tazzine)'},
            {label: 'Latte', value: 'Latte', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bicchieri di latte al giorno'},
            {label: 'Latte vegetale', value: 'Latte Vegetale', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bicchieri di latte vegetale al giorno'},
            {label: 'Tea', value: 'Tea', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Tazze di té al giorno'},
            {label: 'Tisane', value: 'Tisane', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Tazze di tisane al giorno'},
            {label: 'Centrifugati', value: 'Centrifugati', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bicchieri di centrifugati/die (1 Bicchiere = 200ml)'},
            {label: 'Bevande zuccherate', value: 'Bevande zuccherate', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bicchieri/die (1 Bicchiere = 200ml)'},
            {label: 'Vino/birra', value: 'Vino/birra', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Calici/bicchieri al giorno'},
            {label: 'Super alcolici', value: 'Super alcolici', values: [0,1,2,3,4,5,6,7,8,9,'10+'], 'info':'Bicchieri al giorno'},

        ];
        this.obbiettivo = [
            {label: 'Non so/Non ho deciso', value: 'Indeciso'},
            {label: 'Migliorare le mie abitudini alimentari', value: 'Migliorare le mie abitudini alimentari'},
            {label: 'Seguire un programma per perdere peso', value: 'Seguire un programma per perdere peso'},
            {label: 'Seguire un programma detox di 21 giorni', value: 'Seguire un programma detox di 21 giorni'},
            {label: 'Mantenere il mio peso forma', value: 'Mantenere il mio peso forma'},
            {label: 'Seguire un programma alimentare assistito', value: 'Seguire un programma alimentare assistito'}
        ];
        this.menu_settimanale = [
            {label: 'Scelta di primi, secondi e contorni', value: 'Scelta di primi, secondi e contorni'},
            {label: 'Scelta di primi, secondi, contorni e colazioni salate', value: 'Scelta di primi, secondi, contorni e colazioni salate'},
            {label: 'Piatto unico', value: 'Piatto unico'},
            {label: 'Primi piatti', value: 'Primi piatti'},
            {label: 'Secondi piatti', value: 'Secondi piatti'},
            {label: 'Contorni', value: 'Contorni'}
        ];
        this.token = opts.token || '';
        this.action = opts.action || null;
        this.popup = null;
        this.steps = ['info', 'data','gym','gruppi_alimentari','conclusione'];
        this.filled_steps = [];
        this.current_step = opts.step || 4;
        this.collectedData = opts.prefill;
        if(!this.collectedData) this.collectedData = getPrefillTestData();
        console.warn(opts.prefill);
        if(!this.collectedData['ga']) this.collectedData['ga'] = {};
        if(!this.collectedData['be']) this.collectedData['be'] = {};
        if(!this.collectedData['misure'] || this.collectedData['misure'].concat) this.collectedData['misure'] = {};
        if(!this.collectedData['lavoro']) this.collectedData['lavoro'] = 'sedentario';
        if(!this.collectedData['obbiettivo']) this.collectedData['obbiettivo'] = 'indeciso';
        if(!this.collectedData['interestinbe']) this.collectedData['interestinbe'] = 'indeciso';
        if(!this.collectedData['menu_settimanale']) this.collectedData['menu_settimanale'] = [];
        if(!this.collectedData['sesso']) this.collectedData['sesso'] = 'donna';




        if(opts['prefill_user']) {
            this.collectedData['nome'] = opts['prefill_user']['name'] || null;
            this.collectedData['cognome'] = opts['prefill_user']['surname'] || null;
            this.collectedData['sesso'] = opts['prefill_user']['sesso'] || null;
            this.collectedData['email'] = opts['prefill_user']['email'] || null;
            this.lock_user = true;
        }

        this.gruppi_alimentari.map(function(g){
            if(!this.collectedData.ga[g.value]) this.collectedData.ga[g.value] = 0;
        }.bind(this));

        this.bevande.map(function(b){
            if(!this.collectedData.be[b.value]) this.collectedData.be[b.value] = 0;
        }.bind(this));

        this.active = this.steps[this.current_step];

        //this.current_step = 2;
        isValid(e) {
            if(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            return (this.filled_steps.length >= this.steps.length);
        }



        submitForm(e){
            if(e){
                e.stopPropagation();
                e.preventDefault();
            }
            if(this.isValid(e)){

                _createAndSubmitForm.call(this)

            }else{
                e.currentTarget.disabled = true;
            }
        }

        waitForReturn(e){
            if(e) e.stopPropagation();
            if(e && e.key && e.key === 'Enter') {
                e.currentTarget.blur();
            }
        }

        togglePopup(e){
            var p;
            e.stopPropagation();
            e.preventDefault();
            p = e.currentTarget.getAttribute('data-popup');
            switch(this.popup){
                case 'patologie':
                case 'fisiologie':
                case 'intolleranze':
                    if(!p) {
                        if(this.collectedData[this.popup] && this.collectedData[this.popup].length<1) {
                            delete this.collectedData[this.popup];
                        }
                        this.refs[this.popup].checked = (this.collectedData[this.popup]);
                    }
                    break;
            }
            this.popup = p ? p : null;
            //console.warn('POPUP: %s', this.popup);
        }

        goBack(e) {
            e.stopPropagation();
            //e.preventDefault();
            this.refs.wrapper.classList.remove('showall');
            this.current_step --;
            if(this.current_step<0) this.current_step = 0;
            this.root.parentNode.scrollIntoView();
        }

        goForward(e) {
            e.stopPropagation();
            //e.preventDefault();
            //console.warn('CURRENT STEP: %s', this.current_step, this.filled_steps);
            //console.log(this.root.offsetTop, window.pageYOffset);
            this.refs.wrapper.classList.remove('showall');
            this.current_step ++;
            if(this.current_step > this.filled_steps.length) {
                this.current_step --;
                return;
            }
            if(this.current_step >= this.steps.length) this.current_step = this.steps.length - 1;
            if(this.current_step <0 ) this.current_step = 0;
            this.root.parentNode.scrollIntoView();

        }

        setGender(e){
            e.stopPropagation();
            e.preventDefault();
            this.collectedData.sesso = e.currentTarget.value;
        }

        setCondition(e){
            var p,v, a;
            e.stopPropagation();
            e.preventDefault();
            p = e.currentTarget.getAttribute('data-property');
            v = e.currentTarget.value;
            a = e.currentTarget.checked;
            switch(p){
                case 'intolleranze':
                case 'patologie':
                case 'fisiologie':
                    if(a) {
                        if(!this.collectedData[p]) this.collectedData[p] = [];
                        if(this.collectedData[p].indexOf(v) === -1) this.collectedData[p].push(v);
                    }else{
                        if(this.collectedData[p]) {
                            this.collectedData[p].splice(this.collectedData[p].indexOf(v),1);
                        }
                    }

                    break;

            }
            console.warn(this.collectedData, p);
        }

        setGroupQty(e){
            var g, p, t, v;
            e.stopPropagation();
            e.preventDefault();
            //console.log(e.item);
            p = e.currentTarget.parentNode.getAttribute('data-type');
            g = e.currentTarget.parentNode.getAttribute('data-group');
            t = e.currentTarget.parentNode.getAttribute('data-toggle');
            v = e.currentTarget.parentNode.getAttribute('data-value');
            if(!this.collectedData[p]) this.collectedData[p] = {};
            this.collectedData[p][g] = e.item.val;
            //console.log(this.collectedData[p], p, g, this.refs[t]);
            if(this.refs[t]) this.refs[t].classList[e.item.val != '0' ? 'add' : 'remove']('active');
            if(this.refs[t]) this.refs[t].checked = false;
            if(this.refs[v]) this.refs[v].textContent = e.item.val;
            window.removeEventListener('keydown', _getKeyDown, true);
            window.removeEventListener('click', _getClickOutside, true);
        }

        setUserInput(e){
            var p, v, t;
            e.stopPropagation();
            e.preventDefault();
            p = e.currentTarget.getAttribute('data-property');
            v = e.currentTarget.value;

            switch(p){

                case 'patologie':
                case 'fisiologie':
                case 'intolleranze':
                    if(p && this.collectedData[p] && this.collectedData[p].length>0) this.refs[p].checked = true;
                    this.popup = p ? p : null;
                    //return;
                    break;
                case 'menu_settimanale':
                    if(!this.collectedData[p]) this.collectedData[p] = [];
                    this.collectedData[p] = this.collectedData[p].filter(function(val){
                        return (val !== v);
                    });
                    if(e.currentTarget.checked) this.collectedData[p].push(v);

                    break;
                case 'eta':
                case 'altezza':
                case 'peso':
                case 'sport':
                    if(p === 'eta') {
                        v = Math.round(Number(v));
                        e.currentTarget.value = v;
                    }
                    if(['altezza', 'peso', 'eta'].indexOf(p) !== -1){
                        if(!e.currentTarget.validity.valid) e.currentTarget.classList.add('error');
                        if(e.currentTarget.validity.valid) e.currentTarget.classList.remove('error');
                        this.collectedData[p] = v && e.currentTarget.validity.valid ? Number(v) : 0;
                    }else{
                        this.collectedData[p] = v && e.currentTarget.validity.valid ? Number(v) : 0;
                    }
                    //console.log(e.currentTarget.validity);

                    if(p === 'sport' && !this.collectedData[p]) {
                        delete this.collectedData.sport_type;
                        delete this.collectedData.sport_frequency;
                    }
                    if(p === 'sport' && this.collectedData[p]) {
                        this.collectedData.sport_type = this.refs.sport_type.value;
                        this.collectedData.sport_frequency = this.refs.sport_frequency.value;
                    }
                    break;
                case 'nome':
                case 'cognome':
                case 'email':


                    if(!e.currentTarget.validity.valid) {
                        e.currentTarget.classList.add('error');
                    }else{
                        e.currentTarget.classList.remove('error');
                    }

                    if(p === 'email' && !validateEmail(v)) {
                        v = null;
                        e.currentTarget.classList.add('error');
                    }else if(p === 'email' && !validateEmail(v)){
                        e.currentTarget.classList.remove('error');
                    }

                    this.collectedData[p] = v && e.currentTarget.validity.valid ? v : null;
                    break;
                case 'nutrizionista':
                case 'nutrizionista_affiliato':
                    this.collectedData[p] = e.currentTarget.checked;
                    break;

                default:
                    t = p.split('.');
                    if(t.length>1) {
                        if(!this.collectedData[t[0]]) this.collectedData[t[0]] = {};
                        if(['fianchi', 'collo', 'vita', 'coscia','petto'].indexOf(t[1]) !== -1) {
                            v = Number(v);
                            if(!e.currentTarget.validity.valid) {
                                v = null;
                                console.log('INVALID...%s', t[0]);
                                e.currentTarget.classList.add('error');
                            }
                            if(e.currentTarget.validity.valid) e.currentTarget.classList.remove('error');
                        }
                        this.collectedData[t[0]][t[1]] = v ? v : null;
                        if(!this.collectedData[t[0]][t[1]]) delete this.collectedData[t[0]][t[1]];
                    }else{
                        if(p === 'sport_frequency') v = Number(v);
                        this.collectedData[p] = v ? v : null;
                    }
                    break;
            }
            //console.warn(this.collectedData);
            _checkFilledSteps.call(this);
        }

        setActiveSlipButton(e){
            var r;
            e.stopPropagation();
            r = e.currentTarget.getAttribute('for');

            _activeSpliMenu = this.refs[r];
            _activeSpliSubmenu = e.currentTarget.parentNode;
            console.log(e.currentTarget, _activeSpliSubmenu);
            window.addEventListener('keydown', _getKeyDown, true);
            window.addEventListener('click', _getClickOutside, true);
        }

        /*this.on('updated', function(){
            console.log('CHECK', this.current_step < (this.steps.length-1), Number(this.filled_steps.indexOf(this.steps[this.current_step])) !== -1)
        });*/

        this.on('mount', function(){

            var inp = this.root.querySelectorAll('input, select');
            Array.prototype.map.call(inp, function(ele){
                if(ele.hidden) return;
            }.bind(this));

            this.refs.slider.addEventListener("transitionend", function(event) {
                //console.warn('TRANSITION END!');
                if(this.steps[this.current_step] === 'gruppi_alimentari'){
                    this.refs.wrapper.classList.add('showall');
                }else{
                    this.refs.wrapper.classList.remove('showall');
                }

                if(this.steps[this.current_step] === 'data') this.refs.eta.focus();
                if(this.steps[this.current_step] === 'gym') this.refs.gym.focus();
               // if(this.steps[this.current_step] === 'gruppi_alimentari') this.refs.next.focus();
                //if(this.steps[this.current_step] === 'conclusione') this.refs.send.focus();

            }.bind(this), false);

            if(this.steps[this.current_step] === 'gruppi_alimentari'){
                this.refs.wrapper.classList.add('showall');
            }else{
                this.refs.wrapper.classList.remove('showall');
            }

            _prefillMenuChoice.call(this);
            _checkFilledSteps.call(this);
            if(this.isValid()) this.refs.send.disabled = false;
            //console.log('CURRENT STEP: %s', this.current_step, (this.steps.length-1), Number(this.filled_steps.indexOf(this.steps[this.current_step])) !== -1)
            if(this.current_step > this.filled_steps.length) {
                this.current_step = this.filled_steps.length;
                this.active = this.steps[this.current_step];
                console.log('RESET STEP TO...', this.current_step);
                this.update();
            }



        })
    </script>
</beeathy-test>