<!DOCTYPE html>
<html lang="{{ selectedLanguage }}" ng-controller="LanguageAndFontCtrl" class="no-js">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title>OpenSlides &ndash; Projector</title>
<link rel="stylesheet" href="static/css/openslides-libs.css">
<link rel="stylesheet" href="static/css/openslides-projector.css">
<link rel="icon" href="/static/img/favicon.png">

<style type="text/css">
  @font-face {
    font-family: 'OSFont';
    src: {{ font }};
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'OSFont Medium';
    src: {{ font_medium }};
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'OSFont Condensed';
    src: {{ font_condensed }};
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'OSFont Condensed Light';
    src: {{ font_condensed_light }};
    font-weight: 100;
    font-style: normal;
  }
</style>

<script src="static/js/openslides-libs.js"></script>
<script src="static/js/openslides.js"></script>
<script src="static/js/openslides-templates.js"></script>

<div id="projectorContainer" ng-controller="ProjectorCtrl">
  <style type="text/css">
    #header, #footer {
      background-color: {{ config('projector_header_backgroundcolor') }};
    }
    #header, #footer, #currentTime {
      color: {{ config('projector_header_fontcolor') }};
    }
    #header, #footer, .contentContainer {
      visibility: {{ blank ? 'hidden' : 'visible' }};
    }
    #projectorContainer {
      background-color: {{ blank ? config('projector_blank_color') : '#fff' }};
      height: {{ blank ? '100%' : 'auto' }};
    }
    h1 {
      color: {{ config('projector_h1_fontcolor') }};
    }
  </style>

  <style ng-if="config('logo_projector_header').path">
    #header {
      background-image: url({{ config('logo_projector_header').path }});
    }
  </style>

  <div id="header" ng-if="config('projector_enable_header_footer')">
    <img ng-if="config('projector_enable_logo')" id="logo" alt="OpenSlides"
      ng-src="{{ config('logo_projector_main').path || '/static/img/logo-projector.png' }}"/>
    <div ng-if="config('projector_enable_title')" id="eventdata">
      <div class="title" ng-class="{ 'titleonly': !config('general_event_description') }"
          ng-bind-html="config('general_event_name')"></div>
      <div ng-if="config('general_event_description')" class="description"
          ng-bind-html="config('general_event_description')"></div>
    </div>
  </div>

  <style type="text/css">
    .scrollcontent {
      margin-top: {{ scroll }}px !important;
    }
    .zoomcontent {
      font-size: {{ 100 + 20 * projector.scale }}%;
    }
    .mediascrollcontent {
      margin-top: {{scroll/2}}em !important;
      -webkit-transform: scale({{scale/100}});
      -ms-transform: scale({{scale/100}});
      transform: scale({{scale/100}});
    }
  </style>


  <style type="text/css" ng-if="config('projector_enable_header_footer')">
    .content {
      top: 100px;
    }
  </style>

  <div class="contentContainer" ng-repeat="element in elements | orderBy:'index'">
    <div ng-include="element.template"></div>
  </div>

  <div id="footer" ng-if="config('projector_enable_header_footer')">
    <span ng-if="config('general_event_date')">
      {{ config('general_event_date') }}
    </span>
    <span ng-if="config('general_event_date') && config('general_event_location')">
      |
    </span>
    <span ng-if="config('general_event_location')">
      {{ config('general_event_location') }}
    </span>
  </div>
</div>

<script src="/webclient/projector/"></script>
