.modal-dialog
  .modal-content
      
    if state === 'purchasing'
      .alert.alert-info(data-i18n="buy_gems.purchasing")
    
    else if state === 'retrying'
      #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying")

    else
      img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background
      h1(data-i18n="play.buy_gems")
      
      #products
        for product in products
          .product
            h4 x#{product.gems}
            h3(data-i18n=product.i18n)
            button.btn.btn-illustrated.btn-lg(value=product.id)
              span= product.price

        .product
          h4(data-i18n="buy_gems.price") x3500 / mo
          h3(data-i18n="account.subscription")
          if me.isPremium()
            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 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 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= stateMessage
      
      if 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