{% extends "base.html" %}
{% block content %}
{% load static %}

<link rel="stylesheet" href="{% static 'css/tournaments.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="container-header">
  <div class="container-search">
    <div class="redirect-1">
      <a href="{% url 'search:players' %}" class="search-redirect"><img src="{% static 'img/fleche-gauche.png' %}"
          class="fleche-gauche" style="width: 15%"><span class="title-redirect">PLAYERS</span></a>
    </div>
    <div class="container-title-search">
      <span class="title-search">TOURNAMENT<br>SEARCH</span>
    </div>
    <div class="redirect-2">
      <a href="{% url 'search:h2h' %}" class="search-redirect"><span class="title-redirect">H2H</span><img
          src="{% static 'img/fleche.png' %}" class="fleche-droite" style="width: 15%"></a>
    </div>
  </div>
</div>

<style>
  .container-header {
    width: 100%;
    background: url("{% static 'img/bgg-search-tournament.png' %}") no-repeat center;
    -webkit-background-size: cover;
    /*background-size: cover;*/
  }
</style>

<div class="container-form-search">
  <form class="form-search" method="POST">
    <input type="text" class="input-search" autocomplete="off" required>
    <label for="name" class="label-name">
      <span class="content-name">Search a tournament</span>
    </label>
  </form>
</div>

<div class="container-filter">
  <div class="container-column">
    <div class="column-filter">
      <div class="title-column-filter">
        <p class="filter-title">Environment</p>
      </div>
      <div class="container-choise">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" checked> Clay
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> Grass
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> Syntetic
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> X
          </label>
        </div>
      </div>
    </div>
    <div class="column-filter">
      <div class="title-column-filter">
        <p class="filter-title">ATP</p>
      </div>
      <div class="container-choise">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" checked> 100
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> 200
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> 300
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> X
          </label>
        </div>
      </div>
      <div class="atp-selector">
        <span class="custom-dropdown custom-dropdown--large">
          <select class="custom-dropdown__select custom-dropdown__select--white">
            <option>400</option>
            <option>500</option>
            <option>600</option>
            <option>700</option>
            <option>800</option>
          </select>
        </span>
      </div>
    </div>
    <div class="column-filter">
      <div class="title-column-filter">
        <p class="filter-title">Type</p>
      </div>
      <div class="container-choise">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" checked> Single Men
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> Single Women
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off"> X
          </label>
        </div>
      </div>
    </div>
  </div>

  <div class="container-submit-filter">
    <button type="submit" class="btn btn-primary btn-form-filter">Search</button>
  </div>
</div>

<div class="container-auto-tournament">
  <div class="scrollmenu">
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
  </div>
</div>

<div class="container-auto-tournament-low-size">
  <div class="list-tournament">
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
    <a href="#home"><img src="{% static 'img/bgg-search-h2h.png' %}"><span>Windlebon</span></a>
  </div>
</div>

<button id="tourn-1" class="btn btn-primary btn-tournament">
  <span>See more tournaments</span>
  <img src="{% static 'prediction/img/arrow-prediction.png' %}" class="tourn-logo">
</button>

<div class="tournament-title">
  <p>Windlebon</p>
</div>

<div class="container-detail-tournament">
  <div class="container-detail f1">
    <h2>Data Name</h2>
    <p>Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content </p>
  </div>
  <div class="container-detail f2">
    <h2>Data Name</h2>
    <p>Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content </p>
  </div>
  <div class="container-detail f3">
    <h2>Data Name</h2>
    <p>Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content Content
      Content Content Content Content </p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script>
  $(document).ready(function () {
    $('.btn-tournament').on('click', function () {
      $('.container-auto-tournament-low-size').toggle(500);
      $('.vs1').toggleClass('active');
      $('.btn-prediction').toggleClass('active');
    })
  })
</script>
{% endblock %}