{{#if componentProperties}}
{{#if componentProperties.mostraVersioneRidotta}}
<div class="ctc-ropo-not-stand-alone ctc-ropo-ridotto JS-click-to-call ctc-ropo-component"
     data-mostraversioneridotta="{{componentProperties.mostraVersioneRidotta}}">

    {{#if prefilledFields.isModal}}
    <eon-ui-modal
            class="modal-click-to-call"
            modal-id="ctc-ropo-versione-ridotta"
            show-closing-x="true"
            move-modal-to-end-of-body="false"
            z-index="300">


        <div class="flex">
            <eon-ui-icon class="mr10" name="call-center" a11y-aria-label="icona call center" scheme=""
                         size="normal"></eon-ui-icon>
            <eon-ui-headline scheme="" text="{{{componentProperties.titoloctcridotto}}}" size="h4"
                             headline-html-tag="h1"
                             a11y-aria-label="{{{componentProperties.titoloctcridotto}}}"></eon-ui-headline>
        </div>
        <div class="JS-form appendToTooltip ctc-ropo-body">
            <div>
                <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                             a11y-aria-label="{{componentProperties.sottotitoloctcridotto}}">
                    {{componentProperties.sottotitoloctcridotto}}
                </eon-ui-text>
            </div>

            <div>
                <eon-ui-rte-renderer rte-source="aem"
                                     content="{{componentProperties.numerotelefonoctcridotto}}"></eon-ui-rte-renderer>
            </div>
            <div>
                <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                             a11y-aria-label="{{{componentProperties.descrizionectcridotto}}}">
                    {{componentProperties.descrizionectcridotto}}
                </eon-ui-text>
            </div>
        </div>
    </eon-ui-modal>
    {{/if}}
</div>


{{else}}
<div class="ctc-ropo-not-stand-alone JS-click-to-call ctc-ropo-component"
     data-command="{{#if prefilledFields.tipologiaChiamata}}{{prefilledFields.tipologiaChiamata}}{{else}}{{componentProperties.tipologiaChiamata}}{{/if}}"
     data-hourtype="{{componentProperties.typefasceorarie}}"
     data-timeslots="{{componentProperties.timeSlots}}"
     data-nascondidataora="{{prefilledFields.nascondidataora}}"
     data-nascondiricontatto="{{prefilledFields.nascondiricontatto}}"
     data-nascondiannulla="{{prefilledFields.nascondiAnnulla}}"
     data-holidays="{{componentProperties.datefestivita}}"
     data-tagname="{{prefilledFields.tagname}}"
     data-source="{{prefilledFields.source}}">

    {{#if prefilledFields.isModal}}
    <eon-ui-modal
            class="modal-click-to-call modal-ctc-ropo"
            modal-id="ctc-ropo-modal"
            show-closing-x="true"
            move-modal-to-end-of-body="false"
            z-index="300">
        {{#ifCond componentProperties.isCerForm '||' prefilledFields.backToOfferLink}}
        <div class="">
            {{#if componentProperties.isCerForm}}
            <eon-ui-link href="{{{componentProperties.buttonHomepageLinkForm}}}.html" icon-position="left"
                         icon="arrow_left" text="{{{componentProperties.buttonHomepageForm}}}"
                         target="_self" a11y-aria-label="{{{componentProperties.buttonHomepageForm}}}"></eon-ui-link>
            {{else}}
            {{#if prefilledFields.backToOfferLink}}
            <eon-ui-link href="{{prefilledFields.backToOfferLink}}.html" icon-position="left"
                         icon="arrow_left" text="{{#if componentProperties.backLinkLabel}} {{{componentProperties.backLinkLabel}}} {{else}} Torna all'offerta {{/if}}"
                         target="_self" a11y-aria-label="{{#if componentProperties.backLinkLabel}} {{{componentProperties.backLinkLabel}}} {{else}} Torna all'offerta {{/if}}"></eon-ui-link>
            {{/if}}
            {{/if}}
        </div>
        {{/ifCond}}

        <div class="modal-ropo-body">
            {{/if}}
            {{#if componentProperties.headerThankyou}}
            <div class="recall-ropo-css-fix title-section-typage flex-item-center flex margin-mob hidden width100 mb25">
                <eon-ui-headline scheme="" class="title-form" text="{{{componentProperties.headerThankyou}}}" size="h4"
                                 headline-html-tag="h4"
                                 a11y-aria-label="{{{componentProperties.headerThankyou}}}"></eon-ui-headline>
            </div>
            {{/if}}
            <div class="img-title-section items-center flex margin-mo mb20 width100">
                <div class="flex">
                    {{#if componentProperties.titleicon}}
                    <eon-ui-icon class="mr15 JS-iconToRemoveTYPage" name="call-center"
                                 a11y-aria-label="icona call center" scheme=""></eon-ui-icon>
                    {{/if}}
                    <eon-ui-headline scheme="" class="title-form" text="{{{componentProperties.titoloForm}}}" size="h4"
                                     headline-html-tag="h4"
                                     a11y-aria-label="{{{componentProperties.titoloForm}}}"></eon-ui-headline>
                    <div class="hidden">
                        <eon-ui-headline scheme="" class="title-form-ko" text="{{{componentProperties.titoloFormKO}}}"
                                         size="h4" headline-html-tag="h4"
                                         a11y-aria-label="{{{componentProperties.titoloFormKO}}}"></eon-ui-headline>
                    </div>
                </div>
            </div>

            <div class="JS-form appendToTooltip ctc-ropo-body">
                {{#if componentProperties.showwhatsapp}}
                <div class="ctcropo-whatsapp-container" hidden>
                    <div class="ctcropo-whatsapp-button mb20">
                        <eon-ui-input name="ctcropo-whatsapp-start-time" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.wastarttimeslot}}}"></eon-ui-input>
                        <eon-ui-input name="ctcropo-whatsapp-end-time" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.waendtimeslot}}}"></eon-ui-input>
                        <eon-ui-input name="ctcropo-whatsapp-welcome-message" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.wactcmodalmessage}}}"></eon-ui-input>
                        <eon-ui-input name="ctcropo-whatsapp-custom-phone-number" type="hidden"
                                      label-visually-hidden="true"
                                      value="{{{componentProperties.randomWaNumber}}}"></eon-ui-input>

                        <div class="flex">
                            <eon-ui-icon class="mr15" name="social_whatsapp" a11y-aria-label="icona whatsapp"
                                         scheme=""></eon-ui-icon>
                            <!-- todo accessibilita aggiungere sottolineato quando disponibile -->
                            <eon-ui-text scheme="" text-style="copy" internal-tag="p" font-weight="900"
                                         a11y-aria-label="{{#if componentProperties.wactcmodallabel}} {{{ componentProperties.wactcmodallabel }}} {{else}} Scrivici su Whatsapp {{/if}}">
                                {{#if componentProperties.wactcmodallabel}} {{{ componentProperties.wactcmodallabel }}}
                                {{else}} Scrivici su Whatsapp {{/if}}
                            </eon-ui-text>
                        </div>

                    </div>

                    <eon-ui-text scheme="" text-style="copy" internal-tag="p" a11y-aria-label="Oppure"
                                 font-weight="900">
                        Oppure
                    </eon-ui-text>
                </div>
                {{/if}}


                {{#if componentProperties.isCerForm}}
                <div class="mb15">
                    <eon-ui-text class="recall-ropo-css-fix sottotitolo-form" scheme="" text-style="copy"
                                 internal-tag="p"
                                 a11y-aria-label="{{{componentProperties.sottotitoloFormCer}}}">
                        {{{componentProperties.sottotitoloFormCer}}}
                    </eon-ui-text>
                </div>

                {{else}}
                <div class="mb15">
                    <eon-ui-text class="recall-ropo-css-fix sottotitolo-form" scheme="" text-style="copy"
                                 internal-tag="p"
                                 a11y-aria-label="{{{componentProperties.sottotitoloForm}}}">
                        {{{componentProperties.sottotitoloForm}}}
                    </eon-ui-text>
                </div>
                {{/if}}

                {{#if componentProperties.warningtext}}
                <div class="mb15">
                    <eon-ui-text class="recall-ropo-css-fix sottotitolo-form" scheme="" text-style="copy"
                                 internal-tag="p"
                                 a11y-aria-label="{{{componentProperties.warningtext}}}">
                        {{{componentProperties.warningtext}}}
                    </eon-ui-text>
                </div>
                {{/if}}

                {{#if componentProperties.buttonabbandonalink}}
                <eon-ui-link  href="{{{componentProperties.buttonabbandonalink}}}.html" icon-position="left" class="mb20" a11y-aria-label="{{{componentProperties.buttonabbandonalabel}}}"
                              scheme="red500" text="{{{componentProperties.buttonabbandonalabel}}}" icon="arrow_left" target="_blank"></eon-ui-link>
                {{/if}}

                <div class="warning-text-regione flex mb30 hidden">
                    <eon-ui-icon name="alert" size="small" a11y-aria-label="Icona errore"></eon-ui-icon>
                    <div class=" m0 ml5">
                        <eon-ui-text class="warning-text-regione" scheme="" text-style="copy" internal-tag="p"
                                     a11y-aria-label="" font-weight="900">
                        </eon-ui-text>
                    </div>
                </div>

                <div class="ctc-component">
                    <eon-ui-form class="appendToTooltip click-to-call-form"
                                 data-target="{{{componentProperties.target}}}"
                                 name="click-to-call-form">

                        <!--/* GENERICI */-->
                        <eon-ui-input name="LeadSource" type="hidden" label-visually-hidden="true"
                                      value="Web"></eon-ui-input>
                        <eon-ui-input name="Action_required__c" type="hidden" label-visually-hidden="true"
                                      value="Aperto"></eon-ui-input>
                        <eon-ui-input name="Status" type="hidden" label-visually-hidden="true"
                                      value="Non Qualificato"></eon-ui-input>
                        <eon-ui-input name="regioni-incluse-primo-set" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.regionifirstset}}}"></eon-ui-input>
                        <eon-ui-input name="regioni-incluse-secondo-set" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.regionisecondset}}}"></eon-ui-input>

                        {{#ifCond componentProperties.target '===' 'business'}}
                        <eon-ui-input name="Target__c" type="hidden" label-visually-hidden="true"
                                      value="Micro Business"></eon-ui-input>
                        {{/ifCond}}

                        {{#ifCond componentProperties.target '===' 'privato'}}
                        <eon-ui-input name="Target__c" type="hidden" label-visually-hidden="true"
                                      value="Domestico"></eon-ui-input>
                        {{/ifCond}}

                        {{#ifCond componentProperties.target '===' 'condominioCRM'}}
                        <eon-ui-input name="Target__c" type="hidden" label-visually-hidden="true"
                                      value="Condominio"></eon-ui-input>
                        {{/ifCond}}

                        <eon-ui-input name="Source_Detail__c" type="hidden" label-visually-hidden="true"
                                      value="{{#if prefilledFields.sourcedetailvalue}}{{#ifCond prefilledFields.sourcedetailvalue '!==' 'default'}}{{prefilledFields.sourcedetailvalue}}{{else}}{{componentProperties.sourcedetailvalue}}{{/ifCond}}{{else}}{{componentProperties.sourcedetailvalue}}{{/if}}"></eon-ui-input>


                        <!--/* COMMODITY */-->
                        {{#ifCond componentProperties.tipologiaLead '!==' 'non commodity'}}
                        <eon-ui-input name="Lead_Commodity__c" type="hidden" label-visually-hidden="true"
                                      value="{{#if prefilledFields.tipologiaLead}}{{prefilledFields.tipologiaLead}}{{else}}{{componentProperties.tipologiaLead}}{{/if}}"></eon-ui-input>
                        <eon-ui-input name="Offerta__c" type="hidden" label-visually-hidden="true"
                                      value="{{#if prefilledFields.offerNamePower}}{{prefilledFields.offerNamePower}}{{else}}{{componentProperties.offerNamePower}}{{/if}}"></eon-ui-input>
                        <eon-ui-input name="Azione__c" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond prefilledFields.tipoAzione '!==' 'default'}}{{prefilledFields.tipoAzione}}{{else}}{{componentProperties.tipoAzione}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="Lead_Record_Type__c" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond prefilledFields.leadrecordtype '!==' 'default'}}{{#if prefilledFields.leadrecordtype}}{{prefilledFields.leadrecordtype}}{{/if}}{{/ifCond}}{{#ifCond prefilledFields.leadrecordtype '===' 'default'}}{{#if componentProperties.leadrecordtype}}{{componentProperties.leadrecordtype}}{{else}}Lead Generico{{/if}}{{/ifCond}}{{#unless prefilledFields.leadrecordtype}}{{#if componentProperties.leadrecordtype}}{{componentProperties.leadrecordtype}}{{else}}Lead Generico{{/if}}{{/unless}}"></eon-ui-input>
                        <eon-ui-input name="Preferenza_Canale_di_Gestione__c" type="hidden" label-visually-hidden="true"
                                      value="{{#if prefilledFields.preferenzaCanaleGestione}}{{prefilledFields.preferenzaCanaleGestione}}{{else}}{{componentProperties.preferenzaCanaleGestione}}{{/if}}"></eon-ui-input>
                        {{else}}
                        <!--/* SOLUTIONS */-->
                        <eon-ui-input name="Lead_Record_Type__c" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond prefilledFields.leadrecordtype '!==' 'default'}}{{prefilledFields.leadrecordtype}}{{else}}{{componentProperties.leadrecordtype}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="Tipo_Prodotto__c" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond prefilledFields.mailProductCDNE '!==' 'default'}}{{prefilledFields.mailProductCDNE}}{{else}}{{componentProperties.mailProductCDNE}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="Offerta__c" type="hidden" label-visually-hidden="true"
                                      value="{{{prefilledFields.tagname}}}"></eon-ui-input>

                        {{#ifCond componentProperties.tipologiaChiamata '==='
                        '/lead/updateLead'}}{{componentProperties.emailSubjectBO}}{{else}}{{componentProperties.multipleDlEmailSubjectBO}}{{/ifCond}}
                        <eon-ui-input name="externalKey__c" type="hidden" label-visually-hidden="true"
                                      value=""></eon-ui-input>
                        {{/ifCond}}

                        <eon-ui-input name="emailTemplateBO" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.emailTemplateBO}}}"></eon-ui-input>
                        <eon-ui-input name="emailTemplateCustomer" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond componentProperties.tipologiaChiamata '===' 'sendEmailBOAndCustomer'}}{{componentProperties.emailTemplateCustomer}}{{else}}{{componentProperties.multipleDlEmailTemplateCustomer}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="emailSubjectBO" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond componentProperties.tipologiaChiamata '===' 'sendEmailBOAndCustomer'}}{{componentProperties.emailSubjectBO}}{{else}}{{componentProperties.multipleDlEmailSubjectBO}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="emailSubjectCustomer" type="hidden" label-visually-hidden="true"
                                      value="{{#ifCond componentProperties.tipologiaChiamata '===' 'sendEmailBOAndCustomer'}}{{componentProperties.emailSubjectCustomer}}{{else}}{{componentProperties.multipleDlEmailSubjectCustomer}}{{/ifCond}}"></eon-ui-input>
                        <eon-ui-input name="firstSetEmailTemplateBO" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.firstSetEmailTemplateBO}}}"></eon-ui-input>
                        <eon-ui-input name="secondSetEmailTemplateBO" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.secondSetEmailTemplateBO}}}"></eon-ui-input>

                        <eon-ui-input name="tipologiaTYPage" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.tipologiaTYPage}}}"></eon-ui-input>
                        <eon-ui-input name="linkTYPage" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.linkTYPage}}}"></eon-ui-input>

                        <eon-ui-input name="tradedoubler" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.componenteTradedoubler}}}"></eon-ui-input>
                        <eon-ui-input name="offertaTradedoubler" type="hidden" label-visually-hidden="true"
                                      value="{{{componentProperties.tipoOffertaTradedoubler}}}"></eon-ui-input>

                        <!--/* EX CONTACT FORM */-->
                        {{#if componentProperties.isOldContactForm}}
                        <eon-ui-input type="hidden" label-visually-hidden="true" name="isOldContactForm" value="{{{componentProperties.isOldContactForm}}}"></eon-ui-input>
                        <eon-ui-input type="hidden" label-visually-hidden="true" name="eventActionForAnalytics" value="{{{componentProperties.eventaction}}}"></eon-ui-input>
                        {{#ifCond componentProperties.mailProductCDNE '===' 'campoLibero'}}
                            <eon-ui-input name="Tipo_Prodotto__c" type="hidden" label-visually-hidden="true"
                                          value="{{{componentProperties.mailProductCDNEcampoLibero}}}"></eon-ui-input>
                        {{/ifCond}}
                        <eon-ui-input type="hidden" label-visually-hidden="true" name="client_type" value="{{{componentProperties.clientType}}}"></eon-ui-input>
                        <eon-ui-input type="hidden" label-visually-hidden="true" name="product_type" value="{{{componentProperties.productType}}}"></eon-ui-input>
                        <eon-ui-input type="hidden" label-visually-hidden="true" name="tipoprodotto" value="{{{componentProperties.tipoprodotto}}}"></eon-ui-input>
                        {{/if}}

                        <div class="">
                            <div class="">

                                <div class="ropo-fields-row">
                                    <div class="ropo-fields-container"></div>
                                </div>

                                <!-- data e ora spostate qui -->
                                {{#ifCond componentProperties.nascondidataora '===' 'true'}}
                                {{else}}
                                {{#ifCond prefilledFields.nascondidataora '===' 'true'}}
                                {{else}}
                                <div class="mb20 recall-ropo-css-fix data-ora-section">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb20-mob appendToDate ctc-ropo-input-container dateFieldRopo">
                                        <div class="input-group date width100" id="date">
                                            <eon-ui-date-picker name="date" label="Data"
                                                                label-outside="false" required="true"
                                                                class="datePickerElement hydrated height100" id="datePickerElement"
                                                                date-format="dd/MM/yyyy" max-days-before="0"
                                                                max-days-after="6" weekends="false"
                                                                data-tagO2O="data"
                                                                a11y-aria-label="Seleziona la data di ricontatto"
                                                                data-holidays="{{componentProperties.datefestivita}}"></eon-ui-date-picker>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ctc-ropo-input-container timeFieldRopo">
                                        <div class="appendToSelect timeFieldset">
                                            <eon-ui-dropdown class="timePickerElement" name="time"
                                                             required="true" height="200px"
                                                             custom-error-message="Scelta Obbligatoria"
                                                             custom-required-message="Scelta Obbligatoria"
                                                             label-outside="false"
                                                             label="Orario" scheme="" required
                                                             error-message="Campo obbligatorio"
                                                             custom-error-message="Il calcolo non è disponibile per la regione selezionata."
                                                             a11y-aria-label="Seleziona l'orario di ricontatto"
                                                             data-tagO2O="orario"></eon-ui-dropdown>

                                        </div>
                                    </div>
                                </div>
                                {{/ifCond}}
                                {{/ifCond}}

                                <!-- come sei venuto a conoscenza del sito -->
                                {{#if componentProperties.showAdditionalAnswer}}
                                <div class="additional-question mt20 mb50">
                                    <div class="col-xs-12 mb20">
                                        <eon-ui-text scheme="" internal-tag="p" text-style="copy" font-weight="900"
                                                     a11y-aria-label="{{{componentProperties.questionTitle}}}">
                                            {{{componentProperties.questionTitle}}}
                                        </eon-ui-text>
                                    </div>


                                    <fieldset class="col-xs-12">
                                        <eon-ui-radio-button-group scheme="" name="additional-question-answer" a11y-aria-label="Seleziona una risposta">
                                            {{#eachList componentProperties.answersList}}
                                            <eon-ui-radio-button class="{{{this}}}" name="additional-question-answer"
                                                                 initially-checked value="{{{this}}}"
                                                                 label="{{{this}}}"></eon-ui-radio-button>
                                            {{/eachList}}
                                        </eon-ui-radio-button-group>
                                    </fieldset>

                                    <div class="subquestion-answers-select form-group col-xs-12 col-md-6 mt30 hidden mb20"
                                         data-answerwithsubquestion="{{{componentProperties.answerWithSubquestion}}}">
                                        <eon-ui-dropdown name="subquestion-answers" class="ropoPickerElement" a11y-aria-label="Seleziona una risposta"
                                                         label="Seleziona" id="subquestionAnswersPickerElement"
                                                         custom-error-message="Scelta obbligatoria" required="true">
                                            {{#eachList componentProperties.subquestionAnswersList}}
                                            <eon-ui-dropdown-option value="{{{this}}}"
                                                                    label="{{{this}}}"></eon-ui-dropdown-option>
                                            {{/eachList}}
                                        </eon-ui-dropdown>
                                    </div>


                                </div>
                                {{/if}}

                                <!--/* File Upload */-->
                                {{#if componentProperties.enableFileUpload}}
                                <div class="mb25">
                                    <div class="upload-file-section col-xs-12">
                                        <div class="mb10">
                                            <eon-ui-text scheme="" text-style="copy" internal-tag="p" font-weight="900"
                                                         a11y-aria-label="{{{componentProperties.fileUploadBoldTitle}}}">
                                                {{{componentProperties.fileUploadBoldTitle}}}
                                            </eon-ui-text>
                                        </div>
                                        <div class="mb10">
                                            <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                                                         a11y-aria-label="{{{componentProperties.fileUploadSubtitle}}}">
                                                {{{componentProperties.fileUploadSubtitle}}}
                                            </eon-ui-text>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 file-upload-wrapper flex items-center">
                                        <input type="file" id="attachment" name="attachment" class=""
                                               accept=".doc,.docx,application/msword,application/pdf" required>

                                        <eon-ui-button class="JS-upload-file" text="Scegli file"
                                                       a11y-aria-label="Clicca qui per selezionare il file da caricare"
                                                       icon="arrow_right"></eon-ui-button>

                                        <div class="file-name-container flex hidden">
                                            <eon-ui-icon class="file-uploaded-icon mr10 ml10" name="radio_checkbox_tick"
                                                         a11y-aria-label="icona caricamento completato" scheme=""
                                                         size="normal"></eon-ui-icon>
                                            <eon-ui-text class="file-name mb0" color="{{#ifCond componentProperties.colorScheme '===' 'red500'}}white{{else}}{{#ifCond componentProperties.colorScheme '===' 'red500gradient'}}white{{else}}eon-turquoise500{{/ifCond}}{{/ifCond}}"
                                                         text-style="copy-small" internal-tag="span"
                                                         a11y-aria-label=""></eon-ui-text>
                                            <!-- todo accessibilita per valore che cambia run time -->
                                        </div>

                                        <div class="file-error-container flex items-center hidden">
                                            <eon-ui-icon class="mr10" name="alert" color="{{#ifCond componentProperties.colorScheme '===' 'red500'}}white{{else}}{{#ifCond componentProperties.colorScheme '===' 'red500gradient'}}white{{else}}eon-red600{{/ifCond}}{{/ifCond}}"
                                                         a11y-aria-label="icona errore caricamento file" scheme=""
                                                         size="normal"></eon-ui-icon>

                                            <eon-ui-text class="error-message-size mb0" color="{{#ifCond componentProperties.colorScheme '===' 'red500'}}white{{else}}{{#ifCond componentProperties.colorScheme '===' 'red500gradient'}}white{{else}}eon-red600{{/ifCond}}{{/ifCond}}"
                                                         text-style="copy-small" internal-tag="span"
                                                         a11y-aria-label="{{{componentProperties.fileUploadErrorMessageSize}}}">
                                                {{{componentProperties.fileUploadErrorMessageSize}}}
                                            </eon-ui-text>
                                            <eon-ui-text class="error-message-format mb0" color="{{#ifCond componentProperties.colorScheme '===' 'red500'}}white{{else}}{{#ifCond componentProperties.colorScheme '===' 'red500gradient'}}white{{else}}eon-red600{{/ifCond}}{{/ifCond}}"
                                                         text-style="copy-small" internal-tag="span"
                                                         a11y-aria-label="{{{componentProperties.fileUploadErrorMessageFormat}}}">
                                                {{{componentProperties.fileUploadErrorMessageFormat}}}
                                            </eon-ui-text>
                                        </div>
                                        <eon-ui-text class="error-required-message mb0 ml15 hidden" color="{{#ifCond componentProperties.colorScheme '===' 'red500'}}white{{else}}{{#ifCond componentProperties.colorScheme '===' 'red500gradient'}}white{{else}}eon-red600{{/ifCond}}{{/ifCond}}"
                                                     text-style="copy-small" internal-tag="span"
                                                     a11y-aria-label="Caricamento file obbligatorio">
                                            {{#if componentProperties.fileUploadErrorCampoObbligatorio}}{{{componentProperties.fileUploadErrorCampoObbligatorio}}}{{else}}Campo obbligatorio{{/if}}
                                        </eon-ui-text>
                                    </div>
                                </div>
                                {{/if}}

                                <!--/* Flag Privacy  */-->
                                <div class="privacy-section recall-ropo-css-fix">
                                    <div class="ropoPrivacyContainer col-xs-12 mt20 pl0 pr0 {{#if prefilledFields.flagprivacy3}}{{else}}mb20{{/if}}">
                                        <div class="flex justify-space flex-wrap flex-column">
                                            <eon-ui-checkbox-group scheme="" name="ctc-group">

                                                <div class="{{#if prefilledFields.flagprivacy3}}d-none{{/if}}">
                                                    <eon-ui-checkbox required="true"
                                                                     custom-error-message="Campo obbligatorio"
                                                                     custom-required-message="Campo obbligatorio"
                                                                     scheme=""
                                                                     name="flag_privacy_3__c"
                                                                     data-tagO2O="check privacy"
                                                                     a11y-aria-label="Seleziona se vuoi dare il consenso all'informativa privacy"
                                                                     value="SI">
                                                        <eon-ui-rte-renderer
                                                                slot="html-label"
                                                                rte-source="rte"
                                                                content='<eon-ui-text text-style="copy-small">{{#if componentProperties.informativatitleFirstPart}}{{{componentProperties.informativatitleFirstPart}}}{{else}}Ho preso visione dell’{{/if}}
                                                                </eon-ui-text> <a hide-icon="true"
                                                                href="{{#if componentProperties.informativalink}}{{{componentProperties.informativalink}}}.html{{else}}/content/eon-energia/informazioni-utili/informativa-privacy.html{{/if}}" target="_blank">
                                                                {{#if componentProperties.informativatitleUnderlinedPart}}{{componentProperties.informativatitleUnderlinedPart}}{{else}}Informativa Privacy *{{/if}}.
                                                                </a>'>
                                                        </eon-ui-rte-renderer>

                                                    </eon-ui-checkbox>
                                                </div>
                                                {{#if componentProperties.nascondiinformativaprivacyopzionale}}
                                                {{else}}
                                                {{#ifCond componentProperties.target '!==' 'condominioDL'}}
                                                <div class="{{#if prefilledFields.flagprivacy1}}d-none{{/if}}">
                                                    <eon-ui-checkbox
                                                            custom-error-message="Campo obbligatorio"
                                                            custom-required-message="Campo obbligatorio"
                                                            scheme=""
                                                            name="flag_privacy_1__c"
                                                            data-tagO2O="check trattamento dati"
                                                            a11y-aria-label="Seleziona se vuoi autorizzare il consenso al trattamento dati "
                                                            value="SI">
                                                        <eon-ui-rte-renderer
                                                                slot="html-label"
                                                                rte-source="rte"
                                                                class="eonui-info-icon-display items-center"
                                                                content='<eon-ui-text text-style="copy-small">Autorizzo E.ON Energia al trattamento dei miei dati per l’invio di offerte, promozioni, iniziative E.ON.</eon-ui-text>'>
                                                            <eon-ui-icon slot="info-icon" name="info" scheme=""
                                                                         a11y-aria-label="Icona che apre tooltip informativo"
                                                                         size="normal">
                                                                <eon-ui-tooltip slot="tooltip" size="small">
                                                                    <eon-ui-text text-style="copy-small"
                                                                                 a11y-aria-label="Finalità di
                                                                        Marketing: uno: Informarti con lettere ordinarie
                                                                        o chiamate telefoniche, email, SMS, MMS,
                                                                        notifiche e newsletter delle iniziative e
                                                                        offerte commerciali del Titolare; due: Proporti
                                                                        survey, questionari, sondaggi e ricerche di
                                                                        mercato, in particolare sui prodotti e servizi
                                                                        del Titolare e sul grado di soddisfazione del
                                                                        servizio reso dal Titolare; tre: Registrarti ai
                                                                        programmi fedeltà e partecipare alle iniziative
                                                                        e ai concorsi a premi organizzati dal Titolare.">
                                                                        Finalità di
                                                                        Marketing
<br>- Informarti con lettere ordinarie
                                                                        o chiamate telefoniche, email, SMS, MMS,
                                                                        notifiche e newsletter delle iniziative e
                                                                        offerte commerciali del Titolare;<br>- Proporti
                                                                        survey, questionari, sondaggi e ricerche di
                                                                        mercato, in particolare sui prodotti e servizi
                                                                        del Titolare e sul grado di soddisfazione del
                                                                        servizio reso dal Titolare;<br>- Registrarti ai
                                                                        programmi fedeltà e partecipare alle iniziative
                                                                        e ai concorsi a premi organizzati dal Titolare.
                                                                    </eon-ui-text>
                                                                </eon-ui-tooltip>
                                                            </eon-ui-icon>

                                                        </eon-ui-rte-renderer>
                                                    </eon-ui-checkbox>
                                                </div>
                                                {{/ifCond}}
                                                {{/if}}
                                            </eon-ui-checkbox-group>

                                        </div>
                                    </div>
                                    <div class="campiObbligatori col-xs-12 mb15 {{#if prefilledFields.flagprivacy3}}hidden{{else}}{{/if}}">
                                        <eon-ui-text scheme="red500" text-style="copy-small" internal-tag="p"
                                                     a11y-aria-label="i campi contrassegnati con asterisco sono obbligatori">
                                            *Campi obbligatori
                                        </eon-ui-text>
                                    </div>
                                </div>

                                <!--/* Submit button */-->
                                <div class="">
                                    <div class="submitButtonContainer recall-ropo-css-fix col-lg-12 col-md-12 col-sm-12 col-xs-12 mt30-tab flex pr0 pl0">
                                        <eon-ui-button text="{{{componentProperties.bottoneForm}}}"
                                                       a11y-aria-label="Clicca qui per inviare i dati"
                                                       input-type="submit" class="JS-submit mr20 lead-button" scheme=""
                                                       rank="primary"></eon-ui-button>
                                        {{#if prefilledFields.nascondiAnnulla}}
                                        {{else}}
                                        <eon-ui-button text="Annulla"
                                                       a11y-aria-label="Clicca qui per annullare l'inserimento dei dati"
                                                       class="JS-close-ropo annulla-button" scheme=""
                                                       rank="secondary"></eon-ui-button>
                                        {{/if}}
                                    </div>

                                </div>

                                <div class="">
                                    <div class="suggestion-copy col-xs-12 f14 mt20">
                                        <eon-ui-text scheme="" internal-tag="p" text-style="copy-small"
                                                     a11y-aria-label="{{{componentProperties.suggerimentoForm}}}">
                                            {{{componentProperties.suggerimentoForm}}}
                                        </eon-ui-text>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </eon-ui-form>
                </div>
            </div>

            <div class="JS-thank-you ctc-ropo-typage hidden">
                <!-- numero ricontatto -->
                {{#ifCond prefilledFields.nascondiricontatto '===' 'true'}}
                {{else}}
                <div class="mb25">
                    <div class="mb10">
                        <eon-ui-text class="mr15" text-style="copy" internal-tag="span"
                                     a11y-aria-label="{{componentProperties.recontacttext}}">
                            {{componentProperties.recontacttext}}
                        </eon-ui-text>
                    </div>
                    <div class="mb25">
                        <eon-ui-text text-style="copy" internal-tag="span" font-weight="900"
                                     class="recontact-number"
                                     a11y-aria-label="{{componentProperties.recontactnumber}}">
                            {{componentProperties.recontactnumber}}
                        </eon-ui-text>
                    </div>
                </div>
                {{/ifCond}}
                {{#if componentProperties.titoloThankyou}}
                <div class="copy-css-fix col-xs-12 col-sm-12 col-md-12 col-lg-12 pl0 pr0 mb10 {{#ifCond prefilledFields.nascondidataora '===' 'true'}}hidden{{else}}{{/ifCond}}">
                    <eon-ui-text text-style="copy" internal-tag="p"
                                 a11y-aria-label="{{componentProperties.titoloThankyou}}">
                        {{componentProperties.titoloThankyou}}
                    </eon-ui-text>
                </div>
                {{/if}}


                <div class="mb20 {{#ifCond prefilledFields.nascondidataora '===' 'true'}}hidden{{else}}{{/ifCond}}">
                    <div class="col-xs-12 mb20-mob">
                        <span class="mr25">
                             <eon-ui-text id="dateDisabled" scheme="" internal-tag="p" text-style="copy"
                                          font-weight="900"
                                          a11y-aria-label=""></eon-ui-text>
                        </span>

                        <span class="mr25">
                            <eon-ui-text id="timeDisabled" scheme="" internal-tag="p" text-style="copy"
                                     font-weight="900"
                                     a11y-aria-label=""></eon-ui-text>
                        </span>
                        <eon-ui-link class="addToCalendarButton" text="Salva sul calendario" icon="download"
                                     a11y-aria-label="Clicca qui per salvare l'appuntamento sul calendario"></eon-ui-link>

                    </div>
                    </div>


                <eon-ui-text class="mb0 mb15-mob mb15-tab" scheme="" internal-tag="p" text-style="copy" font-weight="900"
                             a11y-aria-label="{{{componentProperties.sottotitoloThankyou}}}">{{{componentProperties.sottotitoloThankyou}}}
                </eon-ui-text>
                <eon-ui-rte-renderer class="note-thank-you mb25" rte-source="quill"
                                     content='{{{componentProperties.noteThankyou}}}'></eon-ui-rte-renderer>

                {{#if componentProperties.componenteTradedoubler}}
                <img class="tradeDoublerImage" alt="" style="width:0; height:0; border:none; display:none" />
                {{/if}}

                <div class="footer-ropo-modal-typ flex">
                    <div class="torna-offerta flex items-center mr20">
                        {{#if componentProperties.buttontornaoffertetyplink}}
                        <eon-ui-button text="{{{componentProperties.buttontornaoffertetyplabel}}}"
                                       use-as-link="true" class="mr20"
                                       full-width="true" scheme="" rank="primary"
                                       href="{{{componentProperties.buttontornaoffertetyplink}}}.html"
                                       a11y-aria-label="Clicca qui per tornare all'offerta"></eon-ui-button>
                        {{/if}}

                        {{#if componentProperties.buttonhomepagelinkTYP}}
                        <eon-ui-button text="{{{componentProperties.buttonhomepagelabelTYP}}}"
                                       use-as-link="true"
                                       full-width="true" scheme="" rank="secondary"
                                       href="{{{componentProperties.buttonhomepagelinkTYP}}}.html"
                                       a11y-aria-label="Clicca qui per tornare all'homepage"></eon-ui-button>
                        {{/if}}
                    </div>
                </div>
            </div>

            <div class="JS-error-page hidden">
                {{#if componentProperties.isCerForm}}
                <div class="mb20">
                    <eon-ui-headline scheme="" text="Ops! Qualcosa è andato storto!" size="h4"
                                     headline-html-tag="h4"
                                     a11y-aria-label="Ops! Qualcosa è andato storto!"></eon-ui-headline>
                </div>
                <div class="mb20">
                    <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                                 a11y-aria-label="Non siamo riusciti a inviare i tuoi dati a causa di un errore tecnico. Ti consigliamo di riprovare tra qualche minuto.">
                        Non siamo riusciti a inviare i tuoi dati a causa di un errore tecnico. Ti consigliamo di
                        riprovare tra qualche minuto.
                    </eon-ui-text>
                </div>
                <div class="">
                    <div class="submitButtonContainer col-lg-4 col-md-12 col-sm-12 col-xs-12 mt30-tab flex justify-center-tab mt-30-md justify-center-md width100 justify-end pr0 pl0">
                        <eon-ui-button class="ctcConfirm GA-modal-exit" text="Riprova"
                                       a11y-aria-label="Clicca qui per riprovare"
                                       onclick="location.reload(true)"></eon-ui-button>
                        <eon-ui-button class="GA-form-button" text="{{componentProperties.buttonHomepageForm}}"
                                       a11y-aria-label="Clicca qui per tornare all'homepage"></eon-ui-button>
                    </div>
                </div>
                {{else}}
                <div class="mb20">
                    <eon-ui-headline scheme="" text="Ops! Si è verificato un errore." size="h4"
                                     headline-html-tag="h4"
                                     a11y-aria-label="Ops! Si è verificato un errore."></eon-ui-headline>
                </div>

                {{#if componentProperties.messaggioErrore}}
                <div class="note-thank-you mb20">
                    <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                                 a11y-aria-label="{{{componentProperties.messaggioErrore}}}">
                        {{{componentProperties.messaggioErrore}}}
                    </eon-ui-text>
                </div>
                {{else}}
                <div class="mb20">
                    <eon-ui-rte-renderer rte-source="quill" content='A causa di un errore tecnico non è stato
                    possibile prenotare l’appuntamento. Ti invitiamo a riprovare più tardi.
                    Per maggiori informazioni il nostro Servizio Clienti è sempre a tua disposizione, per scoprire come
                    contattarci visita la pagina dedicata <eon-ui-link text="qui" a11y-aria-label="Clicca qui per scoprire come contattare il servizio clienti"
                    href="https://www.eon-energia.com/contatti-e-punti-vendita.html" target="_blank">
                    </eon-ui-link>'>
                    </eon-ui-rte-renderer>
                </div>
                {{/if}}

                <div class="mt10 text-left flex">
                    <eon-ui-button
                            onclick="location.reload(true)"
                            text="Riprova"
                            class="mr30"
                            a11y-aria-label="Clicca qui per riprovare"
                            scheme="" rank="primary"></eon-ui-button>
                    {{#if componentProperties.contattiPuntiVenditaLink}}
                    <eon-ui-button
                            href="{{{componentProperties.contattiPuntiVenditaLink}}}.html"
                            use-as-link
                            text="Vai su Contatti e punti vendita"
                            a11y-aria-label="Clicca qui per andare nella sezione Contatti e punti vendita"
                            scheme="" rank="secondary"></eon-ui-button>
                    {{/if}}
                </div>
                {{/if}}
            </div>

            <div class="JS-already-client-page hidden">
                <div class="mb20">
                    <eon-ui-headline scheme="" text="Risulti già registrato nei nostri sistemi" size="h4"
                                     headline-html-tag="h4"
                                     a11y-aria-label="Risulti già registrato nei nostri sistemi">
                    </eon-ui-headline>
                </div>
                {{#if componentProperties.messaggioErrore}}
                <div class="note-thank-you mb20">{{{componentProperties.messaggioErrore}}}</div>
                {{else}}
                <div class="mb20">
                    <eon-ui-text scheme="" text-style="copy" internal-tag="p"
                                 a11y-aria-label="Per concludere il processo di adesione tramite uno dei nostri operatori, abbiamo bisogno del tuo consenso per ricontattarti telefonicamente.">
                        Per concludere il processo di adesione tramite uno dei nostri operatori, abbiamo bisogno
                        del tuo consenso per ricontattarti telefonicamente.
                    </eon-ui-text>
                </div>

                {{/if}}

                <eon-ui-form class="click-to-call-form-already-client"
                             name="click-to-call-form-already-client">
                    <!--/* Flag Privacy e SubmitButton */-->
                    <div class="">
                        <div class="ropoPrivacyContainer mt20 col-xs-12 pr0 pl0 {{#if prefilledFields.flagprivacy3}}{{else}}mb20{{/if}}">
                            <div class="flex justify-space flex-wrap flex-column">
                                <eon-ui-checkbox-group scheme="" name="ctc-group">
                                    <eon-ui-checkbox required="true"
                                                     custom-error-message="Acconsenti per continuare"
                                                     custom-required-message="Acconsenti per continuare"
                                                     a11y-aria-label="Seleziona per accettare l'informativa privacy"
                                                     scheme=""
                                                     name="flag_privacy_3__c"
                                                     data-tagO2O="check privacy"
                                                     value="SI">
                                        <eon-ui-rte-renderer
                                                slot="html-label"
                                                rte-source="aem"
                                                content='{{{componentProperties.informativatitleFirstPart}}} <eon-ui-link text="{{{componentProperties.informativatitleUnderlinedPart}}}" a11y-aria-label="Clicca qui per visualizzare la informativa Privacy"
                                                                href="{{{componentProperties.informativalink}}}" target="_blank">
                                                                </eon-ui-link>'>
                                        </eon-ui-rte-renderer>
                                    </eon-ui-checkbox>
                                </eon-ui-checkbox-group>
                            </div>
                        </div>
                        <div class="campiObbligatori col-xs-12 mb15 {{#if prefilledFields.flagprivacy3}}hidden{{else}}{{/if}}">
                            <eon-ui-text scheme="red500" text-style="copy-small" internal-tag="p"
                                         a11y-aria-label="i campi contrassegnati con asterisco sono obbligatori">
                                *Campi obbligatori
                            </eon-ui-text>
                        </div>
                        <div class="submitButtonContainer col-lg-4 col-md-12 col-sm-12 col-xs-12 mt30-tab flex-desk justify-center-tab mt-30-md justify-center-md width100 justify-end pr0 pl0">
                            <eon-ui-button text="{{{componentProperties.bottoneAlreadyClient}}}" input-type="submit"
                                           class="submitButtonAlreadyClient umb5-mob mr10-tab mr15-des" scheme=""
                                           a11y-aria-label="Clicca qui per inviare i dati"
                                           rank="primary"></eon-ui-button>
                            <eon-ui-button text="{{{componentProperties.buttonHomepageForm}}}" use-as-link="true"
                                           class="eon-button ita" scheme="red100" rank="secondary"
                                           a11y-aria-label="Clicca qui per tornare all'homepage"
                                           href="{{{componentProperties.buttonHomepageLinkForm}}}.html"></eon-ui-button>
                        </div>
                    </div>
                </eon-ui-form>
            </div>

            {{#if prefilledFields.isModal}}
        </div>

        <div class="loader-ropo-ui-kit hidden">
            <eon-ui-preloader-circle scheme="red500" size="normal"></eon-ui-preloader-circle>
            <eon-ui-text scheme="white" a11y-aria-label="Attendi, caricamento in corso...">
                Attendi, caricamento in corso...
            </eon-ui-text>
        </div>
    </eon-ui-modal>
    {{/if}}
</div>
{{/if}}
{{/if}}

<sly data-sly-include="/apps/eon/eon-aem-italia-energia/components/content/ctc-ropo/colored-bar-ty-page.html"></sly>