<ars-screen ars-flex-box class="questionwall-screen">
  <ars-row [height]="50" class="questionwall-header">
    <ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
      <ars-col ars-btn-wrp [xp]="16" [extra]="true">
        <button ars-btn routerLink="/participant/room/{{room.shortId}}/comments"><p>BACK</p></button>
      </ars-col>
    </ars-style-btn-material>
  </ars-row>
  <ars-fill ars-flex-box>
    <ars-fill style="overflow:hidden;">
      <ars-row [overflow]="'auto'">
        <p class="questionwall-present" *ngIf="commentFocus">{{commentFocus.comment.body}}</p>
        <p class="questionwall-present" *ngIf="!commentFocus">Questionwall. Click on a comment.</p>
      </ars-row>
    </ars-fill>
    <ars-col [width]="450" [overflow]="'auto'" class="questionwall-comment-list" #colComponent>
      <ars-row *ngFor="let comment of comments" class="questionwall-comment-anchor">
        <div class="questionwall-comment">
          <div class="questionwall-comment-box" (click)="focusComment(comment)"
               [style.box-shadow]="commentFocus===comment?'inset 0px 0px 0px 1px var(--ars-paragraph-color)':null">
            <p class="questionwall-comment-box-user">User: {{comment.comment.creatorId.substring(0,4)}}</p>
            <p class="questionwall-comment-box-time">Time: {{comment.comment.timestamp}}</p>
            <p class="questionwall-comment-box-time" [style.color]="comment.old?null:'RED'">{{comment.old?'OLD':'NEW'}}</p>
            <br>
            <p class="questionwall-comment-box-body">{{comment.comment.body}}</p>
          </div>
        </div>
      </ars-row>
    </ars-col>
  </ars-fill>
    <ars-row [height]="50" class="questionwall-footer">
      <ars-style-btn-material style="width:100%;" ars-flex-box>
        <ars-col ars-btn-wrp [xp]="16" [extra]="true">
          <button ars-btn (click)="prevComment()"><p>PREVIOUS</p></button>
          <button ars-btn (click)="nextComment()"><p>NEXT</p></button>
        </ars-col>
        <ars-col>
          <p style="padding:15px 5px;box-sizing:border-box;" class="questionwall-text-color">new Comments: {{unreadComments}}</p>
        </ars-col>
        <ars-fill></ars-fill>
        <ars-col ars-btn-wrp [xp]="16" [extra]="true">
          <button ars-btn (click)="stop()"><p [style.color]="focusIncommingComments?'RED':null">PAUSE</p></button>
          <button ars-btn (click)="play()"><p [style.color]="focusIncommingComments?null:'RED'">PLAY</p></button>
        </ars-col>
      </ars-style-btn-material>
    </ars-row>
</ars-screen>