<div class="header">
  <div class="title">
    <div class="submenu" os-perms="core.can_manage_projector">
      <!-- New -->
      <button class="btn btn-primary btn-sm" ng-bootbox-prompt="{{ 'Please enter a name for the new projector' | translate }}"
        ng-bootbox-prompt-action="createProjector(result)">
        <i class="fa fa-plus"></i>
        <translate>New</translate>
      </button>
      <!-- Reference for current list of speakers -->
      <div class="btn-group" uib-dropdown>
        <button class="btn btn-default btn-sm" id="menuListofSpeakers" uib-dropdown-toggle
            uib-tooltip="{{ 'Select the projector to which the current list of speakers refers to.' | translate }}"
            aria-haspopup="true" aria-expanded="true">
          <i class="fa fa-microphone"></i>
          <translate>Reference for current list of speakers</translate>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="menuListOfSpeakers">
          <li ng-repeat="projector in projectors | orderBy:'id'">
            <a href ng-click="setListOfSpeakers(projector)">
              <i class="fa fa-check" ng-if="projector.id == currentListOfSpeakers"></i>
              {{ projector.name | translate }}
            </a>
          </li>
        </ul>
      </div>
      <!-- Identity -->
      <button class="btn btn-sm" ng-click="identifyProjectors()" ng-class="identifyPromise ? 'btn-primary' : 'btn-default'"
        uib-tooltip="{{ 'Display an identifier message on all projectors with the id and the name.' | translate }}">
        <i class="fa fa-binoculars"></i>
        <translate>Identify</translate>
      </button>
    </div>
    <h1 translate>Manage projectors</h1>
  </div>
</div>

<div class="details" os-perms="core.can_manage_projector">
    <div id="manage-projectors">

    <div ng-repeat="projector in projectors | orderBy: 'id'">
      <div>
        <a ui-sref="projector({id: projector.id})">
          {{ projector.id }}:
          <strong>{{ projector.name | translate }}</strong>
        </a>
        <a href="" class="pull-right" ng-click="toggleEditMenu(projector.id)"><i class="fa" ng-class="edit[projector.id] ? 'fa-times' : 'fa-pencil'"></i></a>
      </div>

      <div ng-show="edit[projector.id]" style="margin-bottom: -20px;">
        <div>
          <div class="dropdown" uib-dropdown>
            <button class="btn btn-default btn-sm" id="menuProjector{{ projector.id }}" uib-dropdown-toggle>
              <translate>Projection defaults</translate>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="menuProjector{{ projector.id }}">
              <li ng-repeat="projectiondefault in projectiondefaults | orderBy:'id'">
                <a href ng-click="setProjectionDefault(projector, projectiondefault)">
                  <i class="fa fa-check" ng-if="projectiondefault.projector_id === projector.id"></i>
                  {{ projectiondefault.display_name | translate }}
                </a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-danger btn-sm"
            ng-hide="projector.id==1"
            ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
            <b>{{ projector.name | translate }}</b>"
            ng-bootbox-confirm-action="deleteProjector(projector)">
            <i class="fa fa-trash"></i>
            <translate>Delete</translate>
          </button>
          <div ng-show="projector.id==1" style="height: 30px"><!-- Placeholder --></div>
        </div>
        <div>
          <label for="name{{ projector.id }}" class="control-label"><translate>Name</translate>:</label>
          <input type="text" class="form-control" id="name{{ projector.id }}"
            ng-model="projector.name" ng-change="editName(projector)"
            ng-model-options="{debounce: 2000}"></input>
        </div>
        <div>
          <label for="resolution{{ projector.id }}" class="control-label"><translate>Resolution</translate>:</label>
          <div id="resolution{{ projector.id }}">
            <div>
              <span>
                {{ resolutions[projector.id].width }}&times;{{ resolutions[projector.id].height }}
              </span>
              <div class="dropdown" uib-dropdown>
                <button class="btn btn-default btn-sm" id="aspectRatio{{ projector.id }}" uib-dropdown-toggle>
                  <translate>Aspect ratio</translate>: {{ resolutions[projector.id].aspectRatio }}
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="aspectRatio{{ projector.id }}">
                  <li ng-repeat="(aspectRatio, value) in aspectRatios track by $index">
                    <a href ng-click="setAspectRatio(projector, aspectRatio); saveResolution(projector);">
                      <i class="fa fa-check" ng-if="aspectRatio === resolutions[projector.id].aspectRatio"></i>
                      {{ aspectRatio }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <rzslider class="os-slider"
                rz-slider-model="sliders[projector.id].value"
                rz-slider-options="sliders[projector.id].options"></rzslider>
            </div>
          </div>
          <p class="help-block">
            {{ resolutions[projector.id].error }}
          </p>
        </div>
      </div>

      <style>
        #iframe_{{ projector.id }} {
            width: {{ projector.width }}px;
            height: {{ projector.height }}px;
            -moz-transform: scale({{ projector.iframeScale }});
            -webkit-transform: scale({{ projector.iframeScale }});
            -o-transform: scale({{ projector.iframeScale }});
            transform: scale({{ projector.iframeScale }});
            /* IE8+ - must be on one line, unfortunately */
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11={{ projector.iframeScale }}, M12=0, M21=0, M22={{ projector.iframeScale }}, SizingMethod='auto expand')";
        }

        #iframewrapper_{{ projector.id }} {
            height: {{ projector.iframeHeight }}px;
        }

        #iframeoverlay_{{ projector.id }} {
          height: {{ projector.iframeHeight }}px;
        }
      </style>

      <a ui-sref="projector({id: projector.id})" target="_blank">
        <div class="iframewrapper" id="iframewrapper_{{ projector.id }}">
          <iframe class="iframe" id="iframe_{{ projector.id }}" ng-src="{{ '/real-projector/' + projector.id + '/' }}" frameborder="0"></iframe>
          <div class="iframeoverlay" id="iframeoverlay_{{ projector.id }}"></div>
        </div>
      </a>
      <!-- projector control buttons -->
      <div class="nobr">
        <!-- edit -->
        <a ng-click="editCurrentSlide(projector)"
          ng-disabled="!projector.getFormOrStateForCurrentSlide()"
          class="btn btn-default btn-sm"
          title="{{ 'Edit current slide' | translate}}">
          <i class="fa fa-pencil"></i>
        </a>

        <!-- scale -->
        <div class="btn-group">
          <a ng-click="projector.controlProjector('scale', 'down')"
              class="btn btn-default btn-sm"
              title="{{ 'Smaller' | translate}}">
            <i class="fa fa-search-minus"></i>
          </a>
          <a ng-click="projector.controlProjector('scale', 'up')"
              class="btn btn-default btn-sm"
              title="{{ 'Bigger' | translate}}">
            <i class="fa fa-search-plus"></i>
          </a>
          <a ng-click="projector.controlProjector('scale', 'reset')"
              class="btn btn-default btn-sm"
              title="{{ 'Reset scaling' | translate}}">
            <i class="fa fa-undo"></i>
          </a>
        </div>
        <span ng-class="{'notNull': projector.scale != 0}">{{ projector.scale }}</span>

        <!-- scroll -->
        <div class="btn-group">
          <a ng-click="projector.controlProjector('scroll', 'down')"
              class="btn btn-default btn-sm"
              title="{{ 'Scroll up' | translate}}">
            <i class="fa fa-arrow-up"></i>
          </a>
          <a ng-click="projector.controlProjector('scroll', 'up')"
              class="btn btn-default btn-sm"
              title="{{ 'Scroll down' | translate}}">
            <i class="fa fa-arrow-down"></i>
          </a>
          <a ng-click="projector.controlProjector('scroll', 'reset')"
              class="btn btn-default btn-sm"
              title="{{ 'Reset scrolling' | translate}}">
            <i class="fa fa-undo"></i>
          </a>
        </div>
        <span ng-class="{'notNull': projector.scroll != 0}">{{ projector.scroll }}</span>
      </div>

      <!-- Default, BC, Blank -->
      <div class="middle">
        <div class="btn-group">
          <button class="btn btn-sm" ng-class="broadcast == projector.id ? 'btn-primary' : 'btn-default'"
            ng-click="projector.toggleBroadcast(projector)"
            ng-disabled="broadcast > 0 && broadcast != projector.id"
            uib-tooltip="{{ 'Broadcast the content of this projector to all other projectors.' | translate }}"
            tooltip-placement="bottom">
            <i class="fa" ng-class="broadcast == projector.id ? 'fa-star' : 'fa-star-o'"></i>
            <translate>Broadcast</translate>
          </button>
          <button class="btn btn-sm" ng-class="projector.blank ? 'btn-primary' : 'btn-default'"
            ng-click="projector.toggleBlank(projector)"
            ng-disabled="broadcast > 0 && broadcast != projector.id">
            <i class="fa" ng-class="projector.blank ? 'fa-square' : 'fa-square-o'"></i>
            <translate>Blank</translate>
          </button>
        </div>
      </div>

    </div>
  </div>
</div>
