{{ if not .TemplateData.Teams }}
  <div>No games have been created</div>
{{ else }}
  <div class="content">
    <p>First choose the games that you want to rank, then put them in order from your most favorite to least favorite.</p>
    <p>Any games that you don't rank will be considered 'tied for last place'.</p>
  </div>
  <div class="content">
    <h2>1. Choose the games you want to rank</h2>
    <table id="unranked-table" class="pure-table pure-table-bordered center">
      <thead>
        <tr>
          <th></th>
          <th>Game Name</th>
          <th>Team Name</th>
          <th>Screenshots</th>
        </tr>
      </thead>
      <tbody>
        {{ range $i, $v := .TemplateData.Teams }} 
        <tr id="teamrow-{{$v.UUID}}" data-teamid="{{$v.UUID}}">
          <td class="unranked-actions"><a class="pure-button pure-button-primary" href="javascript:moveToRanked('{{$v.UUID}}');"><i class="fa fa-plus"></i> Add to Vote</a></td>
          <td class="voting-col game-name">{{ $v.Game.Name }}</td>
          <td class="voting-col team-name">{{ $v.Name }}</td>
          <td class="voting-col game-screenshots" data-sscount="{{len $v.Game.Screenshots}}">
            {{ if not $v.Game.Screenshots }}
            <i class="fa fa-image"></i> (No Screenshots)
            {{ else }}
            <a class="primary" tabindex="-1" href="javascript:showScreenshots('{{$v.UUID}}');"><i class="fa fa-image"></i> ({{ len $v.Game.Screenshots }}) Click to View</a>
            {{ end }}
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
  <div class="content">
    <h2>2. Order them from your most favorite to least favorite</h2>
    <table id="ranked-table" class="pure-table pure-table-bordered center">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Game Name</th>
          <th>Team Name</th>
          <th>Screenshots</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div class="content half">
    <h2>3. Submit your vote!</h2>
    <form action="/vote" onsubmit="return validateVote();">
      <input id="uservote" type="hidden" name="uservote" value="" />
      <input id="timestamp" type="hidden" name="timestamp" value="{{.TemplateData.Timestamp}}" />
      <button class="pure-button pure-button-primary space-vertical pull-right" type="submit">Submit Vote!</button>
    </form>
  </div>
  {{ range $i, $v := .TemplateData.Teams }} 
  <div class="pure-control-group" id="screenshots-{{ $v.UUID }}" style="display:none;">
    <h3>{{ $v.Game.Name }} by {{ $v.Name }}</h3>
    <label class="control-label">Click to view original size</label>
    <div class="center-all horizontal-scroll thumbnail-container" id="thumbnail-container">
      {{ range $imgi, $imgv := $v.Game.Screenshots }}
      <a href="javascript:embiggenScreenshot('{{$imgv.UUID}}');">
        <img id="{{ $imgv.UUID }}" data-teamid="{{ $v.UUID }}" data-ssid="{{ $imgv.UUID }}" class="thumbnail" alt="{{ $imgv.Description }}" src="data:image/{{$imgv.Filetype}};base64,{{ $imgv.Thumbnail }}" />
      </a>
      {{ end }}
    </div>
  </div>
  {{ end }}
  <div id="embiggenedScreenShot" class="hidden fullscreen" onclick="javascript:document.getElementById('embiggenedScreenShot').classList.add('hidden');"></div>
<script>
var teams = { };
{{ range $i, $v := .TemplateData.Teams }}
teams[{{$v.UUID}}] = {
  "team-name": "{{$v.Name}}",
  "game-name": "{{$v.Game.Name}}",
  "screenshots": [ {{ range $ssi, $ssv := $v.Game.Screenshots }} {{ $ssv.UUID }}, {{ end }} ]
};
{{ end }}

function showScreenshots(tmuuid) {
  var screenshots = document.getElementById('screenshots-'+tmuuid).cloneNode(true);
  screenshots.style.display='';
  showModal({
    title: 'Screenshots',
    subtitle: teams[tmuuid].game-name,
    bodyNode: screenshots,
    buttons: [{
      title: 'Done',
      position: 'right',
      click: hideModal
    }]
  });
}

function embiggenScreenshot(img) {
  var ss = document.getElementById(img);
  if(ss == null) {
    // Couldn't find the screenshot... Error
    setFlashMessage('Error viewing that screenshot, sorry...', ['error','fading']);
    return;
  }
  var container = document.getElementById('embiggenedScreenShot');
  while(container.hasChildNodes()) {
    container.removeChild(container.firstChild);
  }
  var clickToCloseMsg = document.createElement('div');
  clickToCloseMsg.innerText = "Click Image to Close";
  var oImg = document.createElement("img");
  oImg.setAttribute('src', '/image/'+ss.dataset.teamid+'/'+ss.dataset.ssid);
  oImg.setAttribute('alt', ss.getAttribute('alt'));
  container.appendChild(clickToCloseMsg);
  container.appendChild(oImg);
  container.classList.remove('hidden');
}

function validateVote() {
  var isValid = (getRanked().length > 0);
  if(!isValid) {
    setFlashMessage('You must choose at least one game.', ['error','fading']);
  }
  return (getRanked().length > 0);
}

function updateView() {
  updateButtonStates();
  var rankedCells = snack.wrap('#ranked-table>tbody>tr>td.rank-cell');
  for(var i = 0; i < rankedCells.length; i++) {
    rankedCells[i].innerText = i+1;
  }
  setUserVoteValue();
}

function setUserVoteValue() {
  document.getElementById('uservote').value=getRankedCSV();
}

// moveToRanked takes the uuid of a game/team and moves that game to the
// bottom of the 'ranked' table
function moveToRanked(tmUUID) {
  // First, find the team's row
  var rows = snack.wrap('#teamrow-'+tmUUID);
  if(rows.length > 0) {
    var row = rows[0];
    var delCell = row.getElementsByClassName('unranked-actions');
    if(delCell.length > 0) {
      delCell = delCell[0];
    }
    delCell.remove();
    var tbody = snack.wrap('#ranked-table>tbody')[0];
    var rankTd = document.createElement('td');
    rankTd.classList.add('rank-cell');
    row.prepend(rankTd);
    row.append(createRankedActionsTd(tmUUID));
    tbody.append(row)
  }
  updateView();
}

function moveRankedUp(tmUUID) {
  var rows = snack.wrap('#ranked-table>tbody>tr');
  var numRows = rows.length;
  var tbody = snack.wrap('#ranked-table>tbody')[0];
  if(rows.length > 0) {
    // Just loop through the rows adding them to the table
    // if the _next_ row is the row for this team, add it now
    for(var i = 0; i < numRows; i++) {
      if(numRows > i && rows[i+1] != null
          && rows[i+1].dataset.teamid == tmUUID) {
        // The next one is the one we're moving up
        // Append the _next_ one, then this one
        tbody.append(rows[i+1]);
        tbody.append(rows[i]);
        // Increment i manually, since we already added the next row
        i++;
      } else {
        // Otherwise just add the row
        tbody.append(rows[i]);
      }
    }
  }
  updateView();
}

function updateButtonStates() {
  var upBtns = snack.wrap('.ranked-move-up');
  for(var i = 0; i < upBtns.length; i++) {
    if(i == 0) {
      upBtns[i].disabled=true;
    } else {
      upBtns[i].disabled=false;
    }
  }
  var downBtns = snack.wrap('.ranked-move-down');
  for(var i = 0; i < downBtns.length; i++) {
    if(i == downBtns.length-1) {
      downBtns[i].disabled=true;
    } else {
      downBtns[i].disabled=false;
    }
  }

}

function moveRankedDown(tmUUID) {
  var rows = snack.wrap('#ranked-table>tbody>tr');
  var numRows = rows.length;
  var tbody = snack.wrap('#ranked-table>tbody')[0];
  if(numRows > 0) {
    // Just loop through the rows adding them to the table
    // When we hit the row for this team, delay it by one
    for(var i = 0; i < numRows; i++) {
      if(rows[i].dataset.teamid == tmUUID && numRows > i) {
        // This is the one we're moving down
        // Append the _next_ one, then this one
        tbody.append(rows[i+1]);
        tbody.append(rows[i]);
        // Increment i manually, since we already added the next row
        i++;
      } else {
        // Otherwise just add the row
        tbody.append(rows[i]);
      }
    }
  }
  updateView();
}

// moveToRanked takes the uuid of a game/team and moves that game to the
// bottom of the 'unranked' table
function moveToUnranked(tmUUID) {
  // First, find the team's row
  var rows = snack.wrap('#teamrow-'+tmUUID);
  if(rows.length > 0) {
    var row = rows[0];
    // Remove the cells we don't need
    var actCell = row.getElementsByClassName('ranked-actions');
    if(actCell.length > 0) {
      actCell = actCell[0];
    }
    actCell.remove();
    var rankTd = row.getElementsByClassName('rank-cell');
    if(rankTd.length > 0) {
      rankTd = rankTd[0];
    }
    rankTd.remove();
    // Add the cells we do
    row.prepend(createUnrankedActionsTd(tmUUID));
    // And add the row to the unranked table
    var tbody = snack.wrap('#unranked-table>tbody')[0];
    tbody.append(row);
  }
  updateView();
}

// getUnranked returns an array of games that haven't been ranked yet
// (it builds the array from the 'unranked' table)
function getUnranked() {
  return gameTableToArray('unranked');
}

// getRanked returns an array of games that the user has ranked
// (it builds the array from the 'ranked' table)
function getRanked() {
  return gameTableToArray('ranked');
}

// Converts either the 'ranked' or 'unranked' table to an array of objects
// 'tbl' should be either 'ranked' or 'unranked'
function gameTableToArray(tbl) {
  var ret = [];
  var trs = snack.wrap('#'+tbl+'-table>tbody>tr')
  if(trs.length > 0) {
    trs.each(function(ele, idx) {
      if(ele.dataset != null && ele.dataset.teamid != null) {
        ret = ret.concat(getTeamObj(ele.dataset.teamid));
      }
    });
  }
  return ret;
}

// getTeamObj returns an object for team tmUUID from table
function getTeamObj(tmUUID) {
  var ret = null;
  var rows = snack.wrap('#teamrow-'+tmUUID);
  if(rows.length > 0) {
    var ele = rows[0];
    ret = {
      uuid: tmUUID,
      name: ele.getElementsByClassName('game-name')[0].innerText,
      teamName: ele.getElementsByClassName('team-name')[0].innerText,
      ssCount: ele.getElementsByClassName('game-screenshots')[0].dataset.sscount
    };
  }
  return ret;
}

// getRankedCSV pulls the getRanked array and just returns a CSV of
// the team IDs in ranked order
// (This is how the 'vote' post expects it)
function getRankedCSV() {
  var r = getRanked();
  var ret = "";
  for(var i = 0; i < r.length; i++) {
    ret = ret + r[i].uuid+",";
  }
  return ret;
}

// createRankedActionsTd creates the td that holds all of the action
// buttons for a 'ranked' table row
function createRankedActionsTd(tmUUID) {
  var td = document.createElement('td');
  td.classList.add('ranked-actions');
  var upBtn = document.createElement('button');
  upBtn.classList.add('ranked-move-up', 'pure-button', 'pure-button-toggle-first', 'pure-button-primary');
  upBtn.innerHTML = '<i class="fa fa-arrow-up"></i> Move Up';
  snack.listener({
    node: upBtn,
    event: 'click'
  }, function() {
    moveRankedUp(tmUUID);
  });
  td.appendChild(upBtn);
  var dnBtn = document.createElement('button');
  dnBtn.classList.add('ranked-move-down', 'pure-button', 'pure-button-toggle-middle', 'pure-button-primary');
  dnBtn.innerHTML = '<i class="fa fa-arrow-down"></i> Move Down';
  snack.listener({
    node: dnBtn,
    event: 'click'
  }, function() {
    moveRankedDown(tmUUID);
  });
  td.appendChild(dnBtn);
  var delBtn = document.createElement('button');
  delBtn.dataset.teamid=tmUUID
  delBtn.classList.add('ranked-remove', 'pure-button', 'pure-button-toggle-last', 'pure-button-error');
  delBtn.innerHTML = '<i class="fa fa-times"></i> Remove';
  snack.listener({
    node: delBtn,
    event: 'click'
  }, function (){
    moveToUnranked(tmUUID);
  });
  td.appendChild(delBtn);
  return td;
}

// createUnrankedActionsTd created the td that holds the 'Add to Vote' button
function createUnrankedActionsTd(tmUUID) {
  var td = document.createElement('td');
  td.classList.add('unranked-actions');
  var addBtn = document.createElement('button');
  addBtn.dataset.teamid=tmUUID
  addBtn.classList.add('pure-button', 'pure-button-toggle-last', 'pure-button-primary');
  addBtn.innerHTML = '<i class="fa fa-plus"></i> Add to Vote';
  var params = {
    node: addBtn,
    event: 'click'
  }
  snack.listener(params, function (){
    moveToRanked(addBtn.dataset.teamid);
  })
  td.appendChild(addBtn);
  return td;
}
</script>
{{ end }}