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

<link rel="stylesheet" href="{% static 'css/tools.css' %}">

<div class="container-tools">
  <div class="container-header-tools">
    <span class="main-title">Tools</span>
    <span class="sub-title-tools">Everthing you need is here.</span>
  </div>
  <div class="content-tools">
    <div class="menu-left active" id="menu-tool">
      <div class="choise"><a>Search</a></div>
      <div class="choise"><a>Prediction</a></div>
      <div class="choise"><a>Home</a></div>
      <div class="choise" id="last-choise"><a>Algorithm</a></div>
    </div>
    <div class="explanation">
      <div class="title-explanation">
        <span>Search</span>
      </div>
      <div class="explanation-text">
        <p>Search is a powerful tool. Able a to give accurate informations of more
          than 2000players over the worlds. Search is a powerful tool. Able a to give accurate informations of more
          than 2000players over the worlds.</p>
      </div>
      <div class="link-tool">
        <a href="{% url 'search:players' %}">Search</a>
      </div>
    </div>
  </div>

  <div class="front-hide">
    <div class="main-title hide"><span>We are currently building this</span><span class="highlight-title">application
        !</span></div>
  </div>

</div>

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


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

<script>
  $(document).ready(function () {
    $('.choise').on('click', function () {
      $('.explanation').show(500);
      if ($('#menu-tool').hasClass('active'))
        $('.menu-left').toggleClass('');
      else
        $('.menu-left').toggleClass('active');
    })
  })
</script>

{% endblock %}