<div id="speakerbox">
  <h3 translate>List of speakers</h3>

  <!-- Last speakers -->
  <p ng-repeat="speaker in lastSpeakers = (agendaItem.speakers
    | filter: {end_time: '!!', begin_time: '!!'})
    | limitTo: config('agenda_show_last_speakers') : (lastSpeakers.length - config('agenda_show_last_speakers'))"
    class="lastSpeakers">
    {{ speaker.user.get_full_name() }}
    <i class="fa fa-star" ng-if="speaker.marked" title="{{ 'Marked' | translate }}"></i>
  </p>

  <!-- Current speaker -->
  <div ng-repeat="speaker in agendaItem.speakers | filter: {end_time: null, begin_time: '!!'} "
    class="currentSpeaker">
    <i class="fa fa-microphone fa-lg"></i>
    <span class="pull-right" style="width:calc(100% - 30px);">
      {{ speaker.user.get_full_name() }}
      <i class="fa fa-star" ng-if="speaker.marked" title="{{ 'Marked' | translate }}"></i>
    </span>
  </div>

  <!-- Next speakers -->
  <ol class="nextSpeakers">
    <li ng-repeat="speaker in nextSpeakers = (agendaItem.speakers
      | filter: {begin_time: null})
      | orderBy:'weight'
      | limitTo: 3">
      {{ speaker.user.get_full_name() }}
      <i class="fa fa-star" ng-if="speaker.marked" title="{{ 'Marked' | translate }}"></i>
    </li>
  </ol>
  <p ng-if="nextSpeakers.length > 3" class="lastSpeakers">
    <i>+ {{ nextSpeakers.length - 3 }}</i>
  </p>
</div>
