<dstore-center-title>
  <span title i18n>My comments</span>
  <button routerLink="/my/comments" routerLinkActive="active">
    <ng-container i18n>My comments</ng-container>
  </button>
  <!-- <button routerLink="/my/donates" routerLinkActive="active">
    <ng-container i18n>My donations</ng-container>
  </button> -->
</dstore-center-title>

<dstore-edit *ngIf="editing" [commentID]="editing.id" (close)="editClose($event)"></dstore-edit>

<div class="comment-list" dstoreResize (resize)="listHeight$.next($event.height)">
  <div class="comment" *ngFor="let comment of comments$ | async">

    <ng-container>
      <ng-container *ngIf="comment.soft as app; else emptyIconRef">
        <img class="icon" dstoreCover="icon" [src]="app.info.icon" [routerLink]="['/app', app.id]" />
      </ng-container>
      <ng-template #emptyIconRef>
        <img class="icon" dstoreCover="icon" dstoreCover="icon" />
      </ng-template>

      <div class="body">
        <div class="info-line">
          <div class="name">{{ comment?.soft?.info?.name }}</div>
          <div class="time">
            <span i18n>Comment Date:</span>
            {{ comment.updated_at | date: 'yyyy.MM.dd' }}
          </div>
          <div class="version"><span i18n>Version:</span> {{ comment.app_version }}</div>
          <div class="removed">
            <span *ngIf="!comment.soft?.active" i18n>Removed</span>
          </div>
        </div>
        <div class="content-line">
          <span class="content">{{ comment.content }}</span>
          <a i18n (click)="editing = comment">Edit</a>
        </div>
      </div>
    </ng-container>
  </div>
</div>
<div class="paginatorContainer">
  <ng-container *ngIf="count$ | async as count">
    <app-paginator [count]="count" [pageIndex]="pageIndex$ | async" (pageIndexChange)="gotoPage($event)">
    </app-paginator>
  </ng-container>
</div>
