{{badgeStyle}}
<div class="loading-spinner-container {{if chatService.timeTraveling "" "hidden"}}">
  <div class="loading-spinner {{if chatService.timeTravelingBackward "reverse"}}"></div>
</div>

{{#if chatService.notFound}}
  <div class="noticeWrap flex flex--column flex--verticalCenter">
    <div class="noticeWrap__visual flex__item">
      <svg class="svg-logo_glitch" width="46px" height="48px" viewBox="0 0 46 48" version="1.1">
        <path clip-rule="evenodd" d="M34,12 L30,12 L30,24 L34,24 L34,12 L34,12 Z M3.136,0 L0,8 L0,42 L10,42 L10,48 L17.772,48 L24,42 L34,42 L46,30 L46,0 L3.136,0 L3.136,0 Z M42,26 L34,34 L22,34 L16,40 L16,34 L8,34 L8,4 L42,4 L42,26 L42,26 Z M24,12 L20,12 L20,24 L24,24 L24,12 L24,12 Z" fill-rule="evenodd"></path>
      </svg>
    </div>
    <p class="noticeWrap__text flex__item">{{i18n 'This video has no recorded chat'}}</p>
  </div>
{{/if}}

<div class="scroll chat-messages js-chat-messages">
  <div class='tse-scroll-content'>
    <div class='tse-content'>
      <ul class='chat-lines'>
        {{#each messages as |message|}}
          {{video/rechat/chat-message
            msgObject=message
            isViewerModeratorOrHigher=chatService.canModerate
            timeoutUser=(action 'deleteMessage')
            videoStartedAt=videoStartedAt
          }}
        {{/each}}
      </ul>
    </div>
  </div>
</div>

<div class='chat-interface'>
  {{#unless stuckToBottom}}
    <span {{action 'scrollToBottom'}}>
      <div class="more-messages-indicator visible">
        {{i18n 'More messages below.'}}
      </div>
    </span>
  {{/unless}}
</div>
