{% extends 'trosnoth/base.html' %}
{% load static %}
<!DOCTYPE html>
{% block head %}
  <title>{{ settings.serverName }} :: Match Report</title>
  <style type='text/css'>
    html {
      margin: 0;
      padding: 0;
      color: #000000;
      font: normal 12px "Tahoma", Verdana, Arial, Sans-Serif;
    }

    /* Html Elements */

    nav {
      margin: 0px 0px 7px 0px;
      padding: 0px;
      font-weight: normal;
    }

    table {
      color: #333333;
      margin: 10px 10px 20px;
      border-left: 1px solid #cbcbb4;
      border-top: 1px solid #cbcbb4;
      font-size: 90%;
    }

    table.stats-table {
        margin: 2rem auto;
        text-align: center;
    }

    th, td {
      border-right: 1px solid #cbcbb4;
      border-bottom: 1px solid #cbcbb4;
      padding: 5px 7px !important;
      vertical-align: baseline;
    }

    th {
      background-color: #e0e0cf;
    }

    tr.alt td {
      background-color: #eaeadf;
    }

    td.best {
        color: green;
    }

    .stats-table td a {
        color: inherit;
    }

    .wintext {
      font-size: 200%;
      margin: 0;
    }

    span.winning-player:not(:last-child):after {
      content: ",";
    }

    .teamA {
      background-color: navy;
      color: white;
    }

    .teamB {
      background-color: maroon;
      color: white;
    }

    .team {
      background-colour: grey;
      color: white;
    }

    .teamAplayer {
      color: navy;
    }

    .teamBplayer {
      color: maroon;
    }

    .teamplayer {
      color: black;
    }

    .shrinkable {
      text-overflow: ellipsis;
    }

    body {
      margin: 0; padding: 0;
    }

    table.ladder {
      margin: 0 auto;
      font-family:"Tahoma";
      font-size:14px;
      border:2px solid brown;
      border-collapse:collapse;
      clear: both;
    }

    .ladder th {
      padding:5px 5px 5px 5px;
      background-color:#F4A460;
      font-weight:bold;
      border:2px solid brown;
    }

    .ladder td {
      padding:5px 50px 5px 50px;
      border:2px solid brown;
      text-align:center;
    }

    .name {
        color: blue;
        cursor: pointer;
    }

    .name:hover {
      text-decoration: underline;
    }
  </style>

  <script>
    function toggle(whichOne) {
      var el = document.getElementById(whichOne);
      if (el.style.display != 'none') {
        el.style.display = 'none';
      } else {
        el.style.display = '';
      }
    }

    function setStyleByClass(c,p,v,t){
      var elements;
      var re = new RegExp('\\b' + c + '\\b');

      if (t == undefined) {
        t = "style";
      }

      elements = document.getElementsByTagName("*");

      for (var i = 0; i < elements.length; i++){
        var node = elements.item(i);
        for(var j = 0; j < node.attributes.length; j++) {
          if(node.attributes.item(j).nodeName == 'class') {
            if(re.test(node.attributes.item(j).nodeValue)) {
              if (t == "style") {
                eval('node.style.' + p + " = '" +v + "'");
              } else {
                eval("node.colSpan = " + v);
              }
            }
          }
        }
      }
    }

    function navigate(number, columns) {
      setStyleByClass("topLink", "color", "blue");
      el = document.getElementById("link" + number);
      el.style.color = "black";

      setStyleByClass("allRows", "display", "none");
      setStyleByClass("group" + number, "display", "");

      setStyleByClass("details", false, columns, "colspan");
    }
  </script>
{% endblock %}

{% block main %}
  <div id="container">
    <h1><a href="/">{{ settings.serverName }}</a></h1>
    <h2>Match Report</h2>

        {% if game.winningTeam == "A" %}
          <div class="wintext" style="color: navy;">{{ game.blueTeamName }}
            won</div>
        {% elif game.winningTeam == "B" %}
          <div class="wintext" style="color: maroon;">{{ game.redTeamName }}
            won</div>
        {% elif winning_players %}
          <div class="wintext" style="color: green;">Winner{{ winning_players|length|pluralize }}:
            {% for p in winning_players %}
              <span class="winning-player">{{ p.nick }}</span>
            {% endfor %}
          </div>
        {% else %}
          <div class="wintext" style="color: green;">Game was drawn</div>
        {% endif %}

        {{ game.started }}<br>
        {% if game.scenario %}Scenario: {{ game.scenario }}<br>{% endif %}
        {% if scenario_completed != None %}Completed: {{scenario_completed}}<br>{% endif %}
        Map size: {{ game.zoneCount }} zone{{ game.zoneCount|pluralize }}<br>
        {% if match_stats %}
          {% for stat_name, stat_value in match_stats %}
            {{ stat_name }}: {{ stat_value }}<br>
          {% endfor %}
        {% else %}}
          Duration: {{ game.gameSeconds|stringformat:".2f" }}
          second{{ game.gameSeconds|pluralize }}<br>
        {% endif %}
        Blue team: {{ game.blueTeamName }}<br>
        Red team: {{ game.redTeamName }}<br>
        Version: {{ game.serverVersion }}<br>
        {% if tournamentPoints %}
          Tournament points: {{ tournamentPoints }}<br>
        {% endif %}
        {% if game.replayName %}
          <a href="{% static 'trosnoth/replays/'|add:game.replayName %}">
            Download replay</a>
        {% endif %}
        <br>

    {% if team_stat_titles %}
      <table class="stats-table">
        <tr>
          <td></td>
          {% for stat_name in team_stat_titles %}
            <td>{{ stat_name }}</td>
          {% endfor %}
        </tr>
        {% for team_name, team_colour, stat_data in team_stats %}
          <tr>
            <td style="color:rgb{{team_colour}}">{{ team_name }}</td>
            {% for val, formatted_val, is_best in stat_data %}
              <td {% if is_best %}class="best"{% endif%}>{{ formatted_val }}</td>
            {% endfor %}
          </tr>
        {% endfor %}
      </table>
    {% endif %}

    {% if player_stat_titles %}
      <table class="stats-table">
        <tr>
          <td></td>
          {% for stat_name in player_stat_titles %}
          <td>{{ stat_name }}</td>
          {% endfor %}
        </tr>
        {% for p in player_stats %}
        <tr>
          <td style="color:rgb{{p.colour}}">
            {% if p.player.user %}
            <a href="{% url 'trosnoth:profile' username=p.player.user.username %}">
              {{ p.nick }}
            </a>
            {% else %}
              {{ p.nick }}
            {% endif %}
          </td>
          {% for val, formatted_val, is_best in p.stats %}
          <td {% if is_best %}class="best"{% endif%}>{{ formatted_val }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
      </table>
    {% endif %}

    {% if scoreboard %}
      <h3>Leader Board</h3>
        <table class="ladder">
          {% for row in scoreboard %}
            <tr class="{{ row.2 }}"><td>{{ row.1 }}</td><td>{{ row.0|floatformat }}</td></tr>
          {% endfor %}
        </table>
    {% endif %}

    {% if playerData %}
    <h3>Player Statistics</h3>
    <span class="nav">
      <span class="name topLink" onClick="navigate('0', 13)" id="link0"
        style="color: black;">General Overview</span> &ndash;
      <span class="name topLink" onClick="navigate('1', 11)" id="link1">Coins
        and Time</span> &ndash;
      <span class="name topLink" onClick="navigate('2', 8)" id="link2">Kills
        and Caps</span>
    </span>
    {% endif %}
  </div>

  {% if playerData %}
  <table class="ladder">
    <tr class="allRows group0">
      <th>#</th>
      <th>Nick</th>
      <th>Kills</th>
      <th>Deaths</th>
      <th>KDR</th>
      <th>Zone Caps</th>
      <th>Shots Fired<sup>*</sup></th>
      <th>Shots Hit<sup>*</sup></th>
      <th>Accuracy</th>
      <th>Coins Used</th>
      <th>Killed the most:</th>
      <th>Died the most to:</th>
      <th>Points</th>
    </tr>
    <tr class="allRows group1" style="display: none;">
      <th>#</th>
      <th>Nick</th>
      <th>Coins Earned</th>
      <th>Coins Used</th>
      <th>Coins Wasted</th>
      <th>Favourite Upgrade</th>
      <th>Time Alive</th>
      <th>Time Dead</th>
      <th>ADR</th>
      <th>Longest Life</th>
      <th>Points</th>
    </tr>
    <tr class="allRows group2" style="display: none;">
      <th>#</th>
      <th>Nick</th>
      <th>Kills</th>
      <th>Kill Streak</th>
      <th>Zone Caps</th>
      <th>Zone Assists</th>
      <th>Cap Streak</th>
      <th>Zone Score</th>
      <th>Points</th>
    </tr>

    {% for row in playerData %}
      <tr class="allRows group0">
        <td class="team{{ row.player.team }}">
          <strong>{{ row.rank }}</strong></td>
        <td>
          {% if row.player.user.nick %}
            <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
            {{ row.nick }}</a>
          {% else %}
            {{ row.nick }}
          {% endif %}
        </td>
        <td>{{ row.player.kills }} kill{{ row.player.kills|pluralize }}
        </td>
        <td>{{ row.player.deaths }} death{{ row.player.deaths|pluralize }}
        </td>
        <td>{{ row.kdr }}</td>
        <td>{{ row.player.zoneTags }}
          cap{{ row.player.zoneTags|pluralize }}</td>
        <td>{{ row.player.shotsFired }}
          shot{{ row.player.shotsFired|pluralize }}</td>
        <td>{{ row.player.shotsHit }}
          shot{{ row.player.shotsHit|pluralize }}</td>
        <td>{{ row.accuracy|stringformat:".1f" }}%</td>
        <td>{{ row.player.coinsUsed }}
          coin{{ row.player.coinsUsed|pluralize }}</td>
        <td>{{ row.maxKill }}</td>
        <td>{{ row.maxDeath }}</td>
        <td><strong>{{ row.score|stringformat:".1f" }}</strong></td>
      </tr>
      <tr class="allRows group1" style="display: none;">
        <td class="team{{ row.player.team }}">
          <strong>{{ row.rank }}</strong></td>
        <td>
          {% if row.player.user.nick %}
            <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
            {{ row.nick }}</a>
          {% else %}
            {{ row.nick }}
          {% endif %}
        </td>
        <td>{{ row.player.coinsEarned }}
          coin{{ row.player.coinsEarned|pluralize }}</td>
        <td>{{ row.player.coinsUsed }}
          coin{{ row.player.coinsUsed|pluralize }}</td>
        <td>{{ row.player.coinsWasted }}
          coin{{ row.player.coinsWasted|pluralize }}</td>
        <td>{{ row.maxUpgrade }}</td>
        <td>{{ row.player.timeAlive|stringformat:".2f" }} seconds</td>
        <td>{{ row.player.timeDead|stringformat:".2f" }} seconds</td>
        <td>{{ row.adr }}</td>
        <td>{{ row.player.aliveStreak|stringformat:".2f" }} seconds</td>
        <td><strong>{{ row.score|stringformat:".1f" }}</strong></td>
      </tr>
      <tr class="allRows group2" style="display: none;">
        <td class="team{{ row.player.team }}">
          <strong>{{ row.rank }}</strong></td>
        <td>
          {% if row.player.user.nick %}
            <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
            {{ row.nick }}</a>
          {% else %}
            {{ row.nick }}
          {% endif %}
        </td>
        <td>{{ row.player.kills }}
          kill{{ row.player.kills|pluralize }}</td>
        <td>{{ row.player.killStreak }}
          kill{{ row.player.killStreak|pluralize }}</td>
        <td>{{ row.player.zoneTags }}
          cap{{ row.player.zoneTags|pluralize }}</td>
        <td>{{ row.player.zoneAssists }}
          assist{{ row.player.zoneAssists|pluralize }}</td>
        <td>{{ row.player.tagStreak }}
          cap{{ row.player.tagStreak|pluralize }}</td>
        <td>{{ row.player.zoneScore }}
          point{{ row.player.zoneScore|pluralize }}</td>
        <td><strong>{{ row.score|stringformat:".1f" }}</strong></td>
      </tr>
      <tr id="details-{{ row.index }}" style="display: none;">
        <td colspan="13" class="details" style="text-align: left;"><ul>
          Insert details here.
        </ul></td>
      </tr>
    {% endfor %}
  </table>
  <div class="centred"><sup>*</sup>Shots fired and shots hit do not include shoxwave.</div>
  <br>
  {% endif %}
  {% if killTable %}
    <h3>Player Kills</h3>
    <table class="ladder">
      <tr>
        <th rowspan="2">Killer</th>
        <th colspan="{{ killTable.0.entries|length }}">Killed</th>
      </tr>
      <tr>
        {% for row in killTable %}
          <th class="shrinkable">
            {% if row.player.user.nick %}
              <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
              {{ row.nick }}</a>
            {% else %}
              {{ row.nick }}
            {% endif %}
          </th>
        {% endfor %}
      </tr>
      {% for row in killTable %}
        <tr>
          <th>
            {% if row.player.user.nick %}
              <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
              {{ row.nick }}</a>
            {% else %}
              {{ row.nick }}
            {% endif %}
          </th>
          {% for value in row.entries %}
            <td>{{ value }}</td>
          {% endfor %}
        </tr>
      {% endfor %}
      {% if otherKills %}
        <tr>
          <th>[Other]</th>
          {% for value in otherKills %}
            <td>{{ value }}</td>
          {% endfor %}
        </tr>
      {% endif %}
    </table>
    <br>
  {% endif %}

  {% if upgradeTable %}
    <h3>Upgrade Use</h3>
    <table class="ladder">
      <tr>
        <th rowspan="2">Player</th>
        <th colspan="{{ upgrades|length }}">Upgrade</th>
      </tr>
      <tr>
        {% for upgradeKind in upgrades %}
          <th class="shrinkable">{{ upgradeKind }}</th>
        {% endfor %}
      </tr>
      {% for row in upgradeTable %}
        <tr>
          <th>
            {% if row.player.user.nick %}
              <a href="{% url 'trosnoth:profile' userId=row.player.user.pk nick=row.player.user.nick %}">
              {{ row.nick }}</a>
            {% else %}
              {{ row.nick }}
            {% endif %}
          </th>
          {% for value in row.entries %}
            <td>{{ value }}</td>
          {% endfor %}
        </tr>
      {% endfor %}
    </table>
    <br>
  {% endif %}
{% endblock %}
