openproject/public/templates/work_packages/tabs/watchers.html

<div class="work-packages--details-content">
  <div id="detail-panel-watchers">
    <ul ng-if="watchers.length">
      <li ng-repeat="watcher in watchers">
        <user-field focus="$index == focusElementIndex" user="watcher"></user-field>
        <accessible-by-keyboard execute="deleteWatcher(watcher)" ng-if="watcher.links.removeWatcher">
          <icon-wrapper icon-name="close"
                        icon-title="{{I18n.t('js.button_delete_watcher')}}"
                        class="detail-panel-watchers-delete-watcher-icon"></icon-wrapper>
        </accessible-by-keyboard>
      </li>
    </ul>

    <div id="detail-panel-watchers-add-watcher" ng-if="workPackage.link('addWatcher') && availableWatchers.length">
      <h3 ng-bind="I18n.t('js.button_add_watcher')"/>
      <fieldset>
        <legend ng-bind="I18n.t('js.button_add_watcher')" class="hidden-for-sighted"/>
        <select focus="focusElementIndex < 0" ng-model="selectedWatcher.id" data-placeholder="{{ I18n.t('js.label_select_watcher') }}" ui-select2>
          <option value=""></option>
          <option ng-repeat="watcher in availableWatchers" value="{{watcher.props.id}}">
            {{watcher.props.name}}
          </option>
        </select>
      </fieldset>
    </div>

  </div>
</div>