
<div class="interaction-buttons">
    <div class="interaction-button interaction-button-comments" ng-if="isEnabled('comment')">
        <span class="interaction-button-count">{{ interactionCount('comment') }}</span>
        <div ng-if="areLoading.comment" class="interaction-button-loading loadingIndicatorSmall"></div>
        <i ng-if="isActive('comment') && !areLoading.comment" class="fa fa-comments icon-as-button interaction-button-active" title="{{ 'Comments available' | translate }}" ng-click="openInteractions()"></i>
        <i ng-if="!isActive('comment') && !areLoading.comment" class="fa fa-comments icon-as-button interaction-button-inactive" title="{{ 'Add comments' | translate }}" ng-click="openInteractions()"></i>
    </div>


    <div class="interaction-button interaction-button-comments" ng-if="isEnabled('watch')">
        <span class="interaction-button-count">{{ interactionCount('watch') }}</span>
        <div ng-if="areLoading.watch" class="interaction-button-loading loadingIndicatorSmall"></div>
        <i ng-if="isActive('watch') && !areLoading.watch" class="fa fa-eye icon-as-button interaction-button-active" title="{{ 'Watching' | translate }}" ng-click="triggerWatch()"></i>
        <i ng-if="!isActive('watch') && !areLoading.watch" class="fa fa-eye icon-as-button interaction-button-inactive" title="{{ 'Click to watch' | translate }}" ng-click="triggerWatch()"></i>
    </div>


    <div class="interaction-button-divider"></div>

    <div class="interaction-button interaction-button-comments" ng-if="isEnabled('highlight1')">
        <span class="interaction-button-count">{{ interactionCount('highlight1') }}</span>
        <div ng-if="areLoading.highlight1" class="interaction-button-loading loadingIndicatorSmall"></div>
        <img ng-if="isActive('highlight1') && !areLoading.highlight1" class="icon-as-button interaction-button-active" src="assets/icon-highlight1-full.png" alt="{{ 'Highlighted (!)' | translate }}" ng-click="triggerInteraction('highlight1')" />
        <img ng-if="!isActive('highlight1') && !areLoading.highlight1" class="icon-as-button interaction-button-inactive" src="assets/icon-highlight1-empty.png" alt="{{ 'Highlight (!)' | translate }}" ng-click="triggerInteraction('highlight1')" />
    </div>

    <div class="interaction-button interaction-button-comments" ng-if="isEnabled('highlight2')">
        <span class="interaction-button-count">{{ interactionCount('highlight2') }}</span>
        <div ng-if="areLoading.highlight2" class="interaction-button-loading loadingIndicatorSmall"></div>
        <img ng-if="isActive('highlight2') && !areLoading.highlight2" class="icon-as-button interaction-button-active" src="assets/icon-highlight2-full.png" alt="{{ 'Highlighted (!!)' | translate }}" ng-click="triggerInteraction('highlight2')" />
        <img ng-if="!isActive('highlight2') && !areLoading.highlight2" class="icon-as-button interaction-button-inactive" src="assets/icon-highlight2-empty.png" alt="{{ 'Highlight (!!)' | translate }}" ng-click="triggerInteraction('highlight2')" />
    </div>

    <div class="interaction-button interaction-button-comments" ng-if="isEnabled('highlight3')">
        <span class="interaction-button-count">{{ interactionCount('highlight3') }}</span>
        <div ng-if="areLoading.highlight3" class="interaction-button-loading loadingIndicatorSmall"></div>
        <img ng-if="isActive('highlight3') && !areLoading.highlight3" class="icon-as-button interaction-button-active" src="assets/icon-highlight3-full.png" alt="{{ 'Highlighted (!!!)' | translate }}" ng-click="triggerInteraction('highlight3')" />
        <img ng-if="!isActive('highlight3') && !areLoading.highlight3" class="icon-as-button interaction-button-inactive" src="assets/icon-highlight3-empty.png" alt="{{ 'Highlight (!!!)' | translate }}" ng-click="triggerInteraction('highlight3')" />
    </div>
</div>

