#item-title
  h2.one-line.big-font= item ? item.name : ''

#item-details-body
  if item
    .nano
      .nano-content
        #item-container
          img.item-img(src=item.getPortraitURL(), draggable="false")
          img.item-shadow(src=item.getPortraitURL(), draggable="false")

        img.hr(src="/images/pages/play/modal/hr.png", draggable="false")

        for stat in stats
          div(class="stat-row big-font" + (/^en/.test(me.get('preferredLanguage')) && stat.matchedShortName ? " short-name" : ""))
            div.stat-label= stat.name
            div.stat= stat.display
          img.hr(src="/images/pages/play/modal/hr.png", class=stat.isLast ? "" : "faded", draggable="false")

        if item.description
          .item-description= item.description

        if props.length
          #skills
            h3.big-font(data-i18n="play.skills_granted")
            for prop in props
              p
                strong= prop.name
                span.spr :
                span!= prop.description

        if item.comingSoon
          .text-center
            h3 This item has no stats.
            p Only admins will see it for now.

if item && !item.owned
  if item.unequippable
    button.btn.big-font.disabled.unequippable #{item.get('heroClass')} Only
  else
    button#selected-item-unlock-button.btn.big-font.unlock-button(data-item-id=item.id)
      span(data-i18n="play.unlock") Unlock
      span.spl= '('+item.get('gems')
      img(src="/images/common/gem.png", draggable="false")
      span )