<h1>{{ item.get_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 overview</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>
  <!-- edit -->
  <a ui-sref="agenda.item.detail.update({id: item.id })" os-perms="agenda.can_manage"
      class="btn btn-default btn-sm"
      title="{{ 'Edit' | translate}}">
    <i class="fa fa-pencil"></i>
  </a>
</div>

<div class="white-space-pre-line">{{ item.text }}</div>

<div os-perm="agenda.can_manage">
  <h3 os-perm="agenda.can_manage" translate>Duration</h3>
  {{ item.duration }}
</div>

<div os-perm="agenda.can_manage">
  <h3 os-perm="agenda.can_manage" translate>Comment</h3>
  <div class="white-space-pre-line">{{ item.comment }}</div>
</div>


<h3 translate>List of speakers
  <span ng-if="item.speakerListClosed" class="label label-danger" translate>closed</span>
  <span os-perms="agenda.can_manage">
    <button ng-if="item.speakerListClosed" ng-click="closeList(false)"
        class="btn btn-sm btn-default" translate>
      Open list
    </button>
    <button ng-if="!item.speakerListClosed" ng-click="closeList(true)"
        class="btn btn-sm btn-default" translate>
      Close list
    </button>
  </span>
</h3>

<!-- TODO:
   * project list
   * show old/current/next speakers
   * start/stop speech
   * button 'put/remove me on/from the list'
   * check permissions
-->
<ol>
  <li ng-repeat="speaker in item.speaker_set">
    {{ (users | filter: {id: speaker.user})[0].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>
  </li>
</ol>

<div os-perms="agenda.can_manage" class="form-group col-sm-6">
  <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">{{alert.msg}}</alert>
  <div 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>
</div>
