<div class="interaction-list">
   <div class="interaction-list-more-button" ng-if="allowMore && hasMore && !sortOldToNew">
       <button ng-click="loadMore()" translate>More...</button>
   </div>

   <div class="interaction-list-item" ng-repeat="item in interactions | limitTo:currentLimit track by item.id">

       <div ng-switch on="item.interactionType">
           <div class="interaction-list-comment" ng-switch-when="comment">
               <blockquote>{{ item.content.commentText }}</blockquote>

               <div class="interaction-list-footer"><i class="fa fa-trash icon-as-button" ng-show="item.userId.toString() === currentUserId" title="{{ 'Remove comment' | translate }}" ng-click="removeInteraction(item)"></i> {{item.userId | userIdToName}} | {{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>

           <div class="interaction-list-watch" ng-switch-when="watch">
               <span class="interaction-list-user">{{item.userId | userIdToName}}</span>
               <span translate>is now watching this item.</span>

               <div class="interaction-list-footer">{{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>

           <div class="interaction-list-unwatch" ng-switch-when="unwatch">
               <span class="interaction-list-user">{{item.userId | userIdToName}}</span>
               <span translate>is no longer watching this item.</span>

               <div class="interaction-list-footer">{{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>

           <div class="interaction-list-highlight1" ng-switch-when="highlight1">
               <span class="interaction-list-user">{{item.userId | userIdToName}}</span>
               <span translate>has marked this item as <img class="interaction-icon" src="assets/icon-highlight1-full.png" alt="{{ 'Highlight (!)' | translate }}" />.</span>

               <div class="interaction-list-footer">{{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>

           <div class="interaction-list-highlight2" ng-switch-when="highlight2">
               <span class="interaction-list-user">{{item.userId | userIdToName}}</span>
               <span translate>has marked this item as <img class="interaction-icon" src="assets/icon-highlight2-full.png" alt="{{ 'Highlight (!!)' | translate }}" />.</span>

               <div class="interaction-list-footer">{{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>

           <div class="interaction-list-highlight3" ng-switch-when="highlight3">
               <span class="interaction-list-user">{{item.userId | userIdToName}}</span>
               <span translate>has marked this item as <img class="interaction-icon" src="assets/icon-highlight3-full.png" alt="{{ 'Highlight (!!!)' | translate }}" />.</span>

               <div class="interaction-list-footer">{{ item.interactionTime | date: 'yyyy-MM-dd HH:mm' }}</div>
           </div>
       </div>
   </div>

    <div class="interaction-list-more-button" ng-if="allowMore && hasMore && sortOldToNew">
        <button ng-click="loadMore()" translate>More...</button>
    </div>

    <interaction-comments ng-if="enableNew"
                          target-type="targetType"
                          target-id="targetId"
                          target-description="targetDescription"
                          source-url="sourceUrl">
    </interaction-comments>
</div>

