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

		.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" style="overflow: hidden; text-overflow: ellipsis;">{% 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: #ffffffff">
				<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar" style="background: none; border: none; color: black; 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" style="padding: 40px 20px"><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 %}