.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#subscribe-background(src="/images/pages/play/modal/subscribe-background-blank.png")
      img.subscribe-image(src="/images/pages/play/modal/subscribe-heroes.png")

      h1(data-i18n="subscribe.subscribe_title") Subscribe

      div#close-modal
        span.glyphicon.glyphicon-remove

      div.comparison-blurb(data-i18n="subscribe.comparison_blurb")
      table.table.table-condensed.table-bordered.comparison-table
        thead
          tr
            th 
            th(data-i18n="subscribe.free")
            th
              //- TODO: find a better way to localize '$9.99/month'
              span $#{price}/
              span(data-i18n="subscribe.month")
        tbody
          tr
            td.feature-description
              span(data-i18n="subscribe.feature1")
            td.center-ok
              span.glyphicon.glyphicon-ok
            td.center-ok
              span.glyphicon.glyphicon-ok
          tr
            td.feature-description
              span(data-i18n="[html]subscribe.feature2")
            td 
            td.center-ok
              span.glyphicon.glyphicon-ok
          tr
            td.feature-description
              span(data-i18n="subscribe.feature3")
            td 
            td.center-ok
              span.glyphicon.glyphicon-ok
          tr
            td.feature-description
              span(data-i18n="[html]subscribe.feature4")
            td 
            td.center-ok
              span.glyphicon.glyphicon-ok
          tr
            td.feature-description
              span(data-i18n="subscribe.feature5")
            td 
            td.center-ok
              span.glyphicon.glyphicon-ok
          tr
            td.feature-description
              span(data-i18n="subscribe.feature6")
            td 
            td.center-ok
              span.glyphicon.glyphicon-ok
      #parents-info(data-i18n="subscribe.parents")

      button.btn.btn-lg.btn-illustrated.purchase-button(data-i18n="subscribe.subscribe_button")
      button.btn.btn-lg.btn-illustrated.parent-button(data-i18n="subscribe.parent_button")

      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