OpenSlides/openslides/agenda/static/templates/agenda/item-detail.html

<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to agenda</translate>
      </a>
      <!-- project list of speakers -->
      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
          ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"
          ng-click="item.projectListOfSpeakers()">
        <i class="fa fa-video-camera"></i>
        <translate>List of speakers</translate>
      </a>
      <!-- project -->
      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
          ng-class="{ 'btn-primary': item.isProjected() }"
          ng-click="item.project()"
          title="{{ 'Project item' | translate }}">
        <i class="fa fa-video-camera"></i>
      </a>
    </div>
    <h1>{{ item.title }}</h1>
    <h2><translate>List of speakers</translate></h2>
  </div>
</div>

<div class="details">
  <div class="pull-right">
    <span os-perms="agenda.can_manage">
      <button ng-if="item.speaker_list_closed" ng-click="closeList(false)"
          class="btn btn-sm btn-default">
        <i class="fa fa-toggle-off"></i>
        <translate>Close</translate>
      </button>
      <button ng-if="!item.speaker_list_closed" ng-click="closeList(true)"
          class="btn btn-sm btn-default">
        <i class="fa fa-toggle-on"></i>
        <translate>Open</translate>
      </button>
    </span>
  </div>

<!-- TODO:
   * show only 'add me' OR 'remove me' button
-->
  <button class="btn btn-default btn-sm" ng-click="showOldSpeakers = !showOldSpeakers">
    Show all old speakers
  </button>
  <div uib-collapse="!showOldSpeakers">
  <h3 translate>Old speakers:</h3>
    <ol>
      <li ng-repeat="speaker in item.speakers | filter: {end_time: '!!'}">
        {{ speaker.user.get_full_name() }}
        <small class="grey">
          [{{speaker.begin_time | date:'yyyy-MM-dd HH:mm:ss'}} –
          {{speaker.end_time | date:'yyyy-MM-dd HH:mm:ss'}}]
        </small>
    </ol>
  </div>

  <h3 translate>Current speaker:</h3>
  <strong ng-repeat="speaker in item.speakers | filter: {end_time: null, begin_time: '!!'}">
    {{ speaker.user.get_full_name() }}
  </strong>

  <h3 translate>Next speakers:</h3>
  <div class="row" ng-show="speakers.length > 0">
    <div ui-tree="treeOptions" class="col-sm-6">
      <ol ui-tree-nodes="" ng-model="speakers">
        <li ng-repeat="speaker in speakers | filter: {begin_time: null}" ui-tree-node>
          <i os-perms="agenda.can_manage" ui-tree-handle="" class="fa fa-arrows-v"></i>
          {{ $index + 1 }}.
          {{ speaker.user.get_full_name() }}
          <button os-perms="agenda.can_manage" ng-click="removeSpeaker(speaker.id)"
              class="btn btn-default btn-xs">
            <i class="fa fa-times"></i>
          </button>
          <button os-perms="agenda.can_manage" ng-click="beginSpeech(speaker.id)"
              class="btn btn-default btn-xs">
            <i class="fa fa-play"></i>
          </button>
      </ol>
    </div>
  </div>

  <div class="form-group spacer">
    <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
      {{alert.msg}}
    </alert>
    <div os-perms="agenda.can_manage" class="input-group">
      <ui-select ng-model="speakerSelectBox.selected" ng-change="addSpeaker(speakerSelectBox.selected.id)">
        <ui-select-match placeholder="{{ 'Select or search a participant ...' | translate }}">
          {{ $select.selected.get_full_name() }}
        </ui-select-match>
        <ui-select-choices repeat="user in users | filter: $select.search">
          <div ng-bind-html="user.get_full_name() | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
      <span class="input-group-btn">
        <a ng-click="speakerSelectBox={}" class="btn btn-default">
          <i class="fa fa-times-circle"></i>
        </a>
      </span>
    </div>
    <p os-perm="agenda.can_be_speaker">
      <button ng-click="addSpeaker()" class="btn btn-default">
        <i class="fa fa-plus"></i>
        <translate>Add me</translate>
      </button>
      <button ng-click="removeSpeaker()" class="btn btn-default">
        <i class="fa fa-minus"></i>
        <translate>Remove me</translate>
      </button>
    <p os-perms="agenda.can_manage">
      <button ng-click="beginSpeech()"
          class="btn btn-primary">
        <i class="fa fa-play"></i>
        <translate>Start next speaker</translate>
      </button>
      <button ng-click="endSpeech()"
          class="btn btn-default">
        <i class="fa fa-stop"></i>
        <translate>Stop current speaker</translate>
      </button>
  </div>
</div>