<!--================================================= QUICK SETUP =================================================-->
<div class="overlay overlay-white-9">
  {% if error_ceo %}
    <div class="row">
      <div class="col-xs-12 col-md-8">
        <div class="background-white center-middle-fixed shadow-large rounded-medium padding-large">
          <span class="close-quick-config">
            <i class="fas fa-times"></i>
          </span>
          <span class="text-large text-dark visible-block">{{ text_error_search }}</span>
          <span class="text-small text-gray visible-block top-padding-small">{{ text_search_info }}</span>
          <div class="top-padding-medium">
            <a class="cursor-pointer text-decoration-none text-error text-small js-error-ceo">
              <i class="fas fa-exclamation-triangle"></i>
              {{ text_show_error }}
            </a>
            <div class="padding-medium background-error rounded-x-small top-margin-medium hidden js-error-ceo-message">
              <span class="text-error text-small">{{ error_ceo.message }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  {% if not error_ceo %}
    <div id="quick-setup" class="background-white quick-setup-container center-middle-fixed shadow-large rounded-medium padding-large" data-info='{ "config_telephone": {{ config_telephone|json_encode() }} }' data-current-step="{{ current_step }}" data-finish-steps='{{ finish_steps|json_encode() }}'>
      <span class="close-quick-config">
        <i class="fas fa-times"></i>
      </span>

      <div id="step-1" class="step-1 hidden">
        <div class="row small-space-xs">
          <div class="col-xs-12">
            <div class="quick-setup-content-top">
              <div class="content-box text-center">
                <span class="text-primary text-bold bigger-text-x-large bottom-margin-small visible-block">
                  {{ text_ola }} {{ text_welcome }}
                </span>
                <span class="text-large">{{ text_start_config }}</span>
              </div>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="quick-setup-content padding-large" style="background: white; border-radius: 8px">
              <div class="row center-xs text-center middle-xs no-space-xs">
                <div class="col-xs-12 col-md-6">
                  <div class="content-box padding-large">
                    <img src="view/image/setup-admin.jpg" alt="Setup">
                  </div>
                </div>
                <div class="col-xs-12 col-md-6">
                  <div class="content-box padding-large">
                    <img src="../image/data/logo_sistema.png" alt="Logo Futura">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="quick-setup-content-bottom flex between-xs">
              <div class="vertical-padding-medium">
                <a class="text-decoration-none text-primary text-medium right-margin-medium js-remember-me" href="#">{{ text_remember }}</a>
                <a class="text-decoration-none text-primary text-medium js-cancel" href="#">{{ text_cancel }}</a>
              </div>
              <button type="button" class="btn-default btn-primary btn-medium js-next-step">
                <span>{{ text_start }}</button>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="step-2" class="step-2 hidden">
        <div class="quick-setup-content-top">
          <div class="row no-space-xs text-center">
            {% for step in steps %}
              <div id="{{ loop.index }}" class="col-xs js-container-stepline container-stepline stepline-step-{{ loop.index }} {{ step.finish ? 'finish' : '' }}">
                <span class="stepline-title">{{ loop.index }}. {{ step.title }}</span>
                <div class="container-stepline-ico">
                  <div class="circle stepline-ico text-medium">
                    <i class="fa {{ step.finish ? 'fa-check' : 'fa-minus' }}"></i>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="quick-setup-content">
          <form id="form-step-2" class="full-height">
            <div class="row small-space-xs">
              <div class="col-xs-12">
                <div class="content-box flex-row text-center padding-medium">
                  <span class="quick-setup-title text-x-large text-dark">{{ text_business_type }}</span>
                </div>
              </div>
              {% for key, status in Type_RamoEcommerce.getEnumList() %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box padding-medium flex center-xs middle-xs">
                    <img src="view/image/{{ status == 'Business to Business' ? 'b2b' : 'b2c' }}.png" alt="{{ status }}" class="circle bottom-margin-x-small vertical-padding-small right-margin-medium">
                    <label class="radio radio-inline">
                      <input type="radio" class="radio-entry" name="tipo_ramo" value="{{ key }}" {{ ftr_geral.isChecked(key, tipo_ramo) }}>
                      <span class="radio-text">{{ status }}</span>
                      <span class="radio-description">{{ status == 'Business to Business' ? text_B2B_description : text_B2C_description }}</span>
                    </label>
                  </div>
                </div>
              {% endfor %}
            </div>
          </form>
        </div>
        <div class="quick-setup-content-bottom">
          <div class="flex between-xs middle-xs">
            <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
              <span>{{ text_back }}</span>
            </a>
            <button id="send-form-step-2" type="button" class="btn-default btn-medium btn-primary js-btn-save-and-go-next">
              <span>{{ text_next }}</span>
            </button>
          </div>
        </div>
      </div>
      <div id="step-3" class="step-3 hidden">
        <div class="quick-setup-content-top">
          <div class="row no-space-xs text-center">
            {% for step in steps %}
              <div id="{{ loop.index }}" class="col-xs js-container-stepline container-stepline stepline-step-{{ loop.index }} {{ step.finish ? 'finish' : '' }}">
                <span class="stepline-title">{{ loop.index }}. {{ step.title }}</span>
                <div class="container-stepline-ico">
                  <div class="circle stepline-ico text-medium">
                    <i class="fa {{ step.finish ? 'fa-check' : 'fa-minus' }}"></i>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="quick-setup-content">
          <form id="form-step-3" class="full-height">
            <div class="row no-space-xs">
              <div class="col-xs-12">
                <div class="content-box flex-row text-center padding-medium">
                  <span class="quick-setup-title text-large text-dark">{{ text_general_settings }}</span>
                </div>
              </div>
              <div class="col-xs-12 col-md-6">
                <div class="content-box padding-medium">
                  <div class="row no-space-xs">

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_owner }}</span>
                      <input type="text" name="config_owner" id="config_owner" class="field-entry" value="{{ config_owner }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_name }}</span>
                      <input type="text" name="config_name" id="config_name" class="field-entry" value="{{ config_name }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_cnpj }}</span>
                      <input type="text" name="config_cnpj" id="config_cnpj" class="field-entry mask-cnpj" value="{{ config_cnpj }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_ie }}</span>
                      <input type="text" name="config_ie" id="config_ie" class="field-entry" value="{{ config_ie }}">
                    </label>

                    <div class="col-xs-12">
                      <div class="js-telephone-container"></div>
                      <button type="button" class="btn-default btn-medium btn-primary bottom-margin-medium js-add-telephone">
                        <span>{{ text_add_telephone }}</span>
                      </button>
                    </div>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_email }}</span>
                      <input type="text" name="config_email" id="config_email" class="field-entry" value="{{ config_email }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_timezone }}</span>
                      <select class="field-entry" name="config_time_zone">
                        {% for time_zone in time_zones %}
                          <option value="{{ time_zone }}" {{ time_zone == config_time_zone ? 'selected="selected"' : '' }} >
                            {{ time_zone }}
                          </option>
                        {% endfor %}
                      </select>
                    </label>

                    <label class="checkbox checkbox-medium bottom-padding-medium">
                      <input type="checkbox" name="config_mode_orcamento" id="config_mode_orcamento" class="checkbox-entry" value="1" {{ config_mode_orcamento ? 'checked="checked"' : '' }}>
                      <span class="checkbox-text">{{ text_budget_mode }}</span>
                    </label>

                    <label class="checkbox checkbox-medium bottom-padding-medium js-config-st hidden">
                      <input type="checkbox" name="config_mode_st" id="config_mode_st" class="checkbox-entry js-habilitar-st" value="1" {{ config_mode_st ? 'checked="checked"' : '' }}>
                      <span class="checkbox-text">{{ text_st_mode }}</span>
                    </label>

                    <div class="col-xs-6 js-empresa-st hidden">
                      <label class="field field-medium bottom-padding-small">
                        <select name="config_mode_st_idempresa" class="field-entry">
                          {% for empresa in empresas %}
                            <option value="{{ empresa.id }}" {{ empresa.select ? 'selected' : '' }} >
                              {{ empresa.name }}
                            </option>
                          {% endfor %}
                        </select>
                      </label>
                      <span class="text-small text-gray">{{ text_id_st }}</span>
                    </div>

                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-md-6">
                <div class="content-box padding-medium">
                  <div class="row no-space-xs">

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_cep }}</span>
                      <input type="text" name="easyconfig_postcode" id="easyconfig_postcode" class="field-entry mask-cep" value="{{ easyconfig_postcode }}">
                    </label>

                    <div class="row small-space-xs">
                      <div class="col-xs-9">
                        <label class="field field-medium bottom-padding-medium">
                          <span class="field-label">{{ text_street }}</span>
                          <input type="text" name="easyconfig_street" id="easyconfig_street" class="field-entry" value="{{ easyconfig_street }}">
                        </label>
                      </div>
                      <div class="col-xs-3">
                        <label class="field field-medium bottom-padding-medium">
                          <span class="field-label">{{ text_number }}</span>
                          <input type="text" name="easyconfig_number" id="easyconfig_number" class="field-entry" value="{{ easyconfig_number }}">
                        </label>
                      </div>
                    </div>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_district }}</span>
                      <input type="text" name="easyconfig_district" id="easyconfig_district" class="field-entry" value="{{ easyconfig_district }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_complemento }}</span>
                      <input type="text" name="easyconfig_complemento" id="easyconfig_complemento" class="field-entry" value="{{ easyconfig_complemento }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_city }}</span>
                      <input type="text" name="easyconfig_city" id="easyconfig_city" class="field-entry" value="{{ easyconfig_city }}">
                    </label>

                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_state }}</span>
                      <select type="text" name="easyconfig_state" id="easyconfig_state" class="field-entry">
                        <option value=""></option>
                        {% for key, value in Type_Estados.getEnumList() %}
                          <option value="{{ key }}" {{ ftr_geral.isSelected(key, easyconfig_state) }}>
                            {{ value }}
                          </option>
                        {% endfor %}
                      </select>
                    </label>

                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="quick-setup-content-bottom flex between-xs middle-xs">
          <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
            <span>{{ text_back }}</span>
          </a>
          <div class="flex">
            <button type="button" class="btn-default btn-medium btn-outline text-primary js-next-step right-margin-small">
              <span>{{ text_jump }}</span>
            </button>
            <button id="send-form-step-3" type="button" class="btn-default btn-medium btn-primary js-btn-save-and-go-next">
              <span>{{ text_next }}</span>
            </button>
          </div>
        </div>
      </div>
      <div id="step-4" class="step-4 hidden">
        <div class="quick-setup-content-top">
          <div class="row no-space-xs text-center">
            {% for step in steps %}
              <div id="{{ loop.index }}" class="col-xs js-container-stepline container-stepline stepline-step-{{ loop.index }} {{ step.finish ? 'finish' : '' }}">
                <span class="stepline-title">{{ loop.index }}. {{ step.title }}</span>
                <div class="container-stepline-ico">
                  <div class="circle stepline-ico text-medium">
                    <i class="fa {{ step.finish ? 'fa-check' : 'fa-minus' }}"></i>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="quick-setup-content">
          <form id="form-step-4" class="full-height">
            <div class="row small-space-xs center-xs">
              <div class="col-xs-12 col-md-6">
                <div class="content-box flex-row text-center padding-medium">
                  <span class="quick-setup-title text-large text-dark">{{ text_view_settings }}</span>
                </div>
                <div class="content-box padding-medium">
                  <div class="config-colors">
                    <label class="field field-medium bottom-padding-medium">
                      <span class="field-label">{{ text_title }}</span>
                      <input type="text" id="config_title" name="config_title" class="field-entry" value="{{ config_title }}">
                    </label>
                    <div class="flex flex-row middle-xs">
                      <div class="full-width bottom-margin-x-small">
                        <span class="text-dark text-small text-bold visible-block">{{ text_logo }}</span>
                      </div>
                      <div class="flex-0 background-white border-gray right-margin-medium hidden-overflow cursor-pointer logo-colors" style="width: 5rem; height: 5rem;">
                        <img id="img_config_logo" src="{{ logo_view ? logo_view : 'view/image/sem-imagem.png' }}" alt="Logo" class="js-open-file-manager" width="80" height="80">
                        <input type="hidden" id="config_logo" name="config_logo" class="field-entry" value="{{ logo ? logo : '' }}">
                      </div>
                      <div class="flex-1 text-ellipsis">
                        <div class="flex flex-row">
                          <button type="button" class="btn-default top-margin-small right-margin-small btn-primary btn-small js-open-file-manager">
                            <span>{{ text_choice }}</span>
                          </button>
                          <button type="button" class="btn-default top-margin-small btn-outline btn-small js-btn-clear-image">
                            <span>{{ text_remove }}</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="cores-principais top-padding-medium">
                    <div class="personalize">
                      <div class="row small-space-xs bottom-xs">
                        <div class="col-xs-6">
                          <label class="field field-medium">
                            <span class="field-label">{{ text_primary_color }}</span>
                            <input type="text" id="primary_color" name="primary_color" value="{{ wg24_mm_bgcol }}" class="jscolor {required:false,hash:true} field-entry" size="7">
                          </label>
                        </div>
                        <div class="col-xs-6">
                          <label class="field field-medium">
                            <span class="field-label">{{ text_secondary_color }}</span>
                            <input type="text" id="secondary_color" name="secondary_color" value="{{ wg24_l_body_tbc }}" class="jscolor {required:false,hash:true} field-entry" size="7">
                          </label>
                        </div>
                        <div class="col-xs-12">
                          <div class="flex">
                            <button type="button" id="exchange-colors" class="btn-default btn-primary btn-medium right-margin-small">
                              <i class="fas fa-exchange-alt"></i>
                            </button>
                            <button type="button" id="corespadroes" class="btn-default btn-primary btn-medium">
                              <span>{{ text_detect_colors }}</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-md-8">
                <div class="content-box">
                  <div class="color-pallet">
                    <div class="flex center-xs">
                      <span class="text-large text-dark text-center bottom-margin-small">{{ text_click_choice_colors }}</span>
                    </div>
                    <div class="row between-xs x-small-space-xs small-space-ms top-margin-small">
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color0" class="field-entry input-color-option" name="color0" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color1" class="field-entry input-color-option" name="color1" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color2" class="field-entry input-color-option" name="color2" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color3" class="field-entry input-color-option" name="color3" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color4" class="field-entry input-color-option" name="color4" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color5" class="field-entry input-color-option" name="color5" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color6" class="field-entry input-color-option" name="color6" value="">
                        <div class="setted-color"></div>
                      </label>
                      <label class="field field-medium input-color-pallet col-xs rel">
                        <input type="text" id="color7" class="field-entry input-color-option" name="color7" value="">
                        <div class="setted-color"></div>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="quick-setup-content-bottom flex between-xs middle-xs">
          <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
            <span>{{ text_back }}</span>
          </a>
          <div class="flex">
            <button type="button" class="btn-default btn-medium btn-outline text-primary js-next-step right-margin-small">
              <span>{{ text_jump }}</span>
            </button>
            <button type="button" id="send-form-step-4" class="btn-default btn-medium btn-primary js-btn-save-and-go-next">
              <span>{{ text_next }}</span>
            </button>
          </div>
        </div>
      </div>
      <div id="step-5" class="step-5 hidden">
        <div class="quick-setup-content-top">
          <div class="row no-space-xs text-center">
            {% for step in steps %}
              <div id="{{ loop.index }}" class="col-xs js-container-stepline container-stepline stepline-step-{{ loop.index }} {{ step.finish ? 'finish' : '' }}">
                <span class="stepline-title">{{ loop.index }}. {{ step.title }}</span>
                <div class="container-stepline-ico">
                  <div class="circle stepline-ico text-medium">
                    <i class="fa {{ step.finish ? 'fa-check' : 'fa-minus' }}"></i>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="quick-setup-content">
          <form id="form-step-5" class="full-height">
            <div class="row no-space-xs">
              <div class="col-xs-12">
                <div class="flex center-xs padding-medium">
                  <span class="quick-setup-title text-dark text-large text-center visible-block">{{ text_email_settings }}</span>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="padding-medium">
                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ entry_email }}</span>
                    <span class="field-description">{{ entry_email_obs }}</span>
                    <input type="text" name="config_email" class="field-entry" value="{{ config_email }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ entry_mail_protocol }}</span>
                    <span class="field-description">{{ entry_mail_protocol_obs }}</span>
                    <select class="field-entry" name="config_mail_protocol" id="config_mail_protocol">
                      {% for key, status in Type_EmailProtocol.getEnumList() %}
                        <option value="{{ key }}" {{ ftr_geral.isSelected(key, config_mail_protocol) }} >{{ status }}</option>
                      {% endfor %}
                    </select>
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ entry_mail_parameter }}</span>
                    <span class="field-description">{{ entry_mail_parameter_obs }}</span>
                    <input type="text" name="config_mail_parameter" id="config_mail_parameter" class="field-entry" value="{{ config_mail_parameter }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ text_server_smtp }}</span>
                    <input type="text" name="config_smtp_host" id="config_smtp_host" class="field-entry" value="{{ config_smtp_host }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ text_user_smtp }}</span>
                    <input type="text" name="config_smtp_username" id="config_smtp_username" class="field-entry" value="{{ config_smtp_username }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ text_password_smtp }}</span>
                    <input type="password" name="config_smtp_password" id="config_smtp_password" class="field-entry" value="{{ config_smtp_password }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ text_port_smtp }}</span>
                    <input type="text" name="config_smtp_port" id="config_smtp_port" class="field-entry" value="{{ config_smtp_port }}">
                  </label>

                  <label class="field field-medium bottom-padding-medium">
                    <span class="field-label">{{ entry_smtp_timeout }}</span>
                    <input type="text" name="config_smtp_timeout" id="config_smtp_timeout" class="field-entry" value="{{ config_smtp_timeout }}">
                  </label>

                  <label class="field field-medium">
                    <span class="field-label">{{ text_smtp_connect_email }}</span>
                    <span class="field-description">{{ entry_mail_test_obs }}</span>
                    <input type="text" name="config_email_test" id="config_email_test" class="field-entry" value="{{ config_email }}">
                    <button class="btn-default btn-medium btn-primary btn-connect-test top-margin-small">
                      <span>{{ text_send_email }}</span>
                    </button>
                  </label>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6">
                <div class="content-box padding-medium">
                  <div class="bottom-padding-medium">
                    <span class="text-small text-dark text-bold visible-block">{{ text_alert_new_order }}</span>
                    {% for key, value in Type_DsimDnao.getEnumList() %}
                      <label class="radio radio-medium radio-inline bottom-padding-medium">
                        <input type="radio" name="config_alert_mail" class="radio-entry" value="{{ key }}" {{ ftr_geral.isChecked(key, config_alert_mail, Type_DsimDnao.Tp_Sim) }}>
                        <span class="radio-text">{{ value }}</span>
                      </label>
                    {% endfor %}
                  </div>

                  <div class="bottom-padding-medium">
                    <span class="text-small text-dark text-bold visible-block">{{ text_alert_new_account }}</span>
                    {% for key, value in Type_DsimDnao.getEnumList() %}
                      <label class="radio radio-medium radio-inline bottom-padding-medium">
                        <input type="radio" name="config_account_mail" class="radio-entry" value="{{ key }}" {{ ftr_geral.isChecked(key, config_account_mail, Type_DsimDnao.Tp_Sim) }}>
                        <span class="radio-text">{{ value }}</span>
                      </label>
                    {% endfor %}
                  </div>

                  <label class="field field-medium">
                    <span class="field-label">{{ text_alert_additional_emails }}</span>
                    <span class="field-description">{{ text_additional_emails_description }}</span>
                    <textarea id="config_alert_emails" name="config_alert_emails" class="field-entry config_alert_emails">{{ config_alert_emails }}</textarea>
                  </label>

                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="quick-setup-content-bottom flex between-xs middle-xs">
          <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
            <span>{{ text_back }}</span>
          </a>
          <div class="flex">
            <button type="button" class="btn-default btn-medium btn-outline text-primary js-next-step right-margin-small">
              <span>{{ text_jump }}</span>
            </button>
            <button type="button" id="send-form-step-5" class="btn-default btn-medium btn-primary js-btn-save-and-go-next">
              <span>{{ text_next }}</span>
            </button>
          </div>
        </div>
      </div>
      <div id="step-6" class="step-6 hidden">
        <div class="quick-setup-content-top">
          <div class="row no-space-xs text-center">
            {% for step in steps %}
              <div id="{{ loop.index }}" class="col-xs js-container-stepline container-stepline stepline-step-{{ loop.index }} {{ step.finish ? 'finish' : '' }}">
                <span class="stepline-title">{{ loop.index }}. {{ step.title }}</span>
                <div class="container-stepline-ico">
                  <div class="circle stepline-ico text-medium">
                    <i class="fa {{ step.finish ? 'fa-check' : 'fa-minus' }}"></i>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="quick-setup-content">
          <form id="form-step-6" class="full-height">
            <div class="row center-xs middle-xs full-height">
              <div class="col-xs-12">
                <div class="flex center-xs">
                  <span class="quick-setup-title text-large text-dark">{{ text_social_networks }}</span>
                </div>
              </div>
              <div class="col-xs-12">
                <div class="content-box">
                  <div class="row center-xs social rel bottom-padding-medium">
                    {% for key, value in socialNetwork %}
                      {% if not value.url %}
                        <div class="padding-x-small redes">
                          <button type="button" class="{{ value.class }} btn-default btn-medium-square" style="color: white; max-width: 30px" title="{{ value.title }}" data-id="{{ key }}">
                            <i class="{{ value.class == 'rss' ? 'fas' : 'fab' }} fa-{{ value.class }}"></i>
                          </button>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                  <span class="text-small text-center top-margin-small visible-block">{{ text_social_networks_description }}</span>
                </div>
              </div>
              <div class="col-xs-12 col-md-8">
                <div class="row small-space-xs rede-inputs">
                  {% for key, value in socialNetwork %}
                    {% if value.url %}
                      <div class="col-xs-12 field-group">
                        <div class="field-entry-group rel">
                          <button type="button" class="{{ value.class }} btn-default btn-medium-square js-btn-icon" style="color: white; max-width: 30px" title="{{ value.title }}" data-id="{{ key }}">
                            <i class="{{ value.class == 'rss' ? 'fas' : 'fab' }} fa-{{ value.class }}"></i>
                          </button>
                          <label class="field field-medium">
                            <input type="text" name="{{ key }}" id="{{ key }}" class="field-entry" value="{{ value.url }}">
                          </label>
                          <button type="button" class="btn-default btn-medium-square btn-error js-btn-remove-redes" style="max-width: 30px">
                            <i class="fas fa-trash"></i>
                          </button>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="quick-setup-content-bottom flex between-xs bottom-xs">
          <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
            <span>{{ text_back }}</span>
          </a>
          <div class="flex">
            <button type="button" class="btn-default btn-medium btn-outline text-primary js-next-step right-margin-small">
              <span>{{ text_jump }}</span>
            </button>
            <button type="button" id="send-form-step-6" class="btn-default btn-medium btn-primary js-btn-save-and-go-next">
              <span>{{ text_next }}</span>
            </button>
          </div>
        </div>
      </div>
      <div id="step-7" class="step-7 hidden">
        <div class="row no-space-xs flex center-xs">
          <div class="col-xs-12">
            <div class="quick-setup-content-top">
              <div class="content-box text-center bottom-padding-large">
                <span class="text-primary text-bold bigger-text-x-large bottom-padding-medium visible-block">
                  {{ text_oba }} {{ text_finish }}
                </span>
                <span class="text-large">{{ text_enjoy }}</span>
              </div>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="quick-setup-content">
              <div class="content-box flex center-xs">
                <img class="padding-large" src="view/image/setup-admin.jpg" style="border-radius: 50%; background: white;" alt="Setup">
              </div>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="quick-setup-content-bottom flex between-xs middle-xs">
              <a href="#" class="text-decoration-none text-primary text-medium js-prev-step">
                <span>{{ text_back }}</span>
              </a>
              <button type="button" class="btn-default btn-medium btn-primary js-cancel">
                <span>{{ text_lets_go }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  {% endif %}
</div>
<script src="view/javascript/jscolor/jscolor.js"></script>
<script src="view/javascript/jscolor/demofont.js"></script>
<script src="view/javascript/chroma/chroma.min.js"></script>
<script src="view/javascript/colorthief/color-thief.js"></script>
<script src="view/javascript/colors.js"></script>
<script>

  var typePhone = {{ Type_Phone|json_encode() }},
      errorCeo = Boolean('{{ error_ceo.message }}');
</script>
<script src="{{ easyconfigure_js }}"></script>
