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

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<link rel="stylesheet" href="{% static 'css/prediction_beta.css' %}">
<script src="{% static 'js/prediction.js' %}"></script>

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

<script>
  $(document).ready(
    function () {
    {% for match in matches %}
      $("#pred-card-{{ forloop.counter }}").on("click", function (){
        $(this).find(".info-match").toggleClass("col-12 offset-2 col-10 less");
        $(this).find(".info-pred").toggleClass("hidden active")
      })
    {% endfor %}
  })
</script>

<!-- <div class="content-prediction">
  <div class="container-fluid">
    <div class="row">
      <div class="offset-lg-1 col-lg-10 text-center">
        <div class="container-title-tournament">
          <div class="title-tournament"><span>Wimbledon</span></div>
        </div>
      </div>
    </div>
  </div>
</div> -->

<div class="content-prediction">
  <div class="container-fluid">
    <div class="row">
      <div class="offset-1 col-10 text-center">
        <div class="container-title-tournament">
          <div class="title-tournament"><span>Wimbledon</span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 date"><span>Today's matches</span></div>
      </div>
    </div>

    <div class="container-fluid predictions-field"> <!-- RENAME class -->
      {% for match in matches %}
      <div class="row">
        <div id="pred-card-{{ forloop.counter }}" class="col-12 prediction-card">
          <div class="container-fluid">
            <div class="row">
              <div class="info-pred col-12 col-md-2 hidden">
                <div class="row">

                <div class="col-6 col-md-12">
                  <div class="col-12">Bubo</div>
                  <div class="col-12">
                    <div class="d-block mx-auto single-chart">
                      <svg class="circular-chart green" viewbox="0 0 24 24">
                        <circle class="circle-bg" cx="12" cy="12" r="10"/>
                        <circle class="circle" cx="12" cy="12" r="10" stroke-dasharray="{% widthratio 0.628319 1 match.confidence %},62.8319"/>
                        <text x="12" y="14" class="percentage">{{ match.confidence }}%</text>
                      </svg>
                    </div>
                  </div>
                </div>

                <div class="col-6 col-md-12">
                  <div class="col-12">{{ match.level }}</div>
                  <div class="col-12">{{ match.in_out }}</div>
                  <div class="col-12">{{ match.surface }}</div>
                </div>

                </div>
              </div>
              
              <div class="col-12 info-match">
                <div class="row">
                  <span class="col-4 text-left card-player">{{ match.player1 }}</span>
                  <img class="d-block mx-auto img-responsive" src="{% static 'img/versus-logo.png' %}" width="5%", height="5%">
                  <span class="col-4 text-right card-player">{{ match.player2 }}</span>
                </div>
                <div class="row">
                  <div class="col-12 card-versus"></div>
                </div>
                <div class="row">
                  <div class="col-12 card-date">
                    <div class="row">
                      <div class="col-12"><span>{{ match.date }}</span></div>
                    </div>
                    <div class="row">
                      <div class="col-12 text-center"><span>Blop!</span></div>
                    </div>

                    <div class="row no-gutters">
                      <div class="col-12 progress">
                        <div class="progress-bar text-dark {%if match.prediction1 >= match.prediction2 %} bg-success {% else %} bg-danger {% endif %}" 
                        role="progressbar" style="width: {{ match.prediction1 }}%" aria-valuenow="{{ match.prediction1 }}" aria-valuemin="0" aria-valuemax="100">
                          {{ match.prediction1 }}%
                        </div>
                        <div class="progress-bar text-dark {%if match.prediction1 >= match.prediction2 %} bg-danger {% else %} bg-success {% endif %}"
                        role="progressbar" style="width: {{ match.prediction2 }}%" aria-valuenow="{{ match.prediction2 }}" aria-valuemin="0" aria-valuemax="100">
                          {{ match.prediction2 }}%
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
      {% if not forloop.last %}
      <div class="row">
        <div class="col-12 card-divisor"><hr align="center"></div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>


<style>
  .content-prediction {
    background: url("{% static 'img/bg-content.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }
</style>

{% endblock %}