openfoodnetwork/app/views/checkout/_payment.html.haml

%fieldset#payment
  %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}

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

    %accordion-group{"is-open" => "accordion.payment",
      "ng-class" => "{valid: payment.$valid, open: accordion.payment}"}
      %accordion-heading
        .row
          .small-10.columns
            %em 
              %small
                {{ Checkout.paymentMethod().name }}
          .small-2.columns.text-right
            %span.accordion-up
              %em 
                %small Hide
              %i.ofn-i_053-point-up 
            %span.accordion-down
              %em 
                %small Expand
              %i.ofn-i_052-point-down

      -# TODO render this in Angular instead of server-side
      -# The problem being how to render the partials
      - current_order.available_payment_methods.each do |method|
        .row
          .small-12.columns
            %label
              = radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, false,
                required: true,
                "ng-model" => "order.payment_method_id"
              = method.name

        .row{"ng-show" => "order.payment_method_id == #{method.id}"}
          .small-12.columns
            = render partial: "spree/checkout/payment/#{method.method_type}", :locals => { :payment_method => method }