{% 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">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
	<style type="text/css">
		body {
			background-color: #30bbe2;
		}

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

	</style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="ranking-users">
		<div id="Individual" class=" mision table-responsive ranking-table tabcontent">
		     {# <p class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">Pulsa aquí para ver los premios</p> #}
			 <div class="ranking-user">
				<img class="avatar" src="{{ asset('images/avatars/'~app.session.get('useravatar')) }}" />
				<div class="ranking-user-data">
					<p class="nickname upper">{{ app.session.get('playerNickname') }}</p>
					<p class="position">{% if userScore > 0 %}Posición {{ userPosition }}{% else %}Sin posición{% endif %}</p>
					<p class="score">
					<img class="coin-icon" src="{{ asset('img/star.png') }}" />
					<span>{{ userScore }}</span>
					</p>
				</div>
				</div>
			<div class="ranking-table">			
				{# Mostrar lista de todos los usuarios en la campaña #}
				{% set i = 1 %}
				{% for att in rankingGeneral %}
					{% if att.score > 0  %}
						<div class="ranking-row" {% if i == userPosition and i > 3 %} style="background-color: #45377e; color:white"{% endif %}>
							<div>{% if i < 31 %}<img width="40px" src="{{ asset('img/ranking'~i~'.png') }}" />{% else %}{{i}}º{% endif %}</div>
							<div><img width="40px" src="{{ asset('images/avatars/'~att.avatar) }}" /></div>
							<div class="tleft upper">{% set partes = att.player_nickname|split(' ') %}{{ partes|length >= 2 ? partes[0] ~ ' ' ~ partes[1] : att.player_nickname }}</div>
							<div class="pointscolor score-number"><img class="coin-icon" src="{{ asset('img/star.png') }}" /><span>{{att.score}}</span></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>
						{% if i == 30 %}<img src="{{ asset('img/top-separator.png') }}" />{% endif %}						
						{% set i = i + 1 %}
					{% endif %}
				{% endfor %}
			</div>
		</div>
	</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" style="background-color: #173F35">
						<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar"
							style="background: none; border: none; color: white; font-size: 20px;padding:5px; opacity: 1">
						<i class="fas fa-times"></i>
						</button>

						{# <img class="closeModal" src="{{asset('img/cerrar_1.png')}}">   #}
						{# <h2 style="text-align:center;color:#003e62">PREMIOS TOP CINCO</h2> #}
						<div class="text-center"><img style="width:100%;max-width:400px;" src="{{ asset('img/awards1.png') }}"></div>
						{# <div class="text-center tuto-container">
								<div class="mision">
									<div  data-toggle="modal" data-target="#awardsModal" class="btn btn-play" style="font-size: 20px; margin-bottom: 20px">CERRAR</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 %}