<h1 translate>Custom slides</h1>

<div id="submenu">
  <a ui-sref="core.customslide.create" os-perms="core.can_manage_projector" class="btn btn-primary btn-sm">
    <i class="fa fa-plus fa-lg"></i>
    <translate>New</translate>
  </a>
</div>



<div class="row form-group">
  <div class="col-sm-8" os-perms="core.can_manage_projector">
    <p><input type="text" os-focus-me ng-model="filter.search" class="form-control"
        placeholder="{{ 'Filter' | translate}}">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th ng-click="toggleSort('title')" class="sortable">
            <translate>Title</translate>
            <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
                ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
            </i>
          <th os-perms="core.can_manage_projector" class="minimum">
            <translate>Actions</translate>
      <tbody>
        <tr ng-repeat="customslide in customslides | filter: filter.search |
            orderBy: sortColumn:reverse" ng-class="{ 'activeline': customslide.isProjected() }">
          <td><a ui-sref="core.customslide.detail({id: customslide.id})">{{ customslide.title }}</a>
          <td os-perms="core.can_manage_projector" class="nobr">
            <!-- project -->
            <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm" ng-class="{ 'btn-primary': customslide.isProjected() }"
                ng-click="customslide.project()"
                title="{{ 'Project user' | translate }}">
              <i class="fa fa-video-camera"></i>
            </a>
            <!-- edit -->
            <a ui-sref="core.customslide.detail.update({id: customslide.id })"
                class="btn btn-default btn-sm"
                title="{{ 'Edit' | translate}}">
              <i class="fa fa-pencil"></i>
            </a>
            <!-- delete -->
            <a ng-click="delete(customslide)" class="btn btn-danger btn-sm"
                title="{{ 'Delete' | translate }}">
              <i class="fa fa-trash-o"></i>
            </a>
    </table>
  </div>
  <div class="col-sm-4">
    <!-- projector live view -->
    <div class="well">
      <h4 translate>Projector live view</h4>
      <a ui-sref="projector" target="_blank">
        <div id="iframewrapper">
          <iframe id="iframe" src="/projector" frameborder="0"></iframe>
          <div id="iframeoverlay"></div>
        </div>
      </a>
    </div>
  </div>
</div>
