.modal-dialog
  .modal-content 
  
    if view.state === 'purchasing'
      .alert.alert-info(data-i18n="buy_gems.purchasing")

    else if view.state === 'retrying'
      #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying")

    else
      if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl'
        img(src="/images/pages/play/modal/lang-nl/buy-gems-background-NL.png")#buy-gems-background)
      else
        img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background 
      h1(data-i18n="play.buy_gems") 
     
      #products
        for product in view.products.models
          .product
            h4 x#{product.get('gems')}
            h3(data-i18n=product.get('i18n'))
            button.btn.btn-illustrated.btn-lg(value=product.get('name'))
              span= product.get('priceString')

        if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl'
          .product
            h4.subscription-gem-amount x{{gems}} / mo
            h3 
              | 1, 3, 6 OF 12 
              br
              | MAANDEN
            a(href="http://www.codecombat.nl/kopen", target="_blank")
              button.btn.btn-ideal.btn-illustrated.btn-lg.btn-succes PREPAID CODES

        .product
          h4.subscription-gem-amount x{{gems}} / mo
          h3(data-i18n="account.subscription")
          if me.hasSubscription()
            button.disabled.start-subscription-button.btn.btn-lg.btn-illustrated.btn-success
              | ✓ 
              span(data-i18n="account.subscribed")
          else
            button.start-subscription-button.btn.btn-lg.btn-illustrated.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
                
      if view.state === 'declined'
        #declined-alert.alert.alert-danger.alert-dismissible
          span(data-i18n="buy_gems.declined")
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") ×      
          
      if view.state === 'unknown_error'
        #error-alert.alert.alert-danger.alert-dismissible
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") ×
          p(data-i18n="loading_error.unknown")
          p= view.stateMessage
      
      if view.state === 'recovered_charge'
        #recovered-alert.alert.alert-danger.alert-dismissible
          span(data-i18n="buy_gems.recovered")
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") ×
            
      div#close-modal
        span.glyphicon.glyphicon-remove