<!DOCTYPE html>
<html lang="en" class="no-js">
<meta charset="utf-8">
<base href="/">
<title>OpenSlides &ndash; Projector</title>
<link rel="stylesheet" href="static/css/openslides-libs.css">
<link rel="stylesheet" href="static/css/projector.css">
<link rel="icon" href="/static/img/favicon.png">
<script src="static/js/openslides-libs.js"></script>

<style type="text/css">
  #header, #footer {
    background-color: {{ config('projector_header_backgroundcolor') }};
  }
  #header, #footer, #currentTime {
    color: {{ config('projector_header_fontcolor') }};
  }
  h1 {
    color: {{ config('projector_h1_fontcolor') }};
  }
</style>


<div id="header">
  <img ng-if="config('projector_enable_logo')" id="logo" src="/static/img/logo-projector.png" alt="OpenSlides" />
  <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>

<div ng-controller="ProjectorCtrl">
  <style type="text/css">
    .scrollcontent {
      margin-top: {{scroll}}em !important;
      font-size: {{scale}}%;
    }
  </style>
  <div ng-repeat="element in elements | orderBy:'index'">
    <div ng-include="element.template"></div>
  </div>
</div>

<div id="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>
<script src="/angular_js/projector/"></script>
