{% extends "futstats/panelbase.html" %}
{% block body-wrapper %}    
{% load get_ele %}
<style type="text/css" media="screen">
.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  margin-left: 20px;
  margin-right: 20px;
}
.rec {
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 221px 122px;
border-color: transparent transparent #076591 transparent;
bottom: 6px;
}
.square{height: 220px;background-color: brown;
}
.fullWidth {
   width: 97%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}
.large-1 {
width: 10.0%;
padding: 0.5%;
}

.visi{
position: absolute;
right: 15px;
bottom: 0;
}
.percent{
text-align:center
}
.local_winner{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 221px 122px;
border-color: transparent transparent #076591 transparent;
bottom: 6px;
-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}
.visi_winner{
width: 0px;
height: 0px;
border-style: solid;
border-width: 220px 120px 0 0;
border-color: #076591 transparent transparent transparent;
-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}
.large-2 {
padding-top: 15px;
width: 20%;
}
#toggle {
    display: none;
  }
#left{
position:absolute;
top:280px;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 40px 30px 0;
border-color: transparent #d6d6d6 transparent transparent;
}
#right{
position:absolute;
top:280px;
right:10px;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #d6d6d6;
}
</style>
<div class="row" style="padding-top:28px;text-align: center;color: white;">
JORNADA {{jornada}}
</div>
<script>
 var partido = {{equipos|safe}};
 var i = Math.floor(Math.random()*partido.length);
$(document).ready(function() {
    var statics = {{ STATIC_URL }};
    var text= partido[i][2]+" - "+partido[i][5];
    $( "#local" ).attr("src",statics+partido[i][1]);
    $( "#visitante" ).attr("src",statics+partido[i][4]);

  $( "#toggle" ).show( "slide", { direction: "right"  }, 1200 ).promise().done(function() {
            $( "#match" ).text(text);
            });
$("#left").click(function(){
        $( "#match" ).text("");
         $("#toggle").hide( "slide",{ direction: "left"  }, { duration: 2500, queue: false } );
        i = Math.floor(Math.random()*partido.length);
        var text= partido[i][2]+" - "+partido[i][5];

        $( "#local" ).attr("src",statics+partido[i][1]);
        $( "#visitante" ).attr("src",statics+partido[i][4]);

  $( "#toggle" ).show( "slide", { direction: "right"  }, 1200 ).promise().done(function() {

        $( "#match" ).text(text);
      });
      });

      $("#right").click(function(){
        $( "#match" ).text("");
         $("#toggle").hide( "slide", {direction: "right" }, 1500 );

        i = Math.floor(Math.random()*partido.length);
        var text= partido[i][2]+" - "+partido[i][5];

        $( "#local" ).attr("src",statics+partido[i][1]);
        $( "#visitante" ).attr("src",statics+partido[i][4]);

        $( "#toggle" ).show( "slide", { direction: "left"  }, 1500  ).promise().done(function() {

    $( "#match" ).text(text);

      });
      });

});
</script>
        <div class="row">
        <div id="left"></div>
        <div id="toggle" style="text-align:center;">
        <span id="match" style="position:fixed;top:205px;left:46%;color:white"></span>
        <img src="{{ STATIC_URL }}img/caja.png" style="height: 324px;">
        <img id="local" style="position:relative;float:left;top:110px;left:33%;height:100px;"> 
        <img id="visitante" style="position:relative;float:right;top:110px;right:36%;height:100px;"> 
        </div>

        <div id="right"></div>
        {% for team in line %}
            {% with local=team.0 escudo_local=team.1 local_nombre=team.2 visitante=team.3 escudo_visitante=team.4 visitante_nombre=team.5 num=forloop.counter0 %}  
                <div class="large-2 columns">
                {% with val=probabilidades|get_at_index:num %}
                {% comment "Optional note" %}
                <div id="{{num}}" class="square">
                    <div class="text-center">{{local_nombre}} VS {{visitante_nombre}}</div>
                        <a href="{% url 'futstats.views.team' local %}">
                            <img src="{{ escudo_local }}" height="">
                        </a>
                        <div class="percent">{{val.1}}</div>
                        <div class=""></div>
                        <a class="visi" href="{% url 'futstats.views.team' visitante %}">
                            <img src="{{ escudo_visitante }}" height="">
                        </a>
                    </div>
            
            </div>
            {% endcomment %}
            {% endwith %}

            {% endwith %}
        {% endfor %}
</div>
    </div>
<script type="text/javascript"> 
   var a = "{{probabilidades|safe}}";
</script>
{% endblock %}
