<div class="adf-comments-container">
    <div id="comment-header" class="adf-comments-header" role="heading">
        {{'COMMENTS.HEADER' | translate: { count: comments?.length} }}
    </div>
    <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
            <mat-form-field class="adf-full-width">
                <textarea (keydown.escape)="clear($event)" matInput id="comment-input" placeholder="{{'COMMENTS.ADD' | translate}}" [(ngModel)]="message"></textarea>
            </mat-form-field>

            <div class="adf-comments-input-actions">
                <button mat-button
                    class="adf-comments-input-add"
                    data-automation-id="comments-input-add"
                    color="primary"
                    (click)="add()"
                    [disabled]="!message">
                    {{ 'COMMENTS.ADD' | translate }}
                </button>
            </div>
    </div>

    <div *ngIf="comments.length > 0">
        <adf-comment-list [comments]="comments">
        </adf-comment-list>
    </div>
</div>