{% extends "../../base.html.twig" %}

{% block stylesheets %}
  <link rel="stylesheet" href="/documentation-bundle/assets/css/notes.css"/>
{% endblock %}

{% block javascripts %}
  <script type="text/javascript" src="/documentation-bundle/assets/js/notes.js"></script>
{% endblock %}

{% block body %}

  <div id="connection-status">Loading speaker view...</div>

  <div id="current-slide"></div>
  <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
  <div id="speaker-controls">
    <div class="speaker-controls-time">
      <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
      <div class="clock">
        <span class="clock-value">0:00 AM</span>
      </div>
      <div class="timer">
        <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
      </div>
      <div class="clear"></div>

      <h4 class="label pacing-title" style="display: none">Pacing – Time to finish current slide</h4>
      <div class="pacing" style="display: none">
        <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
      </div>
    </div>

    <div class="speaker-controls-notes hidden">
      <h4 class="label">Notes</h4>
      <div class="value"></div>
    </div>
  </div>
  <div id="speaker-layout" class="overlay-element interactive">
    <span class="speaker-layout-label"></span>
    <select class="speaker-layout-dropdown"></select>
  </div>

{% endblock %}