<div class="one-message">
    <div class="message-menu" *ngIf="!editMode">
        <mat-icon *ngIf="false">mood</mat-icon>
        <mat-icon (click)="editModeOn()" *ngIf="modifyPermission">edit</mat-icon>
        <mat-icon (click)="onDelete()" *ngIf="modifyPermission">delete</mat-icon>
    </div>
    <div>
        <app-avatar [accountAvatarRecord]="data.account" [show-user-info]="data.account"></app-avatar>
    </div>
    <div class="one-message-content">
        <div class="message-header">
            <span class="name mat-body-2" [show-user-info]="data.account">{{data.account.avatarName}}</span>
            <span class="date mat-small">{{data.date | date:'short'}}</span>
        </div>
        <div class="messages" *ngIf="!editMode">
            <app-markdown-view *ngIf="!data.error" [html]="data.message"></app-markdown-view>
            <div *ngIf="data.error" class="message-error warn">{{data.errorMessage}}</div>
        </div>
        <div class="messages" *ngIf="editMode"><app-markdown-editor [content]="data.error?'':data.message" [autofocus]="true" (submit)="onEditSubmit($event)" (close)="onEditClose()"></app-markdown-editor></div>
    </div>
</div>