<mat-card id="comment-card"
          class="border"
          [ngClass]="{'highlighted': comment.highlighted, '': !comment.highlighted,
          'moderator': moderator,
          'border-notMarked': user !== undefined && comment.correct === 0 && comment.bookmark === false && comment.favorite === false && !comment.answer && comment.creatorId !== user.id,
          'border-ownQuestion': user !== undefined && comment.creatorId === user.id && comment.correct === 0 && comment.bookmark === false && comment.favorite === false && !comment.answer,
          'border-correct': comment.correct === 1,
          'border-wrong': comment.correct === 2,
          'border-answer': comment.answer && comment.bookmark === false && comment.favorite === false,
          'border-bookmark': comment.bookmark === true,
          'border-favorite': comment.favorite === true
          }"
          [@slide]="slideAnimationState"
          (@slide.done)="changeSlideState()">
  <div class="runningnum-outer">
    <p>{{comment.number}}</p>
  </div>
  <div fxLayout="column">
    <div fxLayout="row"
         class="comment-actions">
      <div class="date-container">
        <div class="date"
             *ngIf="language === 'de'; else englishDate">
          {{comment.timestamp | date: ' dd.MM.yy HH:mm '}}
        </div>
        <ng-template class="date"
                     #englishDate>
          {{comment.timestamp | date: ' M/d/yy h:mm a '}}
        </ng-template>
      </div>
      <button mat-icon-button
              *ngIf="comment.read"
              [disabled]="true"
              (click)="setRead(comment)">
        <mat-icon svgIcon="beamer"
                  class="beamer-icon"
                  matTooltip="{{ 'comment-page.mark-read' | translate }}">
        </mat-icon>
      </button>
      <span class="fill-remaining-space"></span>
      <ng-container>
        <button mat-icon-button
                *ngIf="(isCreator || isModerator)"
                (click)="changeProfanityShowForModerators(comment)">
          <mat-icon class="not-marked"
                    [matTooltip]="filterProfanityForModerators ? ('comment-page.show-comment-with-filter' | translate) :
            ('comment-page.show-comment-without-filter' | translate)">
            {{filterProfanityForModerators ? 'visibility' : 'visibility_off'}}
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(isCreator || isModerator || comment.answer) && !inAnswerView"
                (click)="answerComment()"
                tabindex="0"
                attr.aria-labelledby="comment_answer{{ comment.id }}">
          <mat-icon class="not-marked"
                    [ngClass]="{'answered-icon' : comment.answer}"
                    [matTooltip]="comment.answer ? ('comment-page.has-answer' | translate) :
                  ('comment-page.fullscreen' | translate)">
            comment
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(!isStudent || comment.correct === 1) && !moderator"
                [disabled]="isStudent"
                (click)="markCorrect(comment, 1)"
                tabindex="0"
                attr.aria-labelledby="comment_correct{{ comment.id }}">
          <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
                              'not-marked' : (comment.correct === 0 || comment.correct === 2)}"
                    [matTooltip]="comment.correct !== 1 ? ('comment-page.mark-correct' | translate)
                                                 : ('comment-page.mark-not-correct' | translate)">done
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(!isStudent || comment.correct === 2) && !moderator"
                [disabled]="isStudent"
                (click)="markCorrect(comment, 2)"
                tabindex="0"
                attr.aria-labelledby="comment_not_correct{{ comment.id }}">
          <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
                              'not-marked' : (comment.correct === 0 || comment.correct === 1)}"
                    [matTooltip]="comment.correct != 2 ? ('comment-page.mark-wrong' | translate)
                                                 : ('comment-page.mark-not-wrong' | translate)">clear
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="!isStudent && !moderator"
                [disabled]="isStudent"
                (click)="setFavorite(comment)"
                tabindex="0"
                attr.aria-labelledby="comment_grade{{ comment.id }}">
          <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
                    [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
                                                 : ('comment-page.mark-not-favorite' | translate)">grade
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(comment.favorite && isStudent && !(comment.creatorId && user && comment.creatorId === user.id))"
                tabindex="0"
                attr.aria-labelledby="comment_grade{{ comment.id }}">
          <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
                    [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
                                                 : ('comment-page.mark-not-favorite' | translate)">grade
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(comment.favorite && isStudent && (comment.creatorId && user && comment.creatorId === user.id))"
                (click)="openBonusStarDialog()"
                tabindex="0"
                attr.aria-labelledby="comment_grade{{ comment.id }}">
          <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}"
                    [matTooltip]="!comment.favorite ? ('comment-page.mark-favorite' | translate)
                                                 : ('comment-page.mark-not-favorite' | translate)">grade
          </mat-icon>
        </button>
        <button mat-icon-button
                *ngIf="(!isStudent || comment.bookmark) && !moderator"
                [disabled]="isStudent"
                (click)="setBookmark(comment)"
                tabindex="0"
                attr.aria-labelledby="comment_grade{{ comment.id }}">
          <mat-icon [ngClass]="{'bookmark-icon' : comment.bookmark, 'not-marked' : !comment.bookmark}"
                    [matTooltip]="!comment.bookmark ? ('comment-page.mark-bookmark' | translate)
                                                      : ('comment-page.mark-not-bookmark' | translate)">bookmark
          </mat-icon>
        </button>
      </ng-container>

      <button mat-icon-button
              class="delete-own-comment"
              *ngIf="(isStudent && (comment.creatorId && user && comment.creatorId === user.id)) && (!comment.bookmark || !comment.favorite || !comment.correct || !comment.answer)"
              (click)="openDeleteCommentDialog()"
              tabindex="0"
              attr.aria-labelledby="comment_delete{{ comment.id }}"
      >
        <mat-icon>
          delete_sweep
        </mat-icon>
      </button>

      <ng-container *ngIf="!isStudent">
        <button mat-icon-button
                class="edit-button"
                [mat-menu-trigger-for]="editMenu">
          <mat-icon matTooltip="{{ 'comment-page.edit-menu' | translate }}">more_vert</mat-icon>
        </button>
        <mat-menu #editMenu>
          <button mat-menu-item
                  *ngIf="(isCreator || isModerator || comment.answer) && !inAnswerView"
                  (click)="answerComment()"
                  tabindex="0"
                  attr.aria-labelledby="comment_answer{{ comment.id }}"
          >
            <mat-icon class="not-marked"
                      [ngClass]="{'answered-icon' : comment.answer}">
              comment
            </mat-icon>
            <span>
              {{
              comment.answer ?
                ('comment-page.edit-answer-edit' | translate) :
                ('comment-page.edit-answer-create' | translate)
              }}
            </span>
          </button>
          <button mat-menu-item
                  *ngIf="(!isStudent || comment.correct === 1) && !moderator"
                  [disabled]="isStudent"
                  (click)="markCorrect(comment, 1)"
                  tabindex="0"
                  attr.aria-labelledby="comment_correct{{ comment.id }}"
          >
            <mat-icon [ngClass]="{'correct-icon' : comment.correct === 1,
                              'not-marked' : (comment.correct === 0 || comment.correct === 2)}">
              done
            </mat-icon>
            <span>
              {{
              comment.correct !== 1 ?
                ('comment-page.edit-correct' | translate) :
                ('comment-page.edit-correct-reset' | translate)
              }}
            </span>
          </button>
          <button mat-menu-item
                  *ngIf="(!isStudent || comment.correct === 2) && !moderator"
                  [disabled]="isStudent"
                  (click)="markCorrect(comment, 2)"
                  tabindex="0"
                  attr.aria-labelledby="comment_not_correct{{ comment.id }}"
          >
            <mat-icon [ngClass]="{'wrong-icon' : comment.correct === 2,
                              'not-marked' : (comment.correct === 0 || comment.correct === 1)}">
              clear
            </mat-icon>
            <span>
              {{
              comment.correct != 2 ?
                ('comment-page.edit-wrong' | translate) :
                ('comment-page.edit-wrong-reset' | translate)
              }}
            </span>
          </button>
          <button mat-menu-item
                  *ngIf="(!isStudent || comment.favorite) && !moderator"
                  [disabled]="isStudent"
                  (click)="setFavorite(comment)"
                  tabindex="0"
                  attr.aria-labelledby="comment_grade{{ comment.id }}"
          >
            <mat-icon [ngClass]="{'favorite-icon' : comment.favorite, 'not-marked' : !comment.favorite}">
              grade
            </mat-icon>
            <span>
              {{
              !comment.favorite ?
                ('comment-page.edit-favorite' | translate) :
                ('comment-page.edit-favorite-reset' | translate)
              }}
            </span>
          </button>
          <button mat-menu-item
                  *ngIf="(!isStudent || comment.bookmark) && !moderator"
                  [disabled]="isStudent"
                  (click)="setBookmark(comment)"
                  tabindex="0"
                  attr.aria-labelledby="comment_grade{{ comment.id }}"
          >
            <mat-icon [ngClass]="{'bookmark-icon' : comment.bookmark, 'not-marked' : !comment.bookmark}">
              bookmark
            </mat-icon>
            <span>
              {{
              !comment.bookmark ?
                ('comment-page.edit-bookmark' | translate) :
                ('comment-page.edit-bookmark-reset' | translate)
              }}
            </span>
          </button>
          <button mat-menu-item
                  *ngIf="(isCreator || (comment.creatorId && user && comment.creatorId === user.id)) && !comment.favorite && !inAnswerView"
                  (click)="openDeleteCommentDialog()"
                  tabindex="0"
                  attr.aria-labelledby="comment_delete{{ comment.id }}"
          >
            <mat-icon class="not-marked">
              delete_sweep
            </mat-icon>
            <span>
              {{
              'comment-page.edit-delete' | translate
              }}
            </span>
          </button>
        </mat-menu>
      </ng-container>
    </div>
    <div fxLayout="row">
      <div class="body click"
           (click)="answerComment()"
           role="button"
           style="width:100%;"
           tabindex="0">
        <ars-row #commentBody>
          <ars-row #commentBodyInner>
            <app-view-comment-data class="images" [currentData]="comment.body"></app-view-comment-data>
          </ars-row>
        </ars-row>
        <span id="comment-{{ comment.id }}"
              class="visually-hidden"
              aria-hidden="true">{{ 'comment-page.comment' | translate: {
          time: (language === 'de' ? (comment.timestamp | date: ' HH:mm ') : (comment.timestamp | date: 'h:mm a')),
          votes: comment.score === 1 ? ('comment-page.a11y-text_textForOneVote' | translate) : comment.score + ('comment-page.a11y-text_textForVotes' | translate),
          comment: comment.body.trim(),
          correct: comment.correct === 1 ? ('comment-page.a11y-text_correct' | translate) : "",
          wrong: comment.correct === 2 ? ('comment-page.a11y-text_wrong' | translate) : "",
          bonus: comment.favorite ? ('comment-page.a11y-text_grade' | translate) : "",
          beamer: comment.read ? ('comment-page.a11y-text_read' | translate) : ""
        }
          }}</span>
      </div>
      <div
        [joyrideStep]="'voting'"
        [stepPosition]="'left'"
        appJoyrideTemplate
        fxLayout="column"
        fxLayoutAlign="center"
        *ngIf="isStudent && usesJoyride"
        [ngClass]="{ '1': 'voteUp', '-1': 'voteDown', '0': 'reset'}[currentVote]">
        <ng-container [ngTemplateOutlet]="voting"></ng-container>
      </div>
      <div
        fxLayout="column"
        fxLayoutAlign="center"
        *ngIf="isStudent && !usesJoyride"
        [ngClass]="{ '1': 'voteUp', '-1': 'voteDown', '0': 'reset'}[currentVote]">
        <ng-container [ngTemplateOutlet]="voting"></ng-container>
      </div>
      <div *ngIf="!isStudent"
           fxLayout="column"
           fxLayoutAlign="center">
        <span class="scoreCreator" matTooltip="{{
        ('comment-page.upvote' | translate) + ' ' + upvotes + ' | ' +
        ('comment-page.downvote' | translate) + ' ' + downvotes
        }}">{{score}}</span>
      </div>
    </div>
    <ars-row #commentExpander
             ars-flex-box
             [height]="37">
      <ars-fill></ars-fill>
      <ars-col>
        <button mat-button
                (click)="toggleExpand($event)"><span class="commentExpanderButton">
          {{ isExpanded ? ('comment-page.show-less' | translate) : ('comment-page.show-more' | translate) }}
        </span></button>
      </ars-col>
      <ars-fill></ars-fill>
    </ars-row>
    <div fxLayout="row"
         fxLayoutAlign="start center">
      <div fxLayoutAlign="center center"
           matTooltip="{{ 'comment-page.tag-to-filter' | translate }}"
           (click)="this.clickedOnTag.emit(comment.tag)"
           *ngIf="comment.tag && comment.tag !== ''"
           class="comment-tags">
        <mat-icon svgIcon="comment_tag"></mat-icon>
        <span>
          &nbsp;{{comment.tag}}
        </span>
      </div>
      <div class="user-number joyrideActive"
           *ngIf="usesJoyride"
           [joyrideStep]="'commentUserNumber'"
           [stepPosition]="'right'"
           appJoyrideTemplate
           fxLayoutAlign="center center"
           matTooltip="{{ 'comment-page.user-number' | translate }}"
           (click)="this.clickedUserNumber.emit(comment.userNumber)">
        <mat-icon class="user-icon">person_pin_circle</mat-icon>
        <strong>
          {{comment.userNumber}}
        </strong>
      </div>
      <div class="user-number"
           *ngIf="!usesJoyride"
           fxLayoutAlign="center center"
           matTooltip="{{ 'comment-page.user-number' | translate }}"
           (click)="this.clickedUserNumber.emit(comment.userNumber)">
        <mat-icon class="user-icon">person_pin_circle</mat-icon>
        <strong>
          {{comment.userNumber}}
        </strong>
      </div>
      <div fxLayoutAlign="center center"
           matTooltip="{{ 'comment-page.keywords-per-question' | translate }}"
           [mat-menu-trigger-for]="keywordsMenu"
           *ngIf="(comment.keywordsFromQuestioner != undefined && comment.keywordsFromQuestioner.length > 0)"
           class="comment-keywords">
        <mat-icon svgIcon="hashtag" class="keyword-icon"></mat-icon>
        <span matBadge="{{comment.keywordsFromQuestioner.length}}" matBadgeSize="small" matBadgeOverlap="false">
          {{ this.selectedKeyword === '' ? ('comment-page.keywords' | translate) : this.selectedKeyword}}
        </span>
        <mat-menu #keywordsMenu>

          <mat-list dense class="keywords-list">
            <mat-list-item
              *ngFor="let keyword of sortKeywords(comment.keywordsFromQuestioner); let odd = odd; let even = even"
              [class.keywords-alternate]="odd"
              [class.keywords-even]="even">
              <span (click)="this.clickedOnKeyword.emit(keyword.lemma)" class="keyword-span">{{keyword.lemma}}</span>
            </mat-list-item>
          </mat-list>
        </mat-menu>
      </div>

      <span class="fill-remaining-space"></span>
      <button mat-icon-button
              class="moderate-button"
              *ngIf="(isCreator || isModerator) && !inAnswerView"
              (click)="setAck(comment)"
              tabindex="0"
              attr.aria-labelledby="comment_moderation{{ comment.id }}">
        <mat-icon class="gavel"
                  [matTooltip]="!comment.ack ? ('comment-page.acknowledge' | translate)
                                                        : ('comment-page.reject' | translate)">gavel
        </mat-icon>
      </button>
    </div>
  </div>
</mat-card>

<!--Hidden Div's for a11y-Descriptions-->
<div class="visually-hidden">
  <div id="comment_answer{{ comment.id }}">{{comment.answer ? ('comment-page.a11y-comment-answer' | translate) :
    ('comment-page.a11y-comment-answer-not' | translate)}}
  </div>
  <div
    id="comment_correct{{ comment.id }}">{{comment.correct != 1 ? ('comment-page.a11y-comment_not_marked_correct' | translate)
    : ('comment-page.a11y-comment_marked_correct' | translate) }}
  </div>
  <div
    id="comment_not_correct{{ comment.id }}">{{comment.correct != 2 ? ('comment-page.a11y-comment_not_marked_wrong' | translate)
    : ('comment-page.a11y-comment_marked_wrong' | translate) }}
  </div>
  <div id="comment_grade{{ comment.id }}">{{ !comment.favorite ? ('comment-page.a11y-comment_grade' | translate)
    : ('comment-page.a11y-comment_not_grade' | translate) }}
  </div>
  <div id="comment_delete{{ comment.id }}">{{'comment-page.a11y-comment_delete' | translate}}</div>
  <div id="comment_moderation{{ comment.id }}">{{'comment-page.a11y-comment_moderation' | translate}}</div>
  <div *ngIf="isStudent"
       id="comment_vote_up{{ comment.id }}">{{'comment-page.a11y-comment_vote_up' | translate}}</div>
  <div *ngIf="isStudent"
       id="comment_vote_down{{ comment.id }}">{{'comment-page.a11y-comment_vote_down' | translate}}</div>
</div>

<ng-template #voting>
  <button mat-icon-button
          (click)="voteUp(comment)"
          *ngIf="!disabled"
          matTooltip="{{ 'comment-page.vote-up' | translate }}"
          tabindex="0"
          attr.aria-labelledby="comment_vote_up{{ comment.id }}">
    <mat-icon class="voting-icon"
              [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up
    </mat-icon>
  </button>
  <span class="score" matTooltip="{{
        ('comment-page.upvote' | translate) + ' ' + upvotes + ' | ' +
        ('comment-page.downvote' | translate) + ' ' + downvotes
        }}">{{score}}</span>
  <button mat-icon-button
          (click)="voteDown(comment)"
          *ngIf="!disabled"
          matTooltip="{{ 'comment-page.vote-down' | translate }}"
          tabindex="0"
          attr.aria-labelledby="comment_vote_down{{ comment.id }}">
    <mat-icon class="voting-icon"
              [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down
    </mat-icon>
  </button>
</ng-template>