{% 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;
		}

		.ranking-tabs > button {
			font-size: 20px
		}

	</style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="ranking-users">
		<div class="col-xs-12  no-padd ranking-tabs">
			<button class="tablinks active" onclick="changeRanking(event, 'Individual')">Individual</button>
			<button class="tablinks copp" onclick="changeRanking(event, 'Cooperativo')">Por unidad organizativa</button>
  		</div>
		<div id="Individual" class=" mision table-responsive ranking-table tabcontent">
		     {# <h2 class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">CLICK HERE TO SEE THE PRIZES</h2> #}
			<div class="ranking-table">
				{# Mostrar lista de todos los usuarios en la campaña #}
				{% set i = 1 %}
				{# {% for att in rankingIndividual if i <= 20 %} #}
				{% for att in rankingGeneral %}
					{% 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 %} #}
						<div class="ranking-row" {% if i == userPosition %} style="border: 5px solid #5b6770"{% endif %}>
							<div class="ranking-number-format">{{i}}º</div>
							<div class="tleft upper">{{att.player_nickname}}</div>
							<div class="pointscolor score-number">{{att.score}}</div>
							{% if app.user.role == "ROLE_TUTOR" %}
								<div><a class="record-trivial-tracking" href="{{ path('tracking_user', {idUser: att.id, idTrivial: trinder.id}) }}">ver</a></div>
							{% endif %}  							                         
						</div>							
						{% set i = i + 1 %}
					{% endif %}
				{% endfor %}
			</div>
		</div>
		<div id="Cooperativo" class=" mision table-responsive ranking-table tabcontent" style="display:none">
		     {# <h2 class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">CLICK HERE TO SEE THE PRIZES</h2> #}
			<div class="ranking-table">
				{# Mostrar lista de todos los usuarios en la campaña #}
				{% set i = 1 %}
				{# {% for att in rankingIndividual if i <= 20 %} #}
				{% for att in rankingGrupal %}
					{% 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 %} #}
						<div class="ranking-row" {% if i == userPosition %} style="border: 5px solid #5b6770"{% endif %}>
							<div class="ranking-number-format">{{i}}º</div>
							<div class="tleft upper">{{att.org_unit}}</div>
							<div class="pointscolor score-number">{{att.score|round}}</div>
							{% if app.user.role == "ROLE_TUTOR" %}
								<div><a class="record-trivial-tracking" href="{{ path('tracking_user', {idUser: att.id, idTrivial: trinder.id}) }}">ver</a></div>
							{% endif %}  							                         
						</div>							
						{% set i = i + 1 %}
					{% endif %}
				{% endfor %}
			</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 %}