<html>

{% load static %}

<head>
    {% if tv %}

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script>history.scrollRestoration = "manual"</script>
    {% else %}
    <script>history.scrollRestoration = "auto"</script>
    {% endif %}

    <link rel="stylesheet" href="{% static 'scores/style.css' %}">
        <title>Padel</title>
        {% if not tv %}
        <meta http-equiv="refresh" content="15"/>
        {% endif %}
</head>
{% if tv %}
<div class="wrapper" style="zoom:125%">
{% else %}
<div class="wrapper">
{% endif %}

    {% if tv %}
    <script>
        
        var iInterval = 4000;
        var iScrollInterval = 10000;
        var iFadeInterval = 500;
        var iScroll = $(document).height() - $(window).height();
        
        if (iScroll * 10 + 4000 < 15000) {
            iScrollInterval = 10000;
        } else {
            iScrollInterval = iScroll * 10;
        }
        
        var loop = function() {
            var iScroll = $(document).height() - $(window).height();
            if (iScroll * 10 + 4000 < 15000) {
                iScrollInterval = 10000;
            } else {
                iScrollInterval = iScroll * 10;
            }
            $("html, body").animate({
                scrollTop: iScroll
            }, {
                duration : iScrollInterval,
                easing : "linear",
                complete : function() {
                    setTimeout(function(){
                      $(window).scrollTop(0);
                      window.location.reload();
                }, iInterval);
                }
            });
        };
        setTimeout(loop, iInterval);
        </script>
    {% endif %}

  {% if tournament.club.header %}
    {% if tv %}
        <header class="scenter"><a href="/tv/club/{{ tournament.club.name }}/">{{ tournament.club.header }}</a></header>
    {% else %}
        <header class="scenter"><a href="/club/{{ tournament.club.name }}/">{{ tournament.club.header }}</a></header>
    {% endif %}
  {% endif %}

  <main class="page-body">
      {% autoescape off %}
      <div class="scenter">
          {% if tv %}
          <h3><a href="/tv/club/{{ tournament.club.name }}/tournoi/{{ tournament.id }}">{{ tournament.name }}</a></h3>
          {% else %}
          <h3><a href="/club/{{ tournament.club.name }}/tournoi/{{ tournament.id }}">{{ tournament.name }}</a></h3>
          {% endif %}
      </div>

    <div class="scontainer">
        <div class="teams">
          {% if tournament.teams %}
              <h1>Liste des équipes<h1>
                  <table>
                      <tr>
                        <th>Rang</th>
                        <th>Nom</th>
                        <th>Poids</th>
                        <th>Entrée</th>
                        <th>Jour</th>
                      </tr>
              {% for team in tournament.teams %}
                <tr height='100%' style="background-color:{{ team.background_color }};">
                    <td class="score">#{{ team.position }}</td>
                    <td class="name" width='40%'>{{ team.name|linebreaksbr }}</td>
                    <td class="score">{{ team.rank }}</td>
                    
                    <td class="name" width='20%'>{{ team.position_label }}</td>

                    {% if team.date_label %}
                    <td class="name">{{ team.date_label }}</td>
                    {% else %}
                    <td class="name"> - </td>
                    {% endif %}
                </tr>
              {% endfor %}
                  </table>
                  {% endif %}

      </div>

    </div>
    {% endautoescape %}
  </main>

  {% if tournament.club.footer %}
  <footer class="page-footer, center">{{ tournament.club.footer }}</footer>
  {% endif %}

</div>

</html>
