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

<h1>{{ item.title }}</h1>

<div id="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 -->
  <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>


<h2>
  <translate>List of speakers</translate>
  <span os-perms="agenda.can_manage">
    <button ng-if="item.speaker_list_closed" ng-click="closeList(false)"
        class="btn btn-sm btn-danger" translate>
      Closed
    </button>
    <button ng-if="!item.speaker_list_closed" ng-click="closeList(true)"
        class="btn btn-sm btn-success" translate>
      Opened
    </button>
  </span>
  <!-- TODO: project list
       ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"-->
  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
      ng-click="projectListOfSpeakers()">
    <i class="fa fa-video-camera"></i>
    <translate>List of speakers</translate>
  </a>
</h2>

<!-- TODO:
   * show only 'add me' OR 'remove me' button
-->
  <button class="btn btn-default btn-xs" type="button"
      data-toggle="collapse" data-target="#old_speakers"
      aria-expanded="false" aria-controls="collapseExample">
    Show all old speakers
  </button>

  <div class="collapse" id="old_speakers">
  <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>
  <ol>
    <li ng-repeat="speaker in item.speakers | filter: {begin_time: null}">
      {{ 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 class="form-group">
    <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="speaker.selected" ng-change="addSpeaker(speaker.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="speaker={}" 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>