%fieldset#billing
  %ng-form{"ng-controller" => "BillingCtrl", name: "billing"}

    %h5{"ng-class" => "{valid: billing.$valid, dirty: billing.$dirty || submitted}"}
      %span.right
        %label.label.round.alert.right
          %i.ofn-i_009-close
        %label.label.round.success.right
          %i.ofn-i_051-check-big
      = t :checkout_billing

    %accordion-group{"is-open" => "accordion.billing",
      "ng-class" => "{valid: billing.$valid, open: accordion.billing}"}
      = render 'checkout/accordion_heading'

      - if spree_current_user
        .small-12.columns
          %label
            %input{type: :checkbox, "ng-model" => "Checkout.default_bill_address"}
            = t :checkout_default_bill_address

      %div{ "ng-controller" => "CountryCtrl" }
        = f.fields_for :bill_address, @order.bill_address do |ba|
          .row
            .small-12.columns
              = validated_input t(:address), "order.bill_address.address1", "ofn-focus" => "accordion['billing']"
          .row
            .small-12.columns
              = validated_input t(:address2), "order.bill_address.address2", required: false
          .row
            .small-6.columns
              = validated_input t(:city), "order.bill_address.city"

            .small-6.columns
              = validated_select t(:state), "order.bill_address.state_id", {}, {"ng-options" => "s.id as s.name for s in countriesById[order.bill_address.country_id].states"}
          .row
            .small-6.columns
              = validated_input t(:postcode), "order.bill_address.zipcode"

            .small-6.columns.right
              = validated_select t(:country), "order.bill_address.country_id", {}, {"ng-init" => "order.bill_address.country_id = order.bill_address.country_id || #{Spree::Config[:default_country_id]}", "ng-options" => "c.id as c.name for c in countries"}

      .row
        .small-12.columns.text-right
          %button.primary{"ng-disabled" => "billing.$invalid", "ng-click" => "next($event)"}
            = t :next