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

  UI for entering realtime scores.
*/}}
{{define "title"}}Scoring Panel{{end}}
{{define "body"}}
<div id="matchName">&nbsp;</div>
<div id="alliance">
  <div class="scoring-section">
    <div class="scoring-header">
      <div>&nbsp;</div>
      <div>Exited Initiation Line?</div>
      <div>Endgame Status</div>
    </div>
    {{range $i := seq 3}}
      <div>
        <div id="team{{$i}}" class="team robot-field"></div>
        <div id="exitedInitiationLine{{$i}}" class="boolean robot-field" onclick="handleClick('{{$i}}');">
          <div class="shortcut">{{$i}}</div>
          <div class="value"></div>
          <div class="shortcut"></div>
        </div>
        <div id="endgameStatus{{$i}}" class="endgame-status robot-field" onclick="handleClick('{{add $i 3}}');">
          <div class="shortcut">{{add $i 3}}</div>
          <div class="value"></div>
          <div class="shortcut"></div>
        </div>
      </div>
    {{end}}
  </div>
  {{if not .PlcIsEnabled}}
    <div id="elements">
      <div class="scoring-section">
        <div>
          <div>&nbsp;</div>
          <div class="goal-header">Inner</div>
          <div class="goal-header">Outer</div>
          <div class="goal-header">Lower</div>
        </div>
        <div>
          <div class="goal-period">Auto</div>
          {{template "goal" dict "period" "auto" "level" "Inner" "plus" "W" "minus" "Q"}}
          {{template "goal" dict "period" "auto" "level" "Outer" "plus" "S" "minus" "A"}}
          {{template "goal" dict "period" "auto" "level" "Bottom" "plus" "X" "minus" "Z"}}
        </div>
        <div>
          <div class="goal-period">Teleop</div>
          {{template "goal" dict "period" "teleop" "level" "Inner" "plus" "R" "minus" "E"}}
          {{template "goal" dict "period" "teleop" "level" "Outer" "plus" "F" "minus" "D"}}
          {{template "goal" dict "period" "teleop" "level" "Bottom" "plus" "V" "minus" "C"}}
        </div>
      </div>
      <div class="scoring-section">
        <div class="scoring-header">
          <div>Rotation Control</div>
          <div>Color After Rotation</div>
          <div>Position Control</div>
          <div>Rung Is Level</div>
        </div>
        <div>
          <div id="rotationControl" class="control-panel robot-field" onclick="handleClick('O');">
            <div class="shortcut">O</div>
            <div class="value"></div>
            <div class="shortcut"></div>
          </div>
          <div id="controlPanelColor" class="control-panel-color robot-field" onclick="handleClick('K');">
            <div class="shortcut">K</div>
            <div class="value"></div>
            <div class="shortcut"></div>
          </div>
          <div id="positionControl" class="control-panel robot-field" onclick="handleClick('P');">
            <div class="shortcut">P</div>
            <div class="value"></div>
            <div class="shortcut"></div>
          </div>
          <div id="rungIsLevel" class="boolean robot-field" onclick="handleClick('L');">
            <div class="shortcut">L</div>
            <div class="value"></div>
            <div class="shortcut"></div>
          </div>
        </div>
      </div>
    </div>
  {{end}}
</div>
<div id="instructions">Click or use the labeled keyboard shortcuts to toggle each element</div>
<div id="commitMatchScore">
  <button type="button" class="btn btn-info" onclick="commitMatchScore();">
    Commit Final Match Score
  </button>
</div>
<div id="postMatchMessage">Waiting for the next match...</div>
{{end}}
{{define "head"}}
<link href="/static/css/scoring_panel.css" rel="stylesheet">
{{end}}
{{define "script"}}
<script src="/static/js/match_timing.js"></script>
<script src="/static/js/scoring_panel.js"></script>
{{end}}
{{define "goal"}}
<div class="goal">
  <div class="number-button minus" onclick="handleClick('{{.minus}}');">
    <div class="shortcut">{{.minus}}</div>-<div class="shortcut" style="opacity: 0;">{{.minus}}</div>
  </div>
  <div id="{{.period}}Cells{{.level}}"></div>
  <div class="number-button plus" onclick="handleClick('{{.plus}}');">
    <div class="shortcut">{{.plus}}</div>+<div class="shortcut" style="opacity: 0;">{{.plus}}</div>
  </div>
</div>
{{end}}