{% extends "layout.html" %}

{% block title %}Esports{% endblock %}
{% block titleEmbed %}PeekSeek Esports{% endblock %}
{% block author %}Team PeekSeek{% endblock %}
{% block description %}See who's on top of the leaderboard and sign up for events.{% endblock %}
{% block color %}#3333ff{% endblock %}

{% block currentPage %}esports{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{config.url('/src/esports2.css', 'cdn')}}" />
{% endblock %}

{% block content %}

<div class="mainElement fullstats">
    <section class="aboutyou">
        {% if user %}
        <a href="{{config.url('/u/'+str(user.steam64), None)}}">
            <img src="{{user.avatar}}">
            <h1>{{user.name}}</h1>
            <span>{{elo}}ELO</span>
            <i>*You</i>
        </a>
        {% else %}
        <a>
            <img src="{{config.url('/logo.png', 'cdn')}}">
        </a>
        {% endif %}
    </section>
    <div class="top3">
        <div><a class="t2" href="{{config.url('/u/'+str(top10[1].u.steam64), None)}}">
            <img src="{{top10[1].u.avatar}}"><h1>{{top10[1].u.name}}</h1><span>{{top10[1].elo}}ELO</span></a></div>
        <div><a class="t1" href="{{config.url('/u/'+str(top10[0].u.steam64), None)}}">
            <img src="{{top10[0].u.avatar}}"><h1>{{top10[0].u.name}}</h1><span>{{top10[0].elo}}ELO</span></a></div>
        <div><a class="t3" href="{{config.url('/u/'+str(top10[2].u.steam64), None)}}">
            <img src="{{top10[2].u.avatar}}"><h1>{{top10[2].u.name}}</h1><span>{{top10[2].elo}}ELO</span></a></div>
    </div>
    <div class="top10container">
        <div class="top10">
            {% for n in range(3,10) %}
            <div><span>#{{n+1}}</span><a class="top10u" href="{{config.url('/u/'+str(top10[n].u.steam64), None)}}"><img src="{{top10[n].u.avatar}}"><h1>{{top10[n].u.name}}</h1>{{top10[n].elo}}ELO</a></div>
            {% endfor %}
        </div>
    </div>
</div>

<div class="mainElement events">
    <h1>Events</h1>
    {% for event in events %}
    <a href="{{config.protocol}}://esports.{{config.domain}}/{{event.name or ''}}" class="event">
        <h3 class="eventTitle">{{ event.data.get("title", "No name") }}</h3>
        <span>{{event.continent}}</span>
        <span class="date" data-epoch="{{ event.data['meta']['queueTimes'][0][0] }}"></span>
	</a>
    {% endfor %}
</div>

<script>
document.querySelectorAll('.date').forEach(el => {
  const epoch = parseInt(el.dataset.epoch, 10);
  const date = new Date(epoch * 1000);

  const formatted = date.toLocaleString(undefined, {
    day: 'numeric',
    month: 'short',
    hour: 'numeric'
  });

  el.textContent = formatted.replace(',', '').replace(' PM', 'PM').replace(' AM', 'AM');
});
</script>

{% endblock %}