{{define "title"}}Alliance Selection{{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}}
  {{if len .Alliances | eq 0}}
    <div class="col-lg-3">
      <form action="/setup/alliance_selection/start" method="POST">
        <legend>Alliance Selection</legend>
        <button type="submit" class="btn btn-info">Start Alliance Selection</button>
      </form>
    </div>
  {{else}}
    <form action="/setup/alliance_selection" method="POST">
      <div class="col-lg-3 ">
        <legend>Alliance Selection</legend>
        <div class="form-group">
          <button type="submit" class="btn btn-info">Update</button>
        </div>
        <div class="form-group">
          <button type="button" class="btn btn-danger"
              onclick="$('#confirmResetAllianceSelection').modal('show');">
            Reset Alliance Selection
          </button>
        </div>
        <div class="form-group">
          <button type="button" class="btn btn-primary"
              onclick="$('#confirmFinalizeAllianceSelection').modal('show');">
            Finalize Alliance Selection
          </button>
        </div>
      </div>
      <div class="col-lg-5">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Alliance #</th>
              <th>Captain</th>
              <th>Pick 1</th>
              <th>Pick 2</th>
              {{if index .Alliances 0 | len | eq 4}}
                <th>Pick 3</th>
              {{end}}
            </tr>
          </thead>
          <tbody>
            {{range $i, $alliance := .Alliances}}
              <tr>
                <td class="col-lg-2">{{(index $alliance 0).AllianceId}}</td>
                {{range $j, $team := $alliance}}
                  {{if eq $team.TeamId 0}}
                    <td class="col-lg-2">
                      <input type="text" class="form-control input-sm" name="selection{{$i}}_{{$j}}" value=""
                          {{if and (eq $i $.NextRow) (eq $j $.NextCol)}}autofocus{{end}}
                          oninput="$(this).parent().addClass('has-warning');" />
                    </td>
                  {{else}}
                    <td class="col-lg-2">
                      <input type="text" class="form-control input-sm" name="selection{{$i}}_{{$j}}"
                          value="{{$team.TeamId}}" oninput="$(this).parent().addClass('has-warning');" />
                    </td>
                  {{end}}
                {{end}}
              </tr>
            {{end}}
          </tbody>
        </table>
        Hint: Press 'Enter' after entering each team number for easiest use.
      </div>
    </form>
    <div class="col-lg-2">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Team</th>
          </tr>
        </thead>
        <tbody>
          {{range $team := .RankedTeams}}
            {{if not $team.Picked}}
              <tr>
                <td>{{$team.Rank}}</td>
                <td>{{$team.TeamId}}</td>
              </tr>
            {{end}}
          {{end}}
        </tbody>
      </table>
    </div>
  {{end}}
</div>
<div id="confirmResetAllianceSelection" 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 reset the alliance selection process?</p>
      </div>
      <div class="modal-footer">
        <form class="form-horizontal" action="/setup/alliance_selection/reset" method="POST">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">Reset Alliance Selection</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div id="confirmFinalizeAllianceSelection" 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>
      <form class="form-horizontal" action="/setup/alliance_selection/finalize" method="POST">
        <div class="modal-body">
          <p>Are you sure you want to finalize the alliance selection process?</p>
          <div class="form-group">
            <label class="col-lg-6 control-label">Elimination Round Start Time</label>
            <div class="col-lg-6">
              <div class="input-group date" id="startTimePicker" data-date-format="YYYY-MM-DD hh:mm:ss A">
                <input type="text" class="form-control input-sm" name="startTime" />
                <span class="input-group-addon input-sm">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Finalize Alliance Selection</button>
        </div>
      </form>
    </div>
  </div>
</div>
{{end}}
{{define "script"}}
<script>
  $(function() {
    $("#displayBackgroundColor").colorpicker();
    var startTime = moment(new Date()).hour(13).minute(0).second(0);
    $("#startTimePicker").datetimepicker().data("DateTimePicker").setDate(startTime);
  });
</script>
{{end}}