{% extends "layout.html" %}

{% block title %}Spectate{% endblock %}
{% block titleEmbed %}Spectate{% endblock %}
{% block author %}Team PeekSeek{% endblock %}
{% block description %}See matches you can spectate.{% endblock %}
{% block color %}#ff0000{% endblock %}

{% block currentPage %}spectate{% 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:#aab;" onclick="navigator.clipboard.writeText('{{config.url()}}/overlay?id={{match.id}}')"><img src="{{config.url()}}/public/img/copy.png" height="20" style="filter: invert(1);">Copy overlay link</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 %}