.settings_about_block[
  ng-class="{'pending-changes': blocks.is_changed('personal')}"
  ng-form="forms.personalForm"
  check-error="forms.personalForm"
  data-check-error-object="account"
  ng-submit="submit($event, 'personal', forms.personalForm)"
  ng-init="init('account')"
]
  .field_item.field_name
    label
      = t :first_name, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        type="text"
        placeholder="#{t(:first_name, scope: [:account, :profile, :placeholder])}"
        ng-model="account.first_name"
        name="account[first_name]"
        id="customer_first_name"
        autocomplete="name first_name"
        required=""
        check-extra-symbols=""
        ng-maxlength="130"
        display-error=""
        data-error-required="#{t(:blank, scope: [:errors, :first_name])}"
        data-error-extra-symbols="#{t(:extra_symbols, scope: [:errors, :first_name])}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :first_name], count: 130)}"
        data-tail-elements=".edit-icon"
      ]
      span.edit-icon
  .field_item.field_last_name
    label
      = t :last_name, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        type="text"
        placeholder="#{t(:last_name, scope: [:account, :profile, :placeholder])}"
        ng-model="account.last_name"
        name="account[last_name]"
        id="customer_last_name"
        autocomplete="name last_name"
        required=""
        check-extra-symbols=""
        ng-maxlength="130"
        display-error=""
        data-error-extra-symbols="#{t(:extra_symbols, scope: [:errors, :last_name])}"
        data-error-required="#{t(:blank, scope: [:errors, :last_name])}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :last_name], count: 130)}"
        data-tail-elements=".edit-icon"
      ]
      span.edit-icon

  .field_item.field_company_name
    label
      = t :company, scope: [:account, :profile, :label]
    .field_item_edit
      input[
        type="text"
        placeholder="#{t(:company, scope: [:account, :profile, :placeholder])}"
        ng-model="account.company_name"
        name="account[company_name]"
        id="customer_company_name"
        display-error=""
        ng-maxlength="130"
        autocomplete="organization"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :company], count: 130)}"
        data-tail-elements=".edit-icon"
      ]
      span.edit-icon

  .field_item.field_time_zone
    label
      = t :time_zone, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      select.select2-hidden-accessible[
        id="customer_time_zone"
        name="account[time_zone]"
        ng-model="account.time_zone"
        ng-select2=""
        required=""
        data-theme="cabinet_default"
        display-error=""
        autocomplete="time_zone"
        placeholder="#{t(:time_zone, scope: [:account, :profile, :placeholder])}"
        data-error-required="#{t(:blank, scope: [:errors, :time_zone])}"
      ]
        = time_zone_options_for_select

  .settings_save
    / ng-show="isChangedBlock('personal')"
    button.button.ng-cloak[
      ng-click="submit($event, 'personal', forms.personalForm)"
      ng-disabled="forms.personalForm.$submitted"
      ng-disabled-with="#{t(:submit_personal_disabled, scope: [:account, :profile, :button])}"
    ]
      = t :submit_personal, scope: [:account, :profile, :button]

.settings_about_block[
  ng-class="{'pending-changes': blocks.is_changed('phone')}"
  ng-form="forms.phoneForm"
  check-error="forms.phoneForm"
  data-check-error-object="account"
  ng-submit="submit($event, 'phone', forms.phoneForm)"
]
  .field_item.field_country
    label
      = t :country, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    select.select2-hidden-accessible[
      id="account_country_code"
      name="account[country_code]"
      ng-model="account.country"
      ng-select2="countries"
      ng-options="country.title for country in countries"
      required=""
      data-theme="cabinet_default"
      display-error=""
      autocomplete="country-name"
      placeholder="#{t(:country_code, scope: [:account, :profile, :placeholder])}"
      data-error-required="#{t(:blank, scope: [:errors, :country_code])}"
      data-error-server="#{t(:invalid, scope: [:errors, :country_code])}"
    ]
      option.empty_item

  .field_item.field_phone_number.f24
    label
      = t :phone, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_phone_number_item.country_code
      input[
        id="account_phone_code"
        name="account[phone_code]"
        type="text"
        readonly="readonly"
        autocomplete="off"
        ng-model="account.phone_code"
        placeholder="#{t(:phone_code, scope: [:account, :profile, :placeholder])}"
        data-error-required="#{t(:blank, scope: [:errors, :phone_code])}"
      ]
      span.flag country-flag="account.country"
      i = t :phone_code, scope: [:account, :profile, :label]
    .field_phone_number_item.state_area_code
      input[
        id="account_phone_area"
        name="account[phone_area]"
        type="text"
        display-error=""
        only-numbers=""
        ng-maxlength="6"
        autocomplete="off"
        ng-model="account.phone_area"
        placeholder="#{t(:phone_area, scope: [:account, :profile, :placeholder])}"
        data-error-required="#{t(:blank, scope: [:errors, :phone_area])}"
        data-error-minlength="#{t(:too_short, scope: [:errors, :phone_area], count: 1)}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :phone_area], count: 6)}"
      ]
      i = t :phone_area, scope: [:account, :profile, :label]
    .field_phone_number_item.phone_number
      input[
        id="account_phone_number"
        name="account[phone_number]"
        type="text"
        required=""
        display-error=""
        only-numbers=""
        ng-minlength="6"
        ng-maxlength="12"
        ng-model="account.phone_number"
        placeholder="#{t(:phone_number, scope: [:account, :profile, :placeholder])}"
        autocomplete="mobile tel"
        data-error-required="#{t(:blank, scope: [:errors, :phone_number])}"
        data-error-minlength="#{t(:too_short, scope: [:errors, :phone_number], count: 6)}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :phone_number], count: 12)}"
        data-tail-elements=".edit-icon"
      ]
      span.edit-icon
      i = t :phone_number, scope: [:account, :profile, :label]

  .settings_save
    / ng-show="isChangedBlock('phone')"
    button.button.ng-cloak[
      ng-click="submit($event, 'phone', forms.phoneForm)"
      ng-disabled="forms.phoneForm.$submitted"
      ng-disabled-with="#{t(:submit_phone_disabled, scope: [:account, :profile, :button])}"
    ]
      = t :submit_phone, scope: [:account, :profile, :button]

.settings_about_block.ng-cloak[
  ng-class="{'pending-changes': blocks.is_changed('email')}"
  ng-form="forms.emailForm"
  check-error="forms.emailForm"
  data-check-error-object="account"
  ng-submit="submit($event, 'email', forms.emailForm)"
]
  .field_item.field_email
    label
      = t :email, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        type="email"
        placeholder="{{escaped_email}}"
        ng-model="account.email"
        name="account[email]"
        id="customer_email"
        display-error=""
        required=""
        check-email=""
        ng-maxlength="130"
        autocomplete="email"
        data-error-required="#{t(:blank, scope: [:errors, :email])}"
        data-error-email="#{t(:invalid, scope: [:errors, :email])}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :email], count: 130)}"
        data-error-server="#{t(:taken, scope: [:errors, :email])}"
        data-tail-elements=".edit-icon"
      ]
      span.edit-icon

  .settings_save
    / ng-show="isChangedBlock('email')"
    button.button.ng-cloak[
      ng-click="submit($event, 'email', forms.emailForm)"
      ng-disabled="forms.emailForm.$submitted"
      ng-disabled-with="#{t(:submit_email_disabled, scope: [:account, :profile, :button])}"
    ]
      = t :submit_email, scope: [:account, :profile, :button]

.settings_about_block[
  ng-class="{'pending-changes': blocks.is_changed('password')}"
  ng-form="forms.passwordForm"
  check-error="forms.passwordForm"
  data-check-error-object="account"
  ng-submit="submit($event, 'password', forms.passwordForm)"
]
  .field_item.field_password
    label
      = t :current_password, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        id="customer_current_password"
        name="account[current_password]"
        type="password"
        ng-minlength="6"
        ng-maxlength="128"
        display-error=""
        ng-showpassword=""
        display-error-bound="account.current_password"
        equals="account.current_password"
        autocomplete="off"
        placeholder="#{t(:current_password, scope: [:account, :profile, :placeholder])}"
        ng-model="account.current_password"
        ng-required="true"
        data-error-required="#{t(:blank, scope: [:errors, :current_password])}"
        data-error-minlength="#{t(:too_short, scope: [:errors, :current_password], count: 6)}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :current_password], count: 128)}"
        data-error-equals="#{t(:confirmation, scope: [:errors, :current_password])}"
        data-error-server="#{t(:invalid, scope: [:account, :new_ticket, :errors])}"
      ]

  .field_item.field_password
    label
      = t :password, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        id="customer_password"
        name="account[password]"
        type="password"
        autocomplete="off"
        placeholder="#{t(:password, scope: [:account, :profile, :placeholder])}"
        ng-showpassword=""
        ng-minlength="6"
        ng-maxlength="128"
        display-error=""
        ng-model="account.password"
        ng-required="true"
        data-error-required="#{t(:blank, scope: [:errors, :password])}"
        data-error-minlength="#{t(:too_short, scope: [:errors, :password], count: 6)}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :password], count: 128)}"
      ]

  .field_item.field_password
    label
      = t :password_confirmation, scope: [:account, :profile, :label]
      sup = t :required, scope: [:account, :profile, :symbol]
    .field_item_edit
      input[
        id="customer_password_confirmation"
        name="account[password_confirmation]"
        type="password"
        ng-minlength="6"
        ng-maxlength="128"
        display-error=""
        ng-showpassword=""
        display-error-bound="account.password"
        equals="account.password"
        autocomplete="off"
        placeholder="#{t(:password_confirmation, scope: [:account, :profile, :placeholder])}"
        ng-model="account.password_confirmation"
        ng-required="true"
        data-error-required="#{t(:blank, scope: [:errors, :password_confirmation])}"
        data-error-minlength="#{t(:too_short, scope: [:errors, :password_confirmation], count: 6)}"
        data-error-maxlength="#{t(:too_long, scope: [:errors, :password_confirmation], count: 128)}"
        data-error-equals="#{t(:confirmation, scope: [:errors, :password_confirmation])}"
      ]

  .settings_save
    / ng-show="isChangedBlock('password')"
    button.button.ng-cloak[
      ng-click="submit($event, 'password', forms.passwordForm)"
      ng-disabled="forms.passwordForm.$submitted"
      ng-disabled-with="#{t(:submit_password_disabled, scope: [:account, :profile, :button])}"
    ]
      = t :submit_password, scope: [:account, :profile, :button]