- if @billing_pref.editable?
  .settings_about_block[
    ng-form="forms.billingForm"
    ng-init="init('billing', #{@billing_pref.params.to_json})"
    check-error="forms.billingForm"
    ng-submit="submit($event, 'billing', forms.billingForm)"
    ng-class="{'pending-changes': blocks.is_changed('billing')}"
  ]
    .field_item.field_account_type
      label
        = I18n.t :account_type, scope: [:account, :billing, :label]
      - AccountType.all.each do |type|
        .field_item_radio
          .radio
            span ng-class="{'checked': billing.account_type_id == #{type.id} }"
              input[
                type="radio"
                name="account[account_type_id]"
                id="account_type_id_#{type.id}"
                value="#{type.id}"
                ng-model="billing.account_type_id"
              ]
          label for="account_type_id_#{type.id}"
            span = type.title

    .field_item.field_country
      label
        = I18n.t :country, scope: [:account, :billing, :label]
      select[
        id="account_country_code"
        name="account[country_code]"
        ng-model="billing.country"
        ng-select2="countries"
        ng-options="country.name for country in countries"
        data-theme="cabinet_default"
        display-error=""
        required=""
        ng-disabled="!countries"
        autocomplete="shipping country"
        placeholder="#{I18n.t(:country_code, scope: [:account, :billing, :placeholder])}"
        data-error-server="#{I18n.t(:invalid, scope: [:errors, :country])}"
      ]
        option.empty_item

    .field_item.field_city
      label
        = I18n.t :city, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:city, scope: [:account, :billing, :placeholder])}"
          ng-model="billing.city"
          name="customer[city]"
          id="customer_city"
          autocomplete="shipping locality"
          ng-maxlength="130"
          display-error=""
          required=""
          data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :city], count: 130)}"
          data-tail-elements=".edit-icon"
        ]
        span.edit-icon

    / .field_item.field_vat_code.ng-cloak ng-show="isVisibleVatCode()"
      label
        = I18n.t :vat_code, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:vat_code, scope: [:account, :billing, :placeholder])}"
          ng-model="billing.vat_code"
          name="customer[vat_code]"
          id="customer_vat_code"
          autocomplete="vat_code"
          ng-maxlength="130"
          display-error=""
          data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :vat_code], count: 130)}"
          data-tail-elements=".edit-icon"
        ]
        span.edit-icon

    .field_item.field_address_1
      label
        = I18n.t :address_1, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:address_1, scope: [:account, :billing, :placeholder])}"
          ng-model="billing.address_1"
          name="customer[address_1]"
          id="customer_address_1"
          autocomplete="shipping street-address"
          ng-maxlength="130"
          display-error=""
          data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :address_1], count: 130)}"
          data-tail-elements=".edit-icon"
        ]
        span.edit-icon

    .field_item.field_address_2
      label
        = I18n.t :address_2, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:address_2, scope: [:account, :billing, :placeholder])}"
          ng-model="billing.address_2"
          name="customer[address_2]"
          id="customer_address_2"
          autocomplete="shipping street-address"
          ng-maxlength="130"
          display-error=""
          data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :address_2], count: 130)}"
          data-tail-elements=".edit-icon"
        ]
        span.edit-icon

    .field_item.field_zip_code
      label
        = I18n.t :zip_code, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:zip_code, scope: [:account, :billing, :placeholder])}"
          ng-model="billing.zip_code"
          name="customer[zip_code]"
          id="customer_zip_code"
          autocomplete="shipping postal-code"
          ng-maxlength="10"
          limit-input="[a-zA-Z0-9\s\-]{1,50}"
          display-error=""
          required=""
          data-error-maxlength="#{I18n.t(:too_long, scope: [:errors, :zip_code], count: 10)}"
          data-tail-elements=".edit-icon"
        ]
        span.edit-icon

    .settings_save.ng-cloak
      / ng-show="blocks.billing.changed"
      button.button[
        ng-click="submit($event, 'billing', forms.billingForm)"
        ng-disabled="forms.billingForm.$submitted"
        ng-disabled-with="#{t(:submit_disabled, scope: [:account, :billing, :button])}"
      ]
        = t :submit, scope: [:account, :billing, :button]
- else
  .settings_about_block
    .field_item.field_account_type
      label
        = I18n.t :account_type, scope: [:account, :billing, :label]
      - AccountType.all.each do |type|
        .field_item_radio
          .radio
            span class="#{(@billing_pref.account_type_id == type.id) ? 'checked' : ''}"
              input[
                type="radio"
                name="account[account_type_id]"
                id="account_type_id_#{type.id}"
                value="#{type.id}"
                readonly="readonly"
              ]
          label for="account_type_id_#{type.id}"
            span = type.title

    .field_item.field_country
      label
        = I18n.t :country, scope: [:account, :billing, :label]
      select[
        id="account_country_code"
        name="account[country_code]"
        disabled="disabled"
        placeholder="#{I18n.t(:country_code, scope: [:account, :billing, :placeholder])}"
      ]
        - unless @billing_pref.country.nil?
          option.empty_item[
            value="#{@billing_pref.country_code}"
            label="#{@billing_pref.country.name}"
          ] = @billing_pref.country.name

    .field_item.field_city
      label
        = I18n.t :city, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:city, scope: [:account, :billing, :placeholder])}"
          readonly="readonly"
          value="#{@billing_pref.city}"
        ]
        span.edit-icon

    .field_item.field_address_1
      label
        = I18n.t :address_1, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:address_1, scope: [:account, :billing, :placeholder])}"
          readonly="readonly"
          value="#{@billing_pref.address_1}"
        ]
        span.edit-icon

    .field_item.field_address_2
      label
        = I18n.t :address_2, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:address_2, scope: [:account, :billing, :placeholder])}"
          readonly="readonly"
          value="#{@billing_pref.address_2}"
        ]
        span.edit-icon

    .field_item.field_zip_code
      label
        = I18n.t :zip_code, scope: [:account, :billing, :label]
      .field_item_edit
        input[
          type="text"
          placeholder="#{I18n.t(:zip_code, scope: [:account, :billing, :placeholder])}"
          readonly="readonly"
          value="#{@billing_pref.zip_code}"
        ]
        span.edit-icon

    = content_for :javascript
      coffee:
        $('select').select2
          theme: 'cabinet_default'