<a-entity
  id="leaderboard"
  class="accuracyTextCounterSubscribe"
  bind__animation="enabled: isVictory"
  bind__scale="isVictory && '0 0 0' || '1 1 1'"
  bind__visible="(!!menuSelectedChallenge.id || !!challenge.id) && (menuActive || isPaused || isVictory) && !genreMenuOpen"
  position="2.365374194652176 1.1 -1.1952715561051024"
  rotation="0 -60 0"
  animation="property: scale; from: 0 0 0; to: 1 1 1; easing: easeOutBack; startEvents: textcounterdone">

  <a-entity
    mixin="slice"
    id="leaderboardBackground" position="0 0 0"
    slice9="left: 70; width: 1.8; height: 1.55; opacity: 0.9"></a-entity>

  <a-entity
    id="leaderboardChallengeImage"
    bind__menu-selected-challenge-image="selectedChallengeId: menuSelectedChallenge.imageUrl"
    bind__visible="!isVictory"
    geometry="primitive: plane; height: 0.12; width: 0.12"
    material="shader: flat"
    position="-0.44 0.63 0.001"></a-entity>

  <a-entity
    id="leaderboardTitle"
    mixin="font"
    text="align: center; width: 2.5; value: LEADERBOARD"
    position="0.04 0.55 0.001"
    bind__visible="!leaderboardQualified"></a-entity>

  <a-entity
    id="leaderboardNames"
    mixin="font"
    bind__text="value: leaderboardNames"
    bind__visible="!leaderboardQualified && !leaderboardEmpty"
    text="baseline: center; width: 1.2; anchor: left; color: {{ COLORS.UI_ACCENT }}; wrapCount: 28; lineHeight: 53;"
    position="-0.7 -0.16 0.001"></a-entity>

  <a-entity
    id="leaderboardScores"
    mixin="font"
    bind__text="value: leaderboardScores"
    bind__visible="!leaderboardQualified && !leaderboardEmpty"
    text="baseline: center; align: right; width: 1.2; anchor: right; color: #fff; wrapCount: 28; lineHeight: 53;"
    position="0.7 -0.16 0.001"></a-entity>

  <a-entity
    id="leaderboardEmpty"
    mixin="font"
    bind__visible="leaderboard.length === 0 && !leaderboardQualified && !leaderboardLoading"
    text="align: center; color: #777; baseline: center; width: 1.6; value: No high scores. Be the first!"
    position="0 0 0.001"></a-entity>

  <a-entity
    id="leaderboardKeyboard"
    bind__super-keyboard="{% if not DEBUG_KEYBOARD %}hand: activeHand === 'left' && '#leftHand' || '#rightHand'; {% endif %}show: leaderboardQualified"
    super-keyboard="inputColor: #00acfc; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; font: assets/fonts/Teko-Bold.json; align: center; model: supersaber; keyColor: #fff; injectToRaycasterObjects: false; filters: allupper; keyHoverColor: #fff; maxLength: 15; width: 1.5; label: NEW HIGH SCORE!\nENTER THE LEADERBOARD; labelColor: #FAFAFA"
    position="0 -0.1 0.02"
    proxy-event__change="event: superkeyboardchange; to: a-scene; as: leaderboardusername"
    keyboard-raycastable="condition: leaderboardQualified">
  </a-entity>

  <a-entity id="leaderboardSubmit"
    position="0 -0.6269126075613061 0.002"
    mixin="bigMenuButton"
    bind__visible-raycastable="leaderboardQualified"
    slice9="width: 1.5; height: 0.24"
    proxy-event="event: click; to: a-scene; as: leaderboardsubmit">
    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 26; value: SUBMIT HIGH SCORE" position="0 -0.055 0.01"></a-entity>
  </a-entity>
</a-entity>
