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

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

{% block javascripts %}
  <script type="text/javascript" src="/documentation-bundle/assets/js/ioserver.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 %}