div.ticket-watch-title(
    title="{{ 'COMMON.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:vm.item.watchers.length||0}:'messageformat' }}",
    tg-loading="vm.loading"
) {{ vm.item.watchers.length }} {{'COMMON.WATCHERS.WATCHERS' | translate}}

div.ticket-watch-inner
    a.ticket-watch-button(
        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(ng-if="!vm.item.is_watcher")
            tg-svg(svg-icon="icon-watch")
            span {{'COMMON.WATCH_BUTTON.WATCH' | translate}}
        span(ng-if="vm.item.is_watcher && !vm.isMouseOver",)
            tg-svg(svg-icon="icon-watch")
            span {{'COMMON.WATCH_BUTTON.WATCHING' | translate}}
        span(ng-if="vm.item.is_watcher && vm.isMouseOver")
            tg-svg(svg-icon="icon-unwatch")
            span {{'COMMON.WATCH_BUTTON.UNWATCH' | translate}}

    a.add-watcher(
        href=""
        title="{{'COMMON.WATCHERS.TITLE_ADD' | translate}}"
        ng-click="vm.openWatchers()"
        tg-check-permission="{{vm.getPerms()}}"
    )
        span + {{'COMMON.WATCHERS.ADD' | translate}}