<div class="fl-content fl-content-min-height" *ngIf="object">
  <p class="fl-detail" i18n>Description:</p>
  <div class="wrap-pre-text">
    <pre class="fl-detail">{{object.description}}</pre>
  </div>
  <p class="fl-detail" i18n>
    Created by
    <a *ngIf="object.created_by; else noLink" class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), object.created_by]">
      {{object.created_by_display}}
    </a>
    <ng-template #noLink>
      {{object.created_by_display}}
    </ng-template>
    on <app-date-displayer [date]="object.created_at" withTime></app-date-displayer>
  </p>
  <hr>
  <p i18n>Activity:</p>
  <div *ngFor="let comment of object.comments">
    <div *ngIf="comment.comment_text">
      <p class="fl-detail" i18n>
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.created_by]">
          {{comment.created_by_display}}
        </a>
        commented on <app-date-displayer [date]="comment.created_at" withTime></app-date-displayer>
      </p>
      <p *ngIf="comment.comment_text" class="fl-margin-left fl-detail">
        {{comment.comment_text}}
      </p>
    </div>
    <div *ngIf="comment.new_assignee">
      <p class="fl-detail" i18n>
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.created_by]">
          {{comment.created_by_display}}
        </a>
        assigned this TODO to
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.new_assignee]">
          {{comment.new_assignee_display}}
        </a>
        on <app-date-displayer [date]="comment.created_at" withTime></app-date-displayer>
      </p>
    </div>
    <div *ngIf="comment.new_status">
      <p class="fl-detail" i18n>
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.created_by]">
          {{comment.created_by_display}}
        </a>
        changed status to {{comment.new_status_display}} on <app-date-displayer [date]="comment.created_at" withTime></app-date-displayer>
      </p>
    </div>
    <div *ngIf="comment.description_changed">
      <p class="fl-detail" i18n>
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.created_by]">
          {{comment.created_by_display}}
        </a>
        changed description on <app-date-displayer [date]="comment.created_at" withTime></app-date-displayer>
      </p>
    </div>
    <div *ngIf="comment.title_changed">
      <p class="fl-detail" i18n>
        <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/users'), comment.created_by]">
          {{comment.created_by_display}}
        </a>
        changed title on <app-date-displayer [date]="comment.created_at" withTime></app-date-displayer>
      </p>
    </div>
  </div>
  <div class="fl-margin-top">
    <mat-form-field class="full-width">
      <mat-label i18n>Add new comment</mat-label>
      <textarea matInput class="full-width" id="comment_text" [(ngModel)]="commentText" rows="5"
                placeholder="Add new comment" i18n-placeholder>
      </textarea>
    </mat-form-field>
  </div>
  <div layoutDirection="row" layoutAlign="end center">
    <button mat-button color="primary" (click)="addComment(false)" [disabled]="!commentText" i18n>
      Comment
    </button>
    <button mat-button color="primary" (click)="addComment(true)" [disabled]="!commentText" i18n>
      Comment & close
    </button>
  </div>
</div>


