%script{ type: "text/ng-template", id: "account/cards.html" }
  .credit_cards{"ng-controller" => "CreditCardsCtrl"}
    .row
      .small-12.medium-6.columns
        %h3
          = t(:saved_cards)
          %button.button.secondary.tiny.help-btn{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "saved_cards_modal" }
            %i.ofn-i_013-help

        .saved_cards{ ng: { show: 'savedCreditCards.length > 0' } }
          = render 'saved_cards'
        .no_cards{ ng: { hide: 'savedCreditCards.length > 0' } }
          = t(:you_have_no_saved_cards)
        %button.button.primary{ ng: { click: 'showForm()', hide: 'CreditCard.visible' } }
          = t(:add_a_card)

      .small-12.medium-6.columns
        .new_card{ ng: { show: 'CreditCard.visible', class: '{visible: CreditCard.visible}' } }
          %h3= t(:add_new_credit_card)
          = render 'new_card_form'
        .authorised_shops{ ng: { controller: 'AuthorisedShopsCtrl', hide: 'CreditCard.visible || savedCreditCards.length == 0' } }
          %h3
            = t('.authorised_shops')
          = render 'authorised_shops'

      = render HelpModalComponent.new(id: "saved_cards_modal") do
        %p.text-center.text-vbig
          %i.ofn-i_013-help
        %p
          = t('.saved_cards_popover')