mixin counter
    span.track-button-counter(
        title="{{ 'COMMON.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.watchers.length||0}:'messageformat' }}",
        tg-loading="vm.loading"
    ) {{ 'COMMON.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.watchers.length||0}:'messageformat' }}


//- Registered user button
a.track-button.watch-button.watch-container(
    href=""
    title="{{ 'COMMON.WATCH_BUTTON.BUTTON_TITLE' | translate }}"
    ng-if="::vm.user"
    ng-click="vm.toggleWatch()"
    ng-class="{'active': vm.item.is_watcher, 'is-hover': vm.item.is_watcher && vm.isMouseOver}"
    ng-mouseover="vm.showTextWhenMouseIsOver()"
    ng-mouseleave="vm.showTextWhenMouseIsLeave()"
)
    span.track-inner
        tg-svg(svg-icon="icon-watch")
        span(
            ng-if="!vm.item.is_watcher",
            translate="COMMON.WATCH_BUTTON.WATCH"
        )
        span(
            ng-if="vm.item.is_watcher && !vm.isMouseOver",
            translate="COMMON.WATCH_BUTTON.WATCHING"
        )
        span(
            ng-if="vm.item.is_watcher && vm.isMouseOver",
            translate="COMMON.WATCH_BUTTON.UNWATCH"
        )
    +counter

//- Anonymous user button
span.track-button.watch-button.watch-container(
    ng-if="::!vm.user"
)
    span.track-inner
        span.track-icon
            tg-svg(svg-icon="icon-watch")
        span(translate="COMMON.WATCH_BUTTON.WATCHERS")
    +counter