<span class="activiti-label mdl-badge"
      [attr.data-badge]="comments?.length">{{ 'DETAILS.LABELS.COMMENTS' |translate }}</span>
<div id="addComment" (click)="showDialog()" class="icon material-icons">add</div>
<div class="mdl-tooltip" for="addComment">
    Add a comment
</div>

<div class="menu-container" *ngIf="comments?.length > 0">
    <ul class='mdl-list'>
        <li class="mdl-list__item" *ngFor="let comment of comments">
            <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">comment</i>
            {{comment.message}}
            </span>
        </li>
    </ul>
</div>
<div *ngIf="comments?.length === 0">
    {{ 'DETAILS.COMMENTS.NONE' | translate }}
</div>


<dialog class="mdl-dialog" #dialog>
    <h4 class="mdl-dialog__title">New comment</h4>
    <div class="mdl-dialog__content">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="message" rows="1" id="commentText"></textarea>
            <label class="mdl-textfield__label" for="commentText">Message</label>
        </div>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" (click)="add()" class="mdl-button">Add Comment</button>
        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
    </div>
</dialog>
