{% 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>
      body{
       
            background: url('../../img/bg_records.png');
              background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-bottom: 0px !important;
      }
    </style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="container">
 		<div class=" row container-info ">
 			
 			<div class="col-xs-12 title-ranking">{% trans %}RANKING{% endtrans %}<a href="{{ path('competition_users_list') }}"><img class="closePagesModal" style="top:5px;"  src="{{asset('img/cerrar.png')}}"></a></div>
 			<div class="col-xs-12"><img style="max-width:100%;" src="{{asset('img/rnk.png')}}"></div>
	  	</div>
	  	{% set pos2 = 1 %}
{% set userPos2 = 0 %}
{% set sc = 0 %}
{% for att in rankingIndividual %}{% if app.user.id == att.id %}{% set userPos2 = pos2 %}{% endif %}{% set pos2 = pos2 + 1 %}{% endfor %}
{% for att in rankingIndividual %}{% if app.user.id == att.id %}{% set sc = att.score %}{% endif %}{% endfor %}
 <div class="row container-info" style="margin-top:20px;">
 	<div class="col-xs-2"></div>
 	<div class="col-xs-4"><img class="profile-icon" src="{{ asset('images/users/'~app.user.image) }}"/></div>
 	<div class="col-xs-4" style="margin-top:20px; padding:0px !important;"><p class="rank_user_position">{{userPos2}}º {{ app.user.username }}</p><p class="rank_user_points">{{sc}}</p></div>
 	<div class="col-xs-2"></div>
 </div>
					
 <div class="row record_container ">
		        <div class="top-txt">Posiciones</div>
		        <div class="table-container">
		        <table class="table record-table">
		            <thead>
		                 <tr>
		                   {#  <th>POSICIÓN</th>
		                    <th>USUARIO</th>
		                    <th>PUNTUACIÓN</th>
		                    <th>SEGUIMIENTO</th> #}
		                </tr> 
		            </thead>
		            <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 app.user.id == att.id %}<tr class="selfposition">{% else %}<tr>{% endif %}                         
		                  <td class="ranking-number-format">{{i}}º</td>
		                  <td><img class="table-profile-icon" src="{{ asset('images/users/'~att.image) }}"/></td>
		                  <td class="tleft upper">{{att.name}} {{att.first_surname}}</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}) }}">{% trans %}see{% endtrans %}</a></td>
		              	{% endif %}  
		              	{% endif %}            
		                </tr>
		                {% set i = i + 1 %}                         
		              {% endfor %}
		          </tbody>
		      </table>
		  </div>
		  </div>

				{# <a href="{{asset('documents/InfoPremiosIndividuales.pdf')}}" target="_blank"><div  style="margin-top:25px;" class="btn btn-record">PREMIOS</div></a>
 #}
	

    </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">

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