{{define "title"}}Match Play{{end}}
{{define "body"}}
<div class="row">
  <div class="col-lg-4">
    <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">Elimination</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="text-center" style="white-space: nowrap;">
                    <a href="/match_play/{{$match.Id}}/generate_fake_result">
                      <b class="btn btn-info btn-xs">Generate Fake Result</b>
                    </a>
                    <a href="/match_play/{{$match.Id}}/queue">
                      <b class="btn btn-info btn-xs">Queue</b>
                    </a>
                  </td>
                </tr>
              {{end}}
            </tbody>
          </table>
        </div>
      {{end}}
    </div>
  </div>
  <div class="col-lg-8 text-center">
    <div class="row">
      <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="Robot">R</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Battery">B</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Bypass/Disable">Byp</div>
        </div>
        <div class="row form-group">
          <div class="col-lg-1">1 </div>
          {{template "matchPlayTeam" .Match.Blue1}}
        </div>
        <div class="row form-group">
          <div class="col-lg-1">2 </div>
          {{template "matchPlayTeam" .Match.Blue2}}
        </div>
        <div class="row form-group">
          <div class="col-lg-1">3 </div>
          {{template "matchPlayTeam" .Match.Blue3}}
        </div>
      </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="Robot">R</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Battery">B</div>
          <div class="col-lg-2" data-toggle="tooltip" title="Bypass/Disable">Byp</div>
        </div>
        <div class="row form-group">
          <div class="col-lg-1">3 </div>
          {{template "matchPlayTeam" .Match.Red3}}
        </div>
        <div class="row form-group">
          <div class="col-lg-1">2 </div>
          {{template "matchPlayTeam" .Match.Red2}}
        </div>
        <div class="row form-group">
          <div class="col-lg-1">1 </div>
          {{template "matchPlayTeam" .Match.Red1}}
        </div>
      </div>
    </div>
  </div>
</div>
{{end}}
{{define "script"}}
<script>
  $("[data-toggle=tooltip]").tooltip({"placement": "top"});
</script>
{{end}}
{{define "matchPlayTeam"}}
<div class="col-lg-3">
  <input type="text" class="form-control input-sm" value="{{.}}">
</div>
<div class="col-lg-2 col-no-padding"><div class="ds-status" id="team{{.}}Ds"></div></div>
<div class="col-lg-2 col-no-padding"><div class="robot-status" id="team{{.}}Robot"></div></div>
<div class="col-lg-2 col-no-padding"><div class="battery-status" id="team{{.}}Battery"></div></div>
<div class="col-lg-2 col-no-padding"><div class="bypass-button" id="team{{.}}Bypass"></div></div>
{{end}}