{% extends "futstats/panelbase.html" %}
{% block body-wrapper %} 
{% load shuffle %} 
<style>
#roundrr_container{
position: absolute;
    top: 50%;
    left: 50%;
margin-top: -80px;
    margin-left: -75px;
    width: 440px;
    height: 100px;
}
</style>
   <!-- central image -->
   <div id="info">
   <div class="roundrr_center">
   </div>
   <img class="local" src="" style="
    position: relative;
    top: 60px;
    left: 380px;
"></img>
<div id="pnl" style="
    
    display:none;
    
   border: 0px; top: 380px; position: absolute; left: 603px; width: 150px; background: none;height: 118px;
color:white;
text-align:center;
"></div>
  <div>
   <span id="title" style="
        color: white;
    top: 230px;
	left: 39%;
   position: absolute;
    text-align:center;
    width:300px;
"><span>
</div>


<img class="visitante" src="" style="
    position: relative;
    top: -10px;
    left: 550px;
"></img>
   </div>
     
  <!-- the container of images -->
	<div id='roundrr_container'>
		<ul class='list'>
			{% for team in equipos|shuffle %}
            {% 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 %}  
                <li class='item'>	
				<div class='my_class'>
				<img id="{{local_nombre}}" src="../static{{ escudo_local }}"> 
				</div>	
				</li>
				<li class='item'>	
				<div class='my_class'>
				<img id="{{visitante_nombre}}" src="../static{{ escudo_visitante }}"> 
				</div>	
				</li>

            {% endwith %}
        {% endfor %}	
			 		</ul>
	</div>
<script type="text/javascript">
var partidos = {{equipos|safe}};

$( document ).ready(function() {
$('.roundrr_div_item').on("click", "img", function () {


      $( "#pnl" ).hide(  );

			
			
});
});
 </script>

 {% endblock %}
