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

  UI for controlling match play and viewing team connection and field status.
*/}}
{{define "title"}}Match Play{{end}}
{{define "body"}}
<div class="row">
  <div class="col-lg-4">
    <a href="/match_play/0/load"><b class="btn btn-info">Load Test Match</b></a><br /><br />
    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
      <li{{if eq .CurrentMatchType "practice" }} class="active"{{end}}>
        <a href="#practice" data-toggle="tab">Practice</a>
      </li>
      <li{{if eq .CurrentMatchType "qualification" }} class="active"{{end}}>
        <a href="#qualification" data-toggle="tab">Qualification</a>
      </li>
      <li{{if eq .CurrentMatchType "elimination" }} class="active"{{end}}>
        <a href="#elimination" data-toggle="tab">Playoff</a>
      </li>
    </ul>
    <div class="tab-content">
      {{range $type, $matches := .MatchesByType}}
        <div class="tab-pane {{if eq $.CurrentMatchType $type }} active{{end}}" id="{{$type}}">
          <table class="table table-striped table-hover ">
            <thead>
              <tr>
                <th>Match</th>
                <th>Time</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {{range $match := $matches}}
                <tr class="{{$match.ColorClass}}">
                  <td>{{$match.DisplayName}}</td>
                  <td>{{$match.Time}}</td>
                  <td class="nowrap">
                    <a href="/match_play/{{$match.Id}}/load">
                      <b class="btn btn-info btn-xs">Load</b>
                    </a>
                    {{if ne $match.Status ""}}
                      <a href="/match_play/{{$match.Id}}/show_result">
                        <b class="btn btn-info btn-xs">Show Result</b>
                      </a>
                    {{end}}
                  </td>
                </tr>
              {{end}}
            </tbody>
          </table>
        </div>
      {{end}}
    </div>
  </div>
  <div class="col-lg-8">
    <div class="row text-center">
      <div id="matchState" class="col-lg-2 col-lg-offset-2 well well-sm text-center">&nbsp;</div>
      <div id="matchTime" class="col-lg-2 well well-sm text-center">&nbsp;</div>
      <div id="redScore" class="col-lg-2 well well-sm well-red text-center">&nbsp;</div>
      <div id="blueScore" class="col-lg-2 well well-sm well-blue text-center">&nbsp;</div>
    </div>
    <div class="row text-center">
      <div class="col-lg-6 well well-darkblue">
        <div class="row form-group">
          <div class="col-lg-4">Blue Teams</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Driver Station">DS</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Radio (AP Configured SSID)">Rad</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Robot">Rbt</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Bypass/Disable">Byp</div>
        </div>
        {{template "matchPlayTeam" dict "team" .Match.Blue1 "color" "B" "position" 1 "data" .}}
        {{template "matchPlayTeam" dict "team" .Match.Blue2 "color" "B" "position" 2 "data" .}}
        {{template "matchPlayTeam" dict "team" .Match.Blue3 "color" "B" "position" 3 "data" .}}
      </div>
      <div class="col-lg-6 well well-darkred">
        <div class="row form-group">
          <div class="col-lg-4">Red Teams</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Driver Station">DS</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Radio (AP Configured SSID)">Rad</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Robot">Rbt</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Bypass/Disable">Byp</div>
        </div>
        {{template "matchPlayTeam" dict "team" .Match.Red3 "color" "R" "position" 3 "data" .}}
        {{template "matchPlayTeam" dict "team" .Match.Red2 "color" "R" "position" 2 "data" .}}
        {{template "matchPlayTeam" dict "team" .Match.Red1 "color" "R" "position" 1 "data" .}}
      </div>
    </div>
    <div class="row text-center">
      <button type="button" id="startMatch" class="btn btn-success btn-lg btn-match-play"
          onclick="startMatch();" disabled>
        Start Match
      </button>
      <button type="button" id="abortMatch" class="btn btn-primary btn-lg btn-match-play"
          onclick="abortMatch();" disabled>
        Abort Match
      </button>
      <button type="button" id="commitResults" class="btn btn-info btn-lg btn-match-play"
          onclick="confirmCommit({{.IsReplay}});" disabled>
        Commit Results
      </button>
      <button type="button" id="discardResults" class="btn btn-danger btn-lg btn-match-play"
          onclick="$('#confirmDiscardResults').modal('show');" disabled>
        Discard Results
      </button>
      <a href="/match_review/current/edit">
        <button type="button" id="editResults" class="btn btn-default btn-lg btn-match-play" disabled>
          Edit Results
        </button>
      </a>
    </div>
    <br />
    <div class="row">
      <div class="col-lg-12 well">
        <div class="col-lg-3">
          <p>Scoring</p>
          <div class="row">
            <div class="col-lg-6 well-blue score-block">
              <div class="row">
                <div class="col-lg-12 blue-text">Auto</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="blueAutoScore" class="form-control input-sm" value="{{.BlueScore.AutoPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueTeleopScore"/>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 blue-text">Teleop</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="blueTeleopScore" class="form-control input-sm" value="{{.BlueScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueEndgameScore"/>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 blue-text">Endgame</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="blueEndgameScore" class="form-control input-sm" value="{{.BlueScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redAutoScore"/>
                </div>
              </div>
            </div>
            <div class="col-lg-6 well-red score-block">
              <div class="row">
                <div class="col-lg-12 red-text">Auto</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="redAutoScore" class="form-control input-sm" value="{{.RedScore.AutoPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redTeleopScore"/>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 red-text">Teleop</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="redTeleopScore" class="form-control input-sm" value="{{.RedScore.TeleopPoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="redEndgameScore"/>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-12 red-text">Endgame</div>
              </div>
              <div class="row">
                <div class="col-lg-12">
                  <input id="redEndgameScore" class="form-control input-sm" value="{{.RedScore.EndgamePoints}}" disabled onblur="updateRealtimeScore();" onkeypress="scoreKeyHandler()" data-next="blueAutoScore"/>
                </div>
              </div>
            </div>
          </div>
        {{if .PlcIsEnabled}}
          <p>PLC Status</p>
          <p>
            <span class="label label-scoring" id="plcStatus"></span><br />
            <span class="label label-scoring" id="fieldEstop">E-Stop</span>
            {{range $name, $status := .PlcArmorBlockStatuses}}
              <br /><span class="label label-scoring" id="plc{{$name}}Status">{{$name}}</span>
            {{end}}
          </p>
        {{end}}
        </div>
        <div class="col-lg-3">
          Audience Display
          <div class="form-group">
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="blank" onclick="setAudienceDisplay();">Blank
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="intro" onclick="setAudienceDisplay();">Match Intro
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="match" onclick="setAudienceDisplay();">Match Play
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="score" onclick="setAudienceDisplay();">Final Score
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="logo" onclick="setAudienceDisplay();">Logo
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="sponsor" onclick="setAudienceDisplay();">Sponsor Reel
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="allianceSelection"
                    onclick="setAudienceDisplay();">Alliance Selection
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="audienceDisplay" value="timeout" onclick="setAudienceDisplay();">Timeout
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <p>Alliance Station Display</p>
          <div class="form-group">
            <div class="radio">
              <label>
                <input type="radio" name="allianceStationDisplay" value="blank"
                       onclick="setAllianceStationDisplay();">Blank
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="allianceStationDisplay" value="match"
                       onclick="setAllianceStationDisplay();">Match
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="allianceStationDisplay" value="logo"
                       onclick="setAllianceStationDisplay();">Logo
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="allianceStationDisplay" value="timeout"
                       onclick="setAllianceStationDisplay();">Timeout
              </label>
            </div>
          </div>
        </div>
        <div class="col-lg-3">
          <p>Match Sounds</p>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="muteMatchSounds">
              Mute
            </label>
          </div>
          <p>Timeout</p>
          <input type="text" id="timeoutDuration" size="4" value="6:00" />
          <button type="button" id="startTimeout" class="btn btn-info btn-xs" onclick="startTimeout();">
            Start
          </button>
        </div>
      </div>
      <div class="row">
        <div id="cycleTimeMessage" class="col-lg-5 col-lg-offset-1"></div>
        <div id="earlyLateMessage" class="col-lg-5 text-right"></div>
        <div class="col-lg-1"></div>
      </div>
    </div>
  </div>
</div>
<div id="confirmCommitResults" class="modal" style="top: 20%;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Confirm</h4>
      </div>
      <div class="modal-body">
        <p id="confirmCommitReplay">This is a replay of Match {{.Match.DisplayName}}. Are you sure you want to
            overwrite the previous results?</p>
      </div>
      <div class="modal-footer">
        <form class="form-horizontal" action="/setup/teams/clear" method="POST">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="commitResults();">Commit Results</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div id="confirmDiscardResults" class="modal" style="top: 20%;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Confirm</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to discard the results for this match?</p>
      </div>
      <div class="modal-footer">
        <form class="form-horizontal" action="/setup/teams/clear" method="POST">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="discardResults();">Discard Results</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{end}}
{{define "script"}}
<script src="/static/js/match_timing.js"></script>
<script src="/static/js/match_play.js"></script>
{{end}}
{{define "matchPlayTeam"}}
<div class="row form-group" id="status{{.color}}{{.position}}">
  <div class="col-lg-1">{{.position}} </div>
  <div class="col-lg-3">
    <input type="number" class="form-control input-sm" value="{{if ne 0 .team}}{{.team}}{{end}}"
        onblur="substituteTeam($(this).val(), '{{.color}}{{.position}}');"
        {{if not .data.AllowSubstitution}}disabled{{end}}>
  </div>
  <div class="col-lg-2 col-no-padding"><div class="ds-status"></div></div>
  <div class="col-lg-2 col-no-padding"><div class="radio-status"></div></div>
  <div class="col-lg-2 col-no-padding"><div class="robot-status"></div></div>
  <div class="col-lg-2 col-no-padding">
    <div class="bypass-status" onclick="toggleBypass('{{.color}}{{.position}}');"></div>
  </div>
</div>
{{end}}