{% extends 'layout.html.twig' %}
{% block stylesheets %}
	{{ parent() }}
	<link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
	<link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			background-image: none;
		}
	</style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="container">
		    <div id="Individual" class=" mision table-responsive col-xs-12 ranking-table tabcontent" style="padding-top:20px">

		        {# <h2 class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">CLICK HERE TO SEE THE PRIZES</h2> #}
		        <table class="table gametool-table ranking-table">
		            <tbody>
		          {# Mostrar lista de todos los usuarios en la campaña #}
		          {% set i = 1 %}
		            {# {% for att in rankingIndividual if i <= 20 %} #}
		            	{% for att in rankingIndividual %}
		            	{% if att.score > 0 %}
						{# {% if loop.index == 4 %}</tbody></table>
							<div class="col-xs-12" style="margin-bottom: 20px;"><img src="{{asset('img/ranking-top3.png')}}"/></div>
							<table class="table gametool-table ranking-table">
		            		<tbody>
						{% endif %} #}
						<tr>
		                  <td class="ranking-number-format">{{i}}º</td>
		                  <td class="tleft upper">{{att.player_nickname}}</td>
		                  <td class="pointscolor score-number">{{att.score}}</td>
		                {% if app.user.role == "ROLE_TUTOR" %}
		                	<td><a class="record-trivial-tracking" href="{{ path('tracking_user', {idUser: att.id, idTrivial: trinder.id}) }}">ver</a></td>
		              	{% endif %}  
		                {% set i = i + 1 %}                         
		                </tr>
		            	{% endif %}
		              {% endfor %}
		          </tbody>
		      </table>
		    </div>
    </div>
    <div class="modal fade awardsModal" id="awardsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="vertical-alignment-helper">

    	<div class="modal-dialog vertical-align-center">
					<div class="modal-content">
					   {# <img class="closeModal" src="{{asset('img/cerrar_1.png')}}">   #}
			 		<h2 class="black" style="text-align:center">{# <img class="tutoInHeader" src="{{ asset('img/tutomodalblack.png') }}"> #}PREMIOS</h2>
			 		<div class="col-xs-12 text-center"><img style="width:100%;height:auto;max-width:400px;margin-top:20px;margin-bottom:50px" src="{{ asset('img/awards.png') }}"></div>
			 		<div class="text-center tuto-container">
					 		<p class="red bold">¡Las 3 primeras posiciones del ranking tienen premio!</p><br>
							<p>Cuanto más juegues, más puntos ganas...<br>¡Sube al podio del O365!</p><br>
							<div class="mision">
								{# <img class="tutoImg" src="{{ asset('img/modals/Asset-11.png') }}"> #}
								<div  data-toggle="modal" data-target="#awardsModal" class="btn tuto-btn prof-btn btn-lg">VOLVER</div>
							</div>

					</div>
            </div>
     
    </div>
</div>
</div>

    {{ include('Trivial/records/Tutorial/tutoRanking.html.twig') }}
{% endblock %}
{% block javascripts %}
  {{parent()}}
  <script src="{{ asset('js/progressbar.js') }}" ></script>
  <script src="{{ asset('js/record-players.js') }}" ></script>
  <script type="text/javascript">
  	function changeRanking(evt, type) {
	  var i, tabcontent, tablinks;
	  tabcontent = document.getElementsByClassName("tabcontent");
	  for (i = 0; i < tabcontent.length; i++) {
	    tabcontent[i].style.display = "none";
	  }
	  tablinks = document.getElementsByClassName("tablinks");
	  for (i = 0; i < tablinks.length; i++) {
	    tablinks[i].className = tablinks[i].className.replace(" active", "");
	  }
	  document.getElementById(type).style.display = "block";
	  evt.currentTarget.className += " active";
	}

	function showAwardsModal(){
		$("#awardsModal").modal('show');
	}

	// {% if visited == 0 %}
	//   $(document).ready(function(){
	//     $('#tutoRanking').modal('show');
	//   });
	// {% endif %}
  </script>		  
{% endblock %}