{% 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">
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="container">
                {# PROFILE #} 
       {% if trinder.cooperativeScore > 0 and trinder.type == "INDIVIDUAL_COOPERATIVE" %}
        <div class="col-xs-12">
        
        		<button class="tablinks active col-xs-6 no-padd" onclick="changeRanking(event, 'Individual')">Individual</button>
  				<button class="tablinks col-xs-6 no-padd copp" onclick="changeRanking(event, 'Cooperativo')">Colectivo</button>
  		</div>
        {% endif %}
    
		    <div id="Individual" class=" mision table-responsive col-xs-12 ranking-table tabcontent" style="padding-top:20px">

					<div class="col-xs-12 mision">
						<h3 class="black bold upper" >Tus puntos personales</h3>
					</div>
					<div class="profile">
						<div style="padding:0px !important;" class="col-xs-6 ">
							 	<div class="profile-container">
							 	<img class="profile-icon" src="{{ asset('images/users/'~app.user.image) }}"/>
								 	{% set pos = 1 %}
								 	{% set userPos = 0 %}
									{% for att in rankingIndividual %}{% if app.user.id == att.id %}{% set userPos = pos %}{% if pos <= 5  %}<img class="star-profile" src="{{ asset('img/redstar3.png') }}"/>{% else %}<img class="star-profile star-profile1" src="{{ asset('img/redstar.png') }}"/>{% endif %}{% endif %}{% set pos = pos + 1 %}{% endfor %}
								</div>
							 </div>
						<div style="padding-top: 0px !important;padding-left: 0px;padding-right: 0px;text-align:left" class="col-xs-6 red">
						<h2 class="blue bold upper" style="display:inline-block;vertical-align: middle;line-height: normal;word-break: break-all;">
	{% set pos2 = 1 %}
	{% set userPos2 = 0 %}
	{% for att in rankingIndividual %}{% if app.user.id == att.id %}{% set userPos2 = pos2 %}{{ pos2 }}º{% endif %}{% set pos2 = pos2 + 1 %}{% endfor %}

										  	{{ app.user.username }}

										  </h2>
										  {% if app.user.role == "ROLE_USER" %} 
										  <h2 class="score-number" style="position: absolute;
    top: 58px;">{% for att in rankingIndividual %}{% if app.user.id == att.id %} {{att.score}}{% endif %}{% endfor %}<img class="profile-star " src="{{ asset('img/redstar.png') }}"/></h2>
										{% endif %}
								</div>
					</div>




			  <div class="col-xs-12 no-padd-xs" >
		         <a href="{{asset('documents/InfoPremiosIndividuales.pdf')}}" target="_blank"><div class="btn btn-record btn-show-awards">PULSA AQUÍ para ver los premios</div></a>
		     </div>	


		        <h2 class="black bold" >TOP PEPE JEANS</h2>
		        <table class="table gametool-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 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>
		                  <td>{% if i <= 5  %}<img class="table-profile-star table-profile-star-3" src="{{ asset('img/redstar3.png') }}"/>{% else %}<img class="table-profile-star table-profile-star-1" src="{{ asset('img/redstar.png') }}"/>{% endif %}</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 %}  
		              	{% endif %}            
		                </tr>
		                {% set i = i + 1 %}                         
		              {% endfor %}
		          </tbody>
		      </table>

		    </div>

		    {% if trinder.cooperativeScore > 0 and trinder.type == "INDIVIDUAL_COOPERATIVE" %}
		    <div id="Cooperativo" class=" mision table-responsive col-xs-12 ranking-table tabcontent" style="display:none;padding-top:20px">



		    	<div class="col-xs-12 mision">
						<h3 class="black bold upper">Tus puntos donados</h3>
					</div>
					<div class="profile">
						<div style="padding:0px !important;" class="col-xs-6 ">
							 	<div class="profile-container">
							 	<img class="profile-icon" src="{{ asset('images/users/'~app.user.image) }}"/>
								 	{% set pos = 1 %}
								 	{% set userDonatedPoints = 0 %}
								 	{% set userDonatedPos = 0 %}
									{% for att in rankingCooperativo %}{% if app.user.id == att['attempt'].user.id %}{% set userDonatedPoints = att.score %}{% set userDonatedPos = pos %}{% if pos <= 5  %}<img class="star-profile" src="{{ asset('img/bluestar3.png') }}"/>{% else %}<img class="star-profile star-profile1" src="{{ asset('img/bluestar.png') }}"/>{% endif %}{% endif %}{% set pos = pos + 1 %}{% endfor %}
								</div>
							 </div>
						<div style="padding-top: 0px !important;padding-left: 0px;padding-right: 0px;text-align:left" class="col-xs-6 red">
										 <h2  style="display:inline-block;vertical-align: middle;line-height: normal;word-break: break-all;" class="blue bold upper">{{ app.user.username }}</h2>
										  <h2 class="blue score-number"  style="position: absolute;
    top: 58px;">
										  	{{userDonatedPoints}}
										  <img class="profile-star " src="{{ asset('img/bluestar.png') }}"/></h2>
								</div>
					</div>



			  <div class="col-xs-12 no-padd-xs" >

<a href="{{asset('documents/InfoPremioColectivo.pdf')}}" target="_blank"><div class="btn btn-record btn-show-awards" style="background-color: #99CCCC;">PULSA AQUÍ para más información</div></a>
</div>

		    <div class="col-xs-12 record-coop" style="padding-bottom:100px;">
               {% set total = 0 %}
                {% for record in rankingCooperativo %}                          
                    {% set total = total + record.score %}        
                {% endfor %}
                {% set porcentaje = (total*100)/trinder.cooperativeScore %}
                 
		<h2 class="black bold upper da-title" >DONACIÓN ADECCO</h2>
                <div class="record-progressbar-total tleft" >
                  <div {% if porcentaje <= 20  %}style="width:20%;max-width:100%" {% else %}style="width:{{porcentaje}}%;max-width:100%" {% endif %}  class="record-progressbar-unlocked"><div class="mision" style="width:auto;"><h3 style="position: relative;top:8px;z-index:11"class="white score-number">{{total}}</h3></div></div>
                {#   <img class="record-star r1" src="{{ asset('img/r1.png') }}">
                  <img class="record-star r2" src="{{ asset('img/r2.png') }}">
                  <img class="record-star r3" src="{{ asset('img/r3.png') }}"> #}
                  
                </div>
                
            </div>

				{# <a href="{{asset('documents/InfoPremioColectivo.pdf')}}" target="_blank"><div class="btn btn-record">DONACIÓN</div></a> #}

		</div>
	{% endif %}
    </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";
	}

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