{% extends "layout.html" %}

{% block title %}Admin{% endblock %}

{% block currentPage %}admin{% endblock %}

{% block script %}{{config.url("/src/admin.js", "cdn")}}{% endblock %}

{% block content %}

<div class="mainElement">
  <h2>Matches</h2>
  {% if not matches %}
  <span>No matches.</span>
  {% else %}
    <div class = "matchGrid">
    {% for match in matches %}

        <div class="matchGridElement {% if match.claimed != None %}clickable" href="steam://connect/{{match.claimed}}"{% else %}"{% endif %}><div class="matchGridInner">

            <span>Match.<b style="color:#20a0f0;">{{match.id}}</b></span>
            
            <hr>
            {% for team in match.teams %}
              <span class="userList">
                {{team["name"]}}
                {% for user in toList(team["users"]) %}
                  <a href="{{config.url()}}/u/{{user.steam64}}" class="userProfile">
                    <img src="{{user.avatar}}" style="width:20px;height:20px;border-radius:5px;">
                    <span style="font-weight:200;font-size:14px;">{{user.name}}</span>
                  </a>
                {% endfor %}
              </span>
            {% endfor %}

          </div><div class="matchGridInner">

            <button class="settingsButton" style="background-color:#faa;" onclick="forceStopMatch({{match.id}})"><img src="{{config.url()}}/public/img/stop.png/" height="20" style="filter: invert(1);">Force stop</button>

            {% if match.claimed != None %}
            <button class="settingsButton" style="background-color:#aab;" onclick="window.location.href = 'steam://run/304930//+connect {{match.claimed}}'"><img src="{{config.url()}}/public/img/spectate.png/" height="20" style="filter: invert(1);">Click to spectate</button>
            {% endif %}

            <span style="color:#333;font-size:12px;">{% if match.claimed == None %}
            Not started • 
            {% endif %} {{fromTimestamp(match.time).strftime("%d/%m/%Y @ %H:%M:%S")}}</span> 
          
        </div></div>
        {% endfor %}

      </div>
  {% endif %}
</div>

{% endblock %}