{{/*
  Copyright 2014 Team 254. All Rights Reserved.
  Author: pat@patfairbank.com (Patrick Fairbank)

  Display shown on the audience screen overlayed over the video.
*/}}
<!DOCTYPE html>
<html>
  <head>
    <title>Audience Display - {{.EventSettings.Name}} - Cheesy Arena </title>
    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="/static/css/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/cheesy-arena.css" />
    <link rel="stylesheet" href="/static/css/audience_display.css" />
  </head>
  <body>
    <div id="overlayCentering">
      <div id="matchOverlay">
        <div id="matchOverlayTop">
          <div class="teams" id="leftTeams">
            <div id="leftTeam1"></div>
            <div id="leftTeam2"></div>
            <div id="leftTeam3"></div>
          </div>
          <div class="score reversible-left">
            <div class="avatars">
              <img class="avatar" id="leftTeam1Avatar" src="" />
              <img class="avatar" id="leftTeam2Avatar" src="" />
              <img class="avatar" id="leftTeam3Avatar" src="" />
            </div>
            <div class="score-number" id="leftScoreNumber"></div>
          </div>
          <div class="score score-right reversible-right">
            <div class="score-number" id="rightScoreNumber"></div>
            <div class="avatars">
              <img class="avatar" id="rightTeam1Avatar" src="" />
              <img class="avatar" id="rightTeam2Avatar" src="" />
              <img class="avatar" id="rightTeam3Avatar" src="" />
            </div>
          </div>
          <div class="teams" id="rightTeams">
            <div id="rightTeam1"></div>
            <div id="rightTeam2"></div>
            <div id="rightTeam3"></div>
          </div>
        </div>
        <div id="eventMatchInfo">
          <span>{{.EventSettings.Name}}</span>
          <span id="matchName"></span>
        </div>
      </div>
      <div class="text-center" id="matchCircle">
        <img id="logo" src="/static/img/lower-third-logo.png" alt="logo" />
        <div id="matchTime"></div>
      </div>
    </div>
    <div id="blindsContainer">
      <div class="blinds right background">
        <div class="blindsCenter blank"></div>
      </div>
      <div class="blinds left background">
        <div class="blindsCenter blank"></div>
      </div>
      <div class="blindsCenter full">
        <img id="blindsLogo" src="/static/img/lower-third-logo.png" alt="logo" />
      </div>
      <div id="finalScore">
        <div class="final-score reversible-left" id="leftFinalScore"></div>
        <div class="final-score reversible-right" id="rightFinalScore"></div>
        <div class="final-teams" id="leftFinalTeams">
          <div class="final-team" id="leftFinalTeam1"></div><img class="final-avatar" id="leftFinalTeam1Avatar" src="" />
          <div class="final-team" id="leftFinalTeam2"></div><img class="final-avatar" id="leftFinalTeam2Avatar" src="" />
          <div class="final-team" id="leftFinalTeam3"></div><img class="final-avatar" id="leftFinalTeam3Avatar" src="" />
        </div>
        <div class="final-teams" id="rightFinalTeams">
          <div class="final-team" id="rightFinalTeam1"></div><img class="final-avatar" id="rightFinalTeam1Avatar" src="" />
          <div class="final-team" id="rightFinalTeam2"></div><img class="final-avatar" id="rightFinalTeam2Avatar" src="" />
          <div class="final-team" id="rightFinalTeam3"></div><img class="final-avatar" id="rightFinalTeam3Avatar" src="" />
        </div>
        <div class="final-breakdown" id="leftFinalBreakdown">
          <span class="valign-cell">
            <span id="leftFinalAutoPoints"></span><br />
            <span id="leftFinalTeleopPoints"></span><br />
            <span id="leftFinalEndgamePoints"></span><br />
          </span>
        </div>
        <div class="final-breakdown" id="centerFinalBreakdown">
          <span class="valign-cell">Auto<br />Teleop<br />Endgame</span>
        </div>
        <div class="final-breakdown" id="rightFinalBreakdown">
          <span class="valign-cell">
            <span id="rightFinalAutoPoints"></span><br />
            <span id="rightFinalTeleopPoints"></span><br />
            <span id="rightFinalEndgamePoints"></span><br />
          </span>
        </div>
        <div id="finalEventMatchInfo">
          <div class="final-footer">{{.EventSettings.Name}}</div>
          <div class="final-footer" id="finalSeriesStatus">&nbsp;</div>
          <div class="final-footer" id="finalMatchName">&nbsp;</div>
        </div>
      </div>
      <div id="sponsor" class="carousel slide">
        <div class="carousel-inner" id="sponsorContainer">
        </div>
      </div>
    </div>
    <div id="allianceSelectionCentering" style="display: none;">
      <div id="allianceSelection"></div>
    </div>
    <div id="lowerThird">
      <img id="lowerThirdLogo" src="/static/img/lower-third-logo.png" alt="logo" />
      <div id="lowerThirdTop"></div>
      <div id="lowerThirdBottom"></div>
      <div id="lowerThirdSingle"></div>
    </div>
    <script id="allianceSelectionTemplate" type="text/x-handlebars-template">
      <table id="allianceSelectionTable">
        <tr>
          <td colspan="{{"{{numColumns}}"}}">
            <img src="/static/img/alliance-selection-logo.png" alt="logo" />
          </td>
        </tr>
        {{"{{#each alliances}}"}}
          <tr>
            <td class="alliance-cell">{{"{{Index}}"}}</td>
            {{"{{#each this}}"}}
              <td class="selection-cell">{{"{{#if TeamId}}"}}{{"{{TeamId}}"}}{{"{{/if}}"}}</td>
            {{"{{/each}}"}}
          </tr>
        {{"{{/each}}"}}
      </table>
    </script>
    <script id="sponsorImageTemplate" type="text/x-handlebars-template">
      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
        <div class="sponsor-image-container">
          <img src="/static/img/sponsors/{{"{{Image}}"}}" />
        </div>
        <h1>{{"{{Subtitle}}"}}</h1>
      </div>
    </script>
    <script id="sponsorTextTemplate" type="text/x-handlebars-template">
      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
        <h2>{{"{{Line1}}"}}<br />{{"{{Line2}}"}}</h2>
        <h1>{{"{{Subtitle}}"}}</h1>
      </div>
    </script>
    {{range $sound := .MatchSounds}}
      <audio id="sound-{{$sound.Name}}" src="/static/audio/{{$sound.Name}}.{{$sound.FileExtension}}" preload="auto">
      </audio>
    {{end}}
    <script src="/static/js/lib/jquery.min.js"></script>
    <script src="/static/js/lib/jquery.json-2.4.min.js"></script>
    <script src="/static/js/lib/jquery.websocket-0.0.1.js"></script>
    <script src="/static/js/lib/jquery.transit.min.js"></script>
    <script src="/static/js/lib/handlebars-1.3.0.js"></script>
    <script src="/static/js/lib/bootstrap.min.js"></script>
    <script src="/static/js/cheesy-websocket.js"></script>
    <script src="/static/js/match_timing.js"></script>
    <script src="/static/js/audience_display.js"></script>
  </body>
</html>
