{{define "title"}}Match Scheduling{{end}}
{{define "body"}}
<div class="row">
  {{if .ErrorMessage}}
    <div class="alert alert-dismissable alert-danger">
      <button type="button" class="close" data-dismiss="alert">×</button>
      {{.ErrorMessage}}
    </div>
  {{end}}
  <div class="col-lg-5">
    <div class="well">
      <form id="scheduleForm" class="form-horizontal" action="/setup/schedule/save" method="POST">
        <fieldset>
          <legend>Schedule Parameters</legend>
          <div class="form-group">
            <label class="col-lg-5 control-label">Match Type</label>
            <div class="col-lg-7">
              <div class="radio">
                <label>
                  <input type="radio" name="matchType" value="practice"
                    {{if eq .MatchType "practice"}}checked{{end}}>
                  Practice
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="matchType" value="qualification"
                    {{if eq .MatchType "qualification"}}checked{{end}}>
                  Qualification
                </label>
              </div>
            </div>
          </div>
          <div id="blockContainer"></div>
          <p>
            <b>Total match count: <span id="totalNumMatches">0</span></b><br />
            <b>Matches per team: <span id="matchesPerTeam">0</span></b><br />
            <b>Excess matches: <span id="numExcessMatches">0</span></b><br />
            <b>Matches needed for +1 per team: <span id="nextLevelMatches">0</span></b>
          </p>
          <div class="form-group">
            <div class="col-lg-12">
              <button type="button" class="btn btn-default" onclick="addBlock();">Add Block</button>
              <button type="button" class="btn btn-info" onclick="generateSchedule();">
                Generate Schedule
              </button>
              <button type="submit" class="btn btn-primary">Save Schedule</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
  <div class="col-lg-5">
    <table class="table table-striped table-hover ">
      <thead>
        <tr>
          <th>Match</th>
          <th>Type</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        {{range $match := .Matches}}
          <tr>
            <td>{{$match.DisplayName}}</td>
            <td>{{$match.Type}}</td>
            <td>{{$match.Time}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  <div class="col-lg-2">
    <table class="table table-striped table-hover ">
      <thead>
        <tr>
          <th>Team</th>
          <th>First Match</th>
        </tr>
      </thead>
      <tbody>
        {{range $team, $firstMatch := .TeamFirstMatches}}
          <tr>
            <td>{{$team}}</td>
            <td>{{$firstMatch}}</td>
          </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
<div id="blockTemplate" style="display: none;">
  <div class="well well-sm" id="block{{"{{blockNumber}}"}}">
    <b>Block {{"{{blockNumber}}"}}</b>
    <button type="button" class="close" onclick="deleteBlock({{"{{blockNumber}}"}});">×</button><br /><br />
    <div class="form-group">
      <label class="col-lg-4 control-label">Start Time</label>
      <div class="col-lg-8">
        <div class="input-group date" id="startTimePicker{{"{{blockNumber}}"}}"
            data-date-format="YYYY-MM-DD hh:mm:ss A" onchange="updateBlock({{"{{blockNumber}}"}});">
          <input type="text" class="form-control input-sm" id="startTime{{"{{blockNumber}}"}}"
              onchange="updateBlock({{"{{blockNumber}}"}});">
          <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-4 control-label">End Time</label>
      <div class="col-lg-8">
        <div class="input-group date" id="endTimePicker{{"{{blockNumber}}"}}"
            data-date-format="YYYY-MM-DD hh:mm:ss A" onchange="updateBlock({{"{{blockNumber}}"}});">
          <input type="text" class="form-control input-sm" id="endTime{{"{{blockNumber}}"}}"
              onchange="updateBlock({{"{{blockNumber}}"}});">
          <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-4 control-label">Cycle Time (sec)</label>
      <div class="col-lg-8">
        <input type="text" class="form-control input-sm" id="matchSpacingSec{{"{{blockNumber}}"}}"
            value="{{"{{matchSpacingSec}}"}}" placeholder="360" onchange="updateBlock({{"{{blockNumber}}"}});">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-5">Match count: <span id="numMatches{{"{{blockNumber}}"}}"></span></div>
      <div class="col-lg-7">Actual end time: <span id="actualEndTime{{"{{blockNumber}}"}}"></span></div>
    </div>
  </div>
</div>
{{end}}
{{define "script"}}
<script>var numTeams = {{.NumTeams}};</script>
<script src="/static/js/setup_schedule.js"></script>
<script>
  {{range $block := .ScheduleBlocks}}
    addBlock(moment(Date.parse({{$block.StartTime}})), {{$block.NumMatches}}, {{$block.MatchSpacingSec}});
  {{end}}
</script>
{{end}}