@if (visible_chat) {
  <div class="chat-container" #scrollContainer>
    <div style="width: 250px; text-align: center;"><strong>Twitch Chat</strong></div>
    @for (chat of visible_chat; track chat; let last = $last) {
      <div #chat style="max-width: 250px">
        {{chat.timestamp_str}} - <strong [style.color]="chat.user_color ? chat.user_color : null">{{chat.name}}</strong>: {{chat.message}}
        {{last ? scrollToBottom() : ''}}
      </div>
    }
  </div>
}

@if (chat_response_received && !full_chat) {
  <button [disabled]="downloading_chat" (click)="downloadTwitchChat()" class="download-button" mat-raised-button color="accent"><ng-container i18n="Download Twitch Chat button">Download Twitch Chat</ng-container></button>
  @if (downloading_chat) {
    <mat-spinner class="downloading-spinner" [diameter]="30"></mat-spinner>
  }
}