Takumon/mean-blog

<div class="article">
  <div class="article__header"
    mat-ripple
    matRippleColor="rgba(186, 191, 206, 0.37)"
    [routerLink]="['/', item.author.userId, 'articles', item._id]"
    routerLinkActive="active">
    <div class="article__avator">
      <img class="article__avator-icon"
        lazyLoad="/api/images/avator/{{ item.author._id}}"
        [offset]="this.Constant.LAZY_LOAD_OFFSET"
        >
    </div>
    <div class="article__subtitle">
      <div class="article__author-name">{{item.author.userId}}</div>
      <div class="article__date">{{item.updated | date: 'yyyy/MM/dd HH:mm' }}<span class="article__created-or-updated"> に{{item.created == item.updated ? "投稿" : "更新" }}</span></div>
    </div>
    <div class="article__title-wrapper">
      <div  class="article__title">{{item.title}}</div>
    </div>
  </div>
  <div class="article__main">
    <div *ngIf="item.isMarkdown; then markdown else plainText"></div>
    <ng-template #markdown>
      <p [innerHTML]="(item.body | toMarkdown).text" class="markdown-body"></p>
    </ng-template>
    <ng-template #plainText>
      <pre [innerHTML]="item.body" class="plain-text-body"></pre>
    </ng-template>
  </div>

  <div
    *ngIf="auth.isLogin()"
    class="article__operation">
    <button
      *ngIf="!containMineVote()"
      mat-button
      type="button"
      class="article__operation-btn"
      (click)="registerVote()"
      >
      <i class="fa fa-fw fa-thumbs-up"></i> いいね!
    </button>
    <button
      *ngIf="containMineVote()"
      mat-button
      type="button"
      class="article__operation-btn"
      (click)="confirmeDeleteVote()"
      >
      <i class="fa fa-fw fa-check"></i> いいね済み
    </button>
    <button
      mat-button
      type="button"
      class="article__operation-btn"
      (click)="createNewComment()"
      >
      <i class="fa fa-fw fa-commenting"></i>コメントする
    </button>
  </div>

  <ng-container *ngIf="item.showDetail; then displayCommentDetail else displayComment"></ng-container>

  <ng-template #displayComment>
    <div *ngIf="(item.comments && (item.comments | excludeDeletedComment).length > 0) || (item.vote && (item.vote | excludeDeletedVoter).length > 0)" class="article__comments comments">
      <div class="comments__count_vote">
        <i class="comments__count-icon fa fa-fw fa-thumbs-up"></i>{{ item.vote ? (item.vote | excludeDeletedVoter).length :0 }}<span class="comments__count-unit">人</span>
      </div>

      <div class="comments__count">
        <i class="comments__count-icon fa fa-fw fa-commenting"></i>{{commentService.count(item.comments)}}<span class="comments__count-unit">件</span>
      </div>
      <div class="comments__main">
        <div
          *ngFor="let comment of (item.comments | excludeDeletedComment)"
          class="comments__comment"
          >
            <img
              *ngIf="!comment.userDeleted && !comment.deleted"
              matTooltip="【{{comment.user.userId}}】&#013;{{comment.text}}"
              class="comments__comment__user"
              lazyLoad="/api/images/avator/{{ comment.user._id}}"
              [offset]="this.Constant.LAZY_LOAD_OFFSET"
              >

              <div *ngIf="comment.replies?.length > 0"
                class="comments__reply">
                <img
                  *ngFor="let reply of comment.replies"
                  matTooltip="【{{comment.user.userId}} ← {{reply.user.userId}}】&#013;{{reply.text}}"
                  class="comments__comment__user_reply"
                  lazyLoad="/api/images/avator/{{ reply.user._id }}"
                  [offset]="this.Constant.LAZY_LOAD_OFFSET"
                  />
            </div>
        </div>
      </div>

      <div class="comments__operation">
        <div class="comments__operation__spacer"></div>
        <button
          *ngIf="(item.comments && (item.comments | excludeDeletedComment).length > 0) || (item.vote && (item.vote | excludeDeletedVoter).length > 0)"
          mat-icon-button
          matTooltip="コメント詳細を開く"
          matTooltipPosition="above"
          [matTooltipShowDelay]="Constant.TOOL_TIP_SHOW_DELAY"
          type="button"
          class="comments__operation__show-detail-btn"
          (click)="toggleVoteAndCommentDetail()"><i class="fa fa-fw fa-chevron-down"></i></button>
      </div>
    </div>

    <div *ngIf="item.newComment" class="article__comment-editor comment-editor">
      <app-comment-form
        [model]="item.newComment"
        [hasCancelBtn]="true"
        [isAuthfocuse]="true"
        (complete)="refreshComments()"
        (cancel)="cancelNewComment()"></app-comment-form>
    </div>
  </ng-template>

  <ng-template #displayCommentDetail>
    <div class="article__comments-detail">
      <button
        mat-icon-button
        type="button"
        matTooltip="コメント詳細を閉じる"
        matTooltipPosition="above"
        [matTooltipShowDelay]="Constant.TOOL_TIP_SHOW_DELAY"
        class="article__comments-detail__close-btn_top"
        (click)='toggleVoteAndCommentDetail()'
        ><i class="fa fa-fw fa-chevron-up"></i>
      </button>
      <app-voter-list
        [voters]="item.vote"
      ></app-voter-list>
      <app-comment-list
        _idOfArticle="{{item._id}}"
        [comments]="item.comments"
        (refresh)="refreshComments()"
      ></app-comment-list>
      <button
        mat-icon-button
        matTooltip="コメント詳細を閉じる"
        matTooltipPosition="above"
        [matTooltipShowDelay]="Constant.TOOL_TIP_SHOW_DELAY"
        type="button"
        class="article__comments-detail__close-btn_bottom"
        [class.is-login]="auth.isLogin()"
        (click)='toggleVoteAndCommentDetail()'
        ><i class="fa fa-fw fa-chevron-up"></i>
      </button>
    </div>
  </ng-template>
</div>