- state ||= nil
form#account_form[
  action="#{account_referrals_path}"
  method="POST"
  name="account_form"
  novalidate="true"
  ng-init="init({remote_state: '#{state}'})"
  ng-submit="$event.preventDefault()"
]
  #authorization_tabs.tabs.authorization_tabs
    = render partial: 'menu'
    #tabs-1.tab_item.first ng-if="steps.current(steps.FIRST)"
      p = raw t("affilate.form.step1")
      .tab_content
        .field_item.authorization_country.ng-cloak[
          ng-if="states.isBefore(states.PHONE_VERIFIED)"
        ]
          label
            = I18n.t :country, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_country_code"
            name="customer[country_code]"
            data-theme="cabinet_default"
            ng-model="customer.country"
            ng-select2="data.countries"
            ng-options="country.title for country in data.countries"
            required=""
            display-error=""
            autocomplete="country-name"
            ng-disabled="!data.countries"
            placeholder="#{I18n.t(:country_code, scope: [:account, :refferals, :placeholder])}"
            data-error-required="#{I18n.t(:blank, scope: [:errors, :country_code])}"
            data-error-server="#{I18n.t(:invalid, scope: [:errors, :country_code])}"
          ]
            option.empty_item

        .field_item.ng-cloak.authorization_phone_number[
          ng-form="forms.phoneForm"
          check-error="forms.phoneForm"
          check-error-object="customer"
          not_scroll_on_error="true"
        ]
          label
            = I18n.t :phone, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          .field_phone_number_item.country_code.f16
            input[
              id="customer_phone_code"
              name="customer[phone_code]"
              type="text"
              readonly="readonly"
              autocomplete="off"
              ng-model="customer.phone_code"
              placeholder="#{I18n.t(:phone_code, scope: [:account, :refferals, :placeholder])}"
              data-error-required="#{I18n.t(:blank, scope: [:errors, :phone_code])}"
            ]
            span.flag country-flag="customer.country"
            i = I18n.t :phone_code, scope: [:account, :refferals, :label]

          .field_phone_number_item.state_area_code
            input[
              id="customer_phone_area"
              name="customer[phone_area]"
              type="text"
              display-error=""
              only-numbers=""
              ng-maxlength="6"
              autocomplete="off"
              ng-model="customer.phone_area"
              ng-disabled="flags.profile_loading || states.isAfter(states.PHONE_VERIFIED)"
              placeholder="#{I18n.t(:phone_area, scope: [:account, :refferals, :placeholder])}"
              data-error-required="#{I18n.t(:blank, scope: [:errors, :phone_area])}"
              data-error-minlength="#{I18n.t(:too_short, scope: [:errors, :phone_area], count: 1)}"
              data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :phone_area], count: 6)}"
            ]
            i = I18n.t :phone_area, scope: [:account, :refferals, :label]

          .field_phone_number_item.phone_number
            input[
              id="customer_phone_number"
              name="customer[phone_number]"
              type="text"
              required=""
              display-error=""
              only-numbers=""
              ng-minlength="6"
              ng-maxlength="12"
              ng-disabled="flags.profile_loading || states.isAfter(states.PHONE_VERIFIED)"
              ng-model="customer.phone_number"
              placeholder="#{I18n.t(:phone_number, scope: [:account, :refferals, :placeholder])}"
              autocomplete="mobile tel"
              data-error-required="#{I18n.t(:blank, scope: [:errors, :phone_number])}"
              data-error-minlength="#{I18n.t(:too_short, scope: [:errors, :phone_number], count: 6)}"
              data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :phone_number], count: 12)}"
            ]
            i = I18n.t :phone_number, scope: [:account, :refferals, :label]

          a.button.medium href="" ng-show="states.isBefore(states.PHONE_VERIFIED)" ng-click="submit_phone($event, 'phone', forms.phoneForm)" = t :verify, scope: [:account, :refferals, :button]
          p ng-show="states.isAfter(states.PHONE_VERIFIED)" = t :verified, scope: [:account, :refferals, :button]


        .field_item.ng-cloak.authorization_email ng-form="forms.emailForm" ng-if="states.isAfter(states.PHONE_VERIFIED)"
          label
            = I18n.t :email, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          input[
            type="email"
            placeholder="#{I18n.t(:email, scope: [:account, :refferals, :placeholder])}"
            ng-model="customer.email"
            name="customer[email]"
            id="customer_email"
            display-error=""
            required=""
            check-email=""
            ng-maxlength="130"
            autocomplete="email"
            data-error-required="#{I18n.t(:blank, scope: [:errors, :email])}"
            data-error-email="#{I18n.t(:invalid, scope: [:errors, :email])}"
            data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :email], count: 130)}"
            data-error-server="#{I18n.t(:taken, scope: [:errors, :email])}"
          ]

          a.button.medium href="" ng-show="states.isBefore(states.EMAIL_VERIFIED)" ng-click="custom_submit($event, 'email', forms.emailForm)" = t :verify, scope: [:account, :refferals, :button]
          p ng-show="states.isAfter(states.EMAIL_VERIFIED)" = t :verified, scope: [:account, :refferals, :button]

      .authorization_submit_block.ng-cloak ng-show="states.isAfter(states.EMAIL_VERIFIED)"
        a.button href="" ng-click="steps.next($event)" = t :submit_step_1, scope: [:account, :refferals, :button]

    #tabs-2.tab_item.second.ng-cloak[
      ng-form="forms.profileForm"
      check-error="forms.profileForm"
      ng-if="steps.current(steps.SECOND)"
    ]
      p = raw t("affilate.form.step2")
      .tab_content
        .content_title
          h2 = t :main_info_block, scope: [:account, :refferals, :text]
        .field_item.authorization_name
          label
            = I18n.t :name, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          input[
            type="text"
            placeholder="#{I18n.t(:name, scope: [:account, :refferals, :placeholder])}"
            ng-model="customer.name"
            name="customer[name]"
            id="customer_name"
            autocomplete="name name"
            required=""
            check-extra-symbols=""
            ng-maxlength="130"
            display-error=""
            data-error-required="#{I18n.t(:blank, scope: [:errors, :name])}"
            data-error-extra-symbols="#{I18n.t(:extra_symbols, scope: [:errors, :name])}"
            data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :name], count: 130)}"
          ]

        .field_item.authorization_email
          label
            = I18n.t :email, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          .field_item_edit
            input[
              type="email"
              ng-model="customer.email"
              name="customer[email]"
              id="customer_email"
              readonly="readonly"
            ]

        .field_item.authorization_time_zone
          label
            = I18n.t :time_zone, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_time_zone"
            name="customer[time_zone]"
            data-theme="cabinet_default"
            ng-model="customer.time_zone"
            ng-select2="time_zones"
            ng-options="time_zone.title for time_zone in time_zones"
            required=""
            display-error=""
            ng-disabled="!time_zones"
            placeholder="#{I18n.t(:time_zone, scope: [:account, :refferals, :placeholder])}"
            data-error-required="#{I18n.t(:blank, scope: [:errors, :time_zone])}"
            data-error-server="#{I18n.t(:invalid, scope: [:errors, :time_zone])}"
          ]
            option.empty_item

        .field_item.authorization_phone_number
          label
            = I18n.t :phone_number, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          .field_phone_number_block
            p.country_flag.flag country-flag="customer.country"
            .field_phone_number_item.country_code.f16
              input[
                name="customer[phone_code]"
                type="text"
                readonly="readonly"
                autocomplete="off"
                ng-model="customer.phone_code"
              ]
              i = I18n.t :phone_code, scope: [:account, :refferals, :label]

            .field_phone_number_item.state_area_code
              input[
                name="customer[phone_area]"
                type="text"
                readonly="readonly"
                autocomplete="off"
                ng-model="customer.phone_area"
              ]
              i = I18n.t :phone_area, scope: [:account, :refferals, :label]

            .field_phone_number_item.phone_number
              input[
                id="customer_phone_number"
                name="customer[phone_number]"
                type="text"
                readonly="readonly"
                autocomplete="off"
                ng-model="customer.phone_number"
              ]
              i = I18n.t :phone_number, scope: [:account, :refferals, :label]

        .content_title
          h2 = t :other_info_block, scope: [:account, :refferals, :text]
        .field_item.authorization_birthday
          label
            = I18n.t :birthday, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_birth_day"
            name="customer[birth_day]"
            data-theme="cabinet_default select2-container_birthday"
            ng-model="customer.birth_day"
            ng-select2="days"
            ng-options="birth_day.title for birth_day in days"
            required=""
            display-error=""
            placeholder="#{I18n.t(:birth_day, scope: [:account, :refferals, :placeholder])}"
            data-minimum-results-for-search='-1'
            data-error-required="#{I18n.t(:blank, scope: [:errors, :birth_day])}"
            data-error-server="#{I18n.t(:invalid, scope: [:errors, :birth_day])}"
          ]
            option.empty_item

          select[
            id="customer_birth_month"
            name="customer[birth_month]"
            data-theme="cabinet_default select2-container_birthday"
            ng-model="customer.birth_month"
            ng-select2="monthes"
            ng-options="birth_month.title for birth_month in monthes"
            required=""
            display-error=""
            placeholder="#{I18n.t(:birth_month, scope: [:account, :refferals, :placeholder])}"
            data-minimum-results-for-search='-1'
            data-error-required="#{I18n.t(:blank, scope: [:errors, :birth_month])}"
            data-error-server="#{I18n.t(:invalid, scope: [:errors, :birth_month])}"
          ]
            option.empty_item

          select[
            id="customer_birth_year"
            name="customer[birth_year]"
            data-theme="cabinet_default select2-container_birthday"
            ng-model="customer.birth_year"
            ng-select2="years"
            ng-options="birth_year.title for birth_year in years"
            required=""
            display-error=""
            placeholder="#{I18n.t(:birth_year, scope: [:account, :refferals, :placeholder])}"
            data-minimum-results-for-search='-1'
            data-error-required="#{I18n.t(:blank, scope: [:errors, :birth_year])}"
            data-error-server="#{I18n.t(:invalid, scope: [:errors, :birth_year])}"
          ]
            option.empty_item

        .field_item.authorization_gender
          label
            = I18n.t :gender, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_gender"
            name="customer[gender]"
            data-theme="cabinet_default"
            ng-model="customer.gender"
            ng-select2="genders"
            ng-options="gender.title for gender in genders"
            required=""
            display-error=""
            placeholder="#{I18n.t(:gender, scope: [:account, :refferals, :placeholder])}"
            data-minimum-results-for-search='-1'
            data-error-required="#{I18n.t(:blank, scope: [:errors, :gender])}"
          ]
            option.empty_item

        .field_item.authorization_material_status
          label
            = I18n.t :marital_status, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_marital_status"
            name="customer[marital_status]"
            data-theme="cabinet_default"
            ng-model="customer.marital_status"
            ng-select2="marital_statuses"
            ng-options="marital_status.title for marital_status in marital_statuses"
            required=""
            display-error=""
            placeholder="#{I18n.t(:marital_status, scope: [:account, :refferals, :placeholder])}"
            data-minimum-results-for-search='-1'
            data-error-required="#{I18n.t(:blank, scope: [:errors, :marital_status])}"
          ]
            option.empty_item

        .field_item.authorization_industry_expertise
          label
            = I18n.t :industry_expertise, scope: [:account, :refferals, :label]
            sup = I18n.t :required, scope: [:account, :refferals, :symbol]
          select[
            id="customer_industry_expertise"
            name="customer[industry_expertise]"
            data-theme="cabinet_default"
            ng-model="customer.industry_expertise"
            ng-select2="industries"
            ng-options="industry_expertise.title for industry_expertise in industries"
            placeholder="#{I18n.t(:industry_expertise, scope: [:account, :refferals, :placeholder])}"
          ]
            option.empty_item

      .authorization_submit_block
        a.button[
          href="javascript:void(0);"
          ng-click="profile_submit($event, forms.profileForm)"
        ]
          = t :submit_step_2, scope: [:account, :refferals, :button]
        / a.button href="" ng-click="steps.next($event)" = t :submit_step_2, scope: [:account, :refferals, :button]

    #tabs-3.tab_item.third.ng-cloak ng-if="steps.current(steps.THIRD)"
      .tab_finish
        .tab_finish_title
          = ContentStorageType.affiliate_success.content!
          / h2 Congratulations!
          / span You have joined our Affiliate Program!
        = image_tag 'cabinet/affilate_finish.jpg'
      .authorization_submit_block
        a.button[
          href="#{account_referrals_path}"
        ]
          = t :submit_step_3, scope: [:account, :refferals, :button]

        / account_referrals_path
  = render partial: 'popups'