superdesk/superdesk-client-core

<div ng-controller="CommentsWidgetCtrl" class="sd-wrap-helper" data-test-id="comments-widget">
    <ul class="widget-content__main boxed-list sd-padding-all--2">
        <li ng-repeat="comment in comments" class="boxed-list__item boxed-list__item--comfortable" ng-class="{'boxed-list__item--selected': comment._id === active}">
            <div class="boxed-list__item-media">
                <sd-user-avatar data-user="comment.user"></sd-user-avatar>
            </div>
            <div class="boxed-list__item-content">
                <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
                    <time class="sd-text__date-time sd-text__date-time--small" sd-reldate datetime="comment._created"></time>
                </div>
                <div class="boxed-list__item-content-row">
                    <span class="text" sd-comment-text data-comment="comment" data-name="{{comment.user.display_name || comment.user.username}}" data-text="{{comment.text}}"></span>
                </div>
            </div>
        </li>

        <li class="boxed-list__item boxed-list__item--blank" ng-show="comments.length === 0">
            <div class="boxed-list__item-content boxed-list__item-content--centered">
                <div class="panel-info">
                    <div class="panel-info__icon">
                        <i class="big-icon--chat"></i>
                    </div>
                    <h3 class="panel-info__heading" translate>No comments so far.</h3>
                    <p class="panel-info__description" translate>Be the first one...</p>
                </div>
            </div>
        </li>
        <li class="boxed-list__item boxed-list__item--blank" ng-show="comments === null">
            <div class="sd-loader"></div>
        </li>
    </ul>
    <div class="widget-content__footer add-comment">
        <form name="commentsForm">
            <div sd-user-mention></div>
            <textarea
                class="new-comment"
                sd-auto-height
                ng-model="text"
                mentio
                id="mentio-users"
                ng-keyup="saveOnEnter($event)"
                data-test-id="new-comment-input"
            ></textarea>
            <div class="actions">
                <div class="pull-left post"><input type="checkbox" ng-model="saveEnterFlag"> <span translate>Post on 'Enter'</span></div>
                <button
                    id="comment-post"
                    class="btn btn--primary pull-right"
                    ng-click="save()"
                    ng-show="!saveEnterFlag"
                    ng-disabled='!text'
                    translate
                    data-test-id="new-comment-submit"
                >
                    Post
                </button>
                <button class="btn pull-right" ng-click="cancel()" ng-show="!saveEnterFlag" translate>Cancel</button>
            </div>
        </form>
    </div>
</div>