<div ng-if="item" class="details" ng-controller="ListOfSpeakersManagementCtrl">
<div class="speakers-toolbar">
  <div class="pull-right">
    <span os-perms="agenda.can_manage">
      <button ng-if="isAllowed('removeAll')" class="btn btn-sm btn-danger"
          ng-bootbox-confirm="{{ 'Are you sure you want to remove all speakers from this list?'| translate }}"
          ng-bootbox-confirm-action="removeAllSpeakers()">
          <i class="fa fa-trash fa-lg"></i>
          <translate>Remove all speakers</translate>
      </button>
      <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>Closed</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>

  <!-- Start/Stop controls -->
  <button ng-if="isAllowed('endCurrentSpeech')" ng-click="endSpeech()"
      class="btn btn-sm btn-default">
    <i class="fa fa-stop"></i>
    <translate>End current speech</translate>
  </button>
  <button ng-if="isAllowed('beginNextSpeech')" ng-click="beginSpeech()"
      class="btn btn-sm btn-default">
    <i class="fa fa-play"></i>
    <translate>Begin next speech</translate>
  </button>
</div>

  <!-- text for empty list -->
  <p ng-if="speakers.length == 0" translate>
    The list of speakers is empty.
  </p>

  <template-hook hook-name="itemDetailListOfSpeakersButtons"></template-hook>

  <!-- Last speakers -->
  <div class="spacer-top-lg">
    <button ng-if="isAllowed('showLastSpeakers')" ng-click="$parent.showOldSpeakers = !$parent.showOldSpeakers"
        class="btn btn-xs btn-default">
      <translate ng-if="!$parent.showOldSpeakers">Last speakers</translate>
      <translate ng-if="$parent.showOldSpeakers">Hide</translate>
    </button>
    <div uib-collapse="!showOldSpeakers">
      <ol class="indentation">
        <li ng-repeat="speaker in lastSpeakers">
          {{ speaker.user.get_full_name() }}
          <small class="grey">
            {{ getDuration(speaker) | osSecondsToTime }} <translate>minutes</translate>
            (<translate>Start time</translate>:
            {{ speaker.begin_time | date:'yyyy-MM-dd HH:mm:ss' }})
          </small>
          <button os-perms="agenda.can_manage" ng-click="removeSpeaker(speaker.id)"
              class="btn btn-default btn-xs" title="{{ 'Remove' | translate }}">
            <i class="fa fa-times"></i>
          </button>
      </ol>
    </div>
  </div>

  <!-- Current speaker -->
  <p ng-repeat="speaker in currentSpeaker" class="currentSpeaker spacer indentation">
    <i class="fa fa-microphone fa-lg"></i>
    {{ speaker.user.get_full_name() }}
    <button os-perms="agenda.can_manage" ng-click="endSpeech()"
        class="btn btn-default btn-sm" title="{{ 'End speech' | translate }}">
      <i class="fa fa-microphone-slash"></i> <translate>Stop</translate>
    </button>
    <button os-perms="agenda.can_manage" ng-click="removeSpeaker(speaker.id)"
        class="btn btn-default btn-sm" title="{{ 'Remove' | translate }}">
      <i class="fa fa-times"></i>
    </button>
  </p>

  <!-- Next speakers -->
  <div ng-show="nextSpeakers.length > 0">
    <div ui-tree="treeOptions" data-empty-placeholder-enabled="false">
      <ol ui-tree-nodes="" ng-model="speakers">
        <li ng-repeat="speaker in nextSpeakers | orderBy:'weight'" 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() }}
          &nbsp;
          <button os-perms="agenda.can_manage" ng-click="beginSpeech(speaker.id)"
              class="btn btn-default btn-sm" title="{{ 'Begin speech' | translate }}">
            <i class="fa fa-microphone"></i> <translate>Start</translate>
          </button>
          <button os-perms="agenda.can_manage" ng-click="removeSpeaker(speaker.id)"
              class="btn btn-default btn-sm" title="{{ 'Remove' | translate }}">
            <i class="fa fa-times"></i>
          </button>
      </ol>
    </div>
  </div>

  <!-- Select speakers form -->
  <div class="form-group spacer-top-lg">
    <div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" ng-click="alert={}" close="alert={}">
      {{ alert.msg }}
    </div>
    <div os-perms="agenda.can_manage">
      <select chosen
          ng-model="speakerSelectBox.selected"
          ng-change="addSpeaker(speakerSelectBox.selected)"
          ng-options="user.id as user.get_full_name() for user in users"
          search-contains="true"
          placeholder-text-single="'Select or search a participant ...' | translate"
          no-results-text="'No results available ...' | translate"
          class="form-control">
      <select>
    </div>
    <p class="spacer">
      <button ng-if="isAllowed('add')" ng-click="addSpeaker()" class="btn btn-default btn-sm">
        <i class="fa fa-plus"></i>
        <translate>Add me</translate>
      </button>
      <button ng-if="isAllowed('remove')" ng-click="removeSpeaker()" class="btn btn-default btn-sm">
        <i class="fa fa-minus"></i>
        <translate>Remove me</translate>
      </button>
  </div>
</div>
