{% extends 'agadmator/base.html' %}

{% block base_container_class %}container-fluid{% endblock %}

{% block extra_head %}

  <style>
    .list-group-item {
      padding: 0.5rem 1rem;
    }
  </style>

{% endblock %}

{% block content %}

  <div class="row">
    <div class="col-lg-9 col-md-8 col-sm-6 col-12">
      <h2>Newest Videos</h2>
      <hr>
      <div class="row">
        {% for video in videos %}
          {% include 'agadmator/_video_card.html' with video_cols='col-sm-12 col-md-12 col-lg-4' %}
        {% endfor %}
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
      <h2>Archive</h2>
      <hr>
      <p><strong>Players</strong><br>
        <span class="badge badge-dark" style="cursor: pointer" onclick="sortList('players', 'name', event)">name</span>
        <span class="badge badge-primary" style="cursor: pointer;" onclick="sortList('players', 'videos', event)"># videos</span>
      </p>
      <p><input class="form-control form-control-sm" placeholder="filter" oninput="filterList('players', event)"></p>
      <div style="max-height: 400px;overflow-y: scroll" class="mb-3">
        <ul class="pl-0 list-group" style="list-style: none;" id="players-list">
          {% for player in players %}
            <li class="list-group-item" data-name-ix="{{ player.name_ix }}" data-videos-ix="{{ player.video_ix }}"><a
                href="{% url 'agadmator:player_detail' player.slug %}">{{ player.name }}</a> [{{ player.count }}]
            </li>
          {% endfor %}
        </ul>
      </div>
      <p><strong>Tournaments</strong><br>
        <span class="badge badge-dark" style="cursor: pointer"
              onclick="sortList('tournaments', 'name', event)">name</span>
        <span class="badge badge-primary" style="cursor: pointer;" onclick="sortList('tournaments', 'videos', event)"># videos</span>
      </p>
      <div style="max-height: 400px;overflow-y: scroll" class="mb-3">
        <ul class="pl-0 list-group" style="list-style: none" id="tournaments-list">
          {% for tournament in tournaments %}
            <li class="list-group-item" data-name-ix="{{ tournament.name_ix }}" data-videos-ix="{{ tournament.videos_ix }}">
              <a href="{% url 'agadmator:tournament_detail' tournament.id %}">{{ tournament.name }}</a>
              [{{ tournament.count }}]
            </li>
          {% endfor %}
        </ul>
      </div>

      <p><strong>Year</strong></p>
      <ul class="pl-0" style="list-style: none">
        {% for year in years %}
          <li><a href="{% url 'agadmator:year_detail' year.year_played %}">{{ year.year_played }}</a> [{{ year.num_videos }}]</li>
        {% endfor %}
      </ul>
      <p><strong>Published</strong></p>
      <ul class="pl-0" style="list-style: none">
        {% for month in published_months %}
          <li><a href="{% url 'agadmator:published_month_detail' month.month %}">{{ month.month }}</a>
            [{{ month.num_videos }}]
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>


  <script>
    function sortList(id, key, event) {
      var badges = event.target.parentElement.querySelectorAll('.badge')
      for (var i = 0; i < badges.length; i++) {
        badges[i].classList.remove('badge-primary')
        badges[i].classList.add('badge-dark')
      }
      event.target.classList.add('badge-primary')
      event.target.classList.remove('badge-dark')
      var container = document.querySelector('#' + id + '-list')
      if (!container) return
      var elements = container.querySelectorAll('li')
      for (var i = 1; i <= elements.length; i++) {
        var el = container.querySelector('[data-' + key + '-ix="' + i + '"]')
        container.appendChild(el)
      }
    }

    function filterList(id, event) {
      var query = event.target.value.toLowerCase()
      var container = document.querySelector('#' + id + '-list')
      if (!container) return
      var elements = container.querySelectorAll('li')
      console.log(elements.length)
      for (var i = 0; i < elements.length; i++) {
        var el = elements[i]
        el.style.display = (!query || el.textContent.toLowerCase().indexOf(query) > -1) ? '' : 'none'
      }
    }
  </script>

{% endblock content %}