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

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<link rel="stylesheet" href="{% static 'css/players.css' %}">
<div class="container-header">
  <div class="container-search">
    <div class="redirect-1">
      <a href="{% url 'search:h2h' %}" class="search-redirect"><img src="{% static 'img/fleche-gauche.png' %}"
          class="fleche-gauche" style="width: 15%"><span class="title-redirect">H2H</span></a>
    </div>
    <div class="container-title-search">
      <span class="title-search">PLAYER</span>
    </div>
    <div class="redirect-2">
      <a href="{% url 'search:tournament' %}" class="search-redirect"><span class="title-redirect">TOURNAMENT
          SEARCH</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-player.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 player</span>
    </label>
  </form>
</div>

<div class="container-first-part">
  <div class="img-player">
    <style>
      .img-player {
        width: 25%;
        background: url("{% static 'img/bgg-search-player.png' %}") no-repeat center;
        -webkit-background-size: cover;
        /*background-size: cover;*/
      }
    </style>
  </div>
  <div class="detail-player">
    <div class="container-player-name">
      <span class="player-name">
        Rafael<br>NADAL
      </span>
    </div>
    <div class="text-player">
      <ul class="caracteristique">
        <li class="detail">Age</li>
        <li class="detail">Size</li>
        <li class="detail">Nationality</li>
        <li class="detail">Weight</li>
        <li class="detail">Coach</li>
      </ul>
      <ul class="caracteristique-detail">
        <li class="age">32</li>
        <li class="size">185cm</li>
        <li class="nationality">Spanish</li>
        <li class="weight">85kg</li>
        <li class="coach">Someone</li>
      </ul>
    </div>
    <div class="rank-player">
      <span class="rank">world rank <span class="rank-nb">3</span></span>
    </div>
  </div>
</div>

<div class="container-second-part">
  <div class="title-second-part">
    <span class="statistics">STATISTICS</span>
  </div>


  <div class="stat-first-part">
    <div class="container-avg">
      <div class="avg-1"><span class="avg-win">Average win</span></div>
      <div class="avg-2"><span class="avg-pourcent">61,2%</span></div>
      <div class="avg-3"><img src="{% static 'img/arrow-down.png' %}" style="width: 6%" class="arrow-avg">
        <span class="avg-evolve">2,21%<br><span class="avg-duration">since last month</span></span></div>
    </div>
    <div class="container-atp">
      <div class="atp-1"><span class="atp-ptn">ATP point</span></div>
      <div class="atp-2"><span class="atp-pourcent">7945</span></div>
      <div class="atp-3"><img src="{% static 'img/arrow-up.png' %}" style="width: 6%" class="arrow-atp">
        <span class="atp-evolve">145<br><span class="atp-duration">since last month</span></span></div>
    </div>
  </div>


  <div class="stat-second-part">
    <div class="title-second-part">
      <span class="title-2nd">Last 5 matchs</span>
    </div>
    <div class="table-second-part">
      <div class="table-header">
        <div class="opponent">Opponents</div>
        <div class="environment">Environment</div>
        <div class="score">Score</div>
      </div>
      <div class="table-table">
        <div class="table-row">
          <div class="table-first-col">
            <div class="tournament-name">Tournament</div>
            <div class="score-win">Win</div>
          </div>
          <div class="table-col">
            <div class="opp-name">Novak DJO</div>
            <div class="envi-name">Clay</div>
            <div class="score-name">
              <div class="table-score">4/6 -</div>
              <div class="table-score">- 4/6 -</div>
              <div class="table-score">- 4/6</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-table">
        <div class="table-row">
          <div class="table-first-col">
            <div class="tournament-name">Tournament</div>
            <div class="score-win">Win</div>
          </div>
          <div class="table-col">
            <div class="opp-name">Novak DJO</div>
            <div class="envi-name">Clay</div>
            <div class="score-name">
              <div class="table-score">4/6 -</div>
              <div class="table-score">- 4/6 -</div>
              <div class="table-score">- 4/6</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-table">
        <div class="table-row">
          <div class="table-first-col">
            <div class="tournament-name">Tournament</div>
            <div class="score-lose">Lose</div>
          </div>
          <div class="table-col">
            <div class="opp-name">Novak DJO</div>
            <div class="envi-name">Clay</div>
            <div class="score-name">
              <div class="table-score">4/6 -</div>
              <div class="table-score">- 4/6 -</div>
              <div class="table-score">- 4/6</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-table">
        <div class="table-row">
          <div class="table-first-col">
            <div class="tournament-name">Tournament</div>
            <div class="score-win">Win</div>
          </div>
          <div class="table-col">
            <div class="opp-name">Novak DJO</div>
            <div class="envi-name">Clay</div>
            <div class="score-name">
              <div class="table-score">4/6 -</div>
              <div class="table-score">- 4/6 -</div>
              <div class="table-score">- 4/6</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-table">
        <div class="table-row">
          <div class="table-first-col">
            <div class="tournament-name">Tournament</div>
            <div class="score-win">Win</div>
          </div>
          <div class="table-col">
            <div class="opp-name">Novak DJO</div>
            <div class="envi-name">Clay</div>
            <div class="score-name">
              <div class="table-score">4/6 -</div>
              <div class="table-score">- 4/6 -</div>
              <div class="table-score">- 4/6</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="stat-third-part">
    <canvas id="line-chart" width="800" height="450"></canvas>
    <script>
      new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
          labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018],
          datasets: [{
            data: [12, 7, 4, 2, 3, 1, 4, 6, 2, 1],
            label: "Rafael NADAL",
            borderColor: "#ff5800"
          }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'World Ranking Historical'
          }
        }
      });
    </script>
  </div>
</div>
{% endblock %}