Takumon/mean-blog

<div class="wrapper">
<div class="prograss-bar" *ngIf="(loading$ | async)" >
  <mat-spinner></mat-spinner>
</div>

<ng-container *ngIf="!(loading$ | async)">

  <ng-container *ngIf="(groupedDrafts$ | async)?.isEmpty()">
    <div class="message-wrapper">
      <div class="message">
        <div class="massage__icon">
          <i class="fa fa-fw fa-2x fa-exclamation-triangle"></i>
        </div>
        <div class="message__text">下書きはまだ作成していません。</div>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="!(groupedDrafts$ | async)?.isEmpty()">
    <div class="draft-list" >

      <div class="draft-list__title">未投稿 ({{(groupedDrafts$ | async)?.notPosted.length}}件)</div>
      <ng-container *ngIf="(groupedDrafts$ | async)?.notPosted.length > 0">
        <div
          mat-ripple
          class="draft-list__item"
          *ngFor="let item of (groupedDrafts$ | async).notPosted"
          [routerLink]="['/', 'drafts', item._id ]"
          routerLinkActive="active"
          >
            <div  class="draft-list__item__title">{{item.title}}</div>
            <div class="draft-list__item__date">{{item.updated | date: 'yyyy/MM/dd HH:mm' }}<span class="draft-list__created-or-updated"> に{{item.created == item.updated ? "作成" : "更新" }}</span></div>
        </div>
      </ng-container>

      <div class="draft-list__title">投稿済み ({{(groupedDrafts$ | async)?.posted.length}}件)</div>
      <ng-container *ngIf="(groupedDrafts$ | async)?.posted.length > 0">
        <div
          mat-ripple
          class="draft-list__item"
          *ngFor="let item of (groupedDrafts$ | async).posted"
          [routerLink]="['/', 'drafts', item._id ]"
          routerLinkActive="active"
          >
            <div  class="draft-list__item__title">{{item.title}}</div>
            <div class="draft-list__item__date">{{item.updated | date: 'yyyy/MM/dd HH:mm' }}<span class="draft-list__created-or-updated"> に{{item.created == item.updated ? "作成" : "更新" }}</span></div>
        </div>
      </ng-container>

    </div>

    <div class="draft-detail">
      <app-draft-detail [draft]="selectedDraft"></app-draft-detail>
    </div>

  </ng-container>

</ng-container>