{% 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-store {
		    background-color: #d82232;
		    padding: 20px;
		    max-width: 800px;
		    color: #fff;
		    margin: 10px auto 0;
		    font-size: 26px;
		}	

		.store-name {
			display: inline-block;
		    vertical-align: middle;
		    line-height: normal;
		    word-break: break-all;
		    font-size: 24px;
		    margin-top: 28px !important;
		}

	@media (max-width: 500px) {
		.store-name, .score-number.red {
		    font-size: 1.5rem !important;
		}


		.ranking-number-format img {
			width: 50px;
		}	

		.table.ranking-table td {
		    font-size: 12px !important;
		}
	}
	.profile-tab {
      margin-top: 10px;
      text-align: center;
      margin-bottom: 50px;
    }

    .profile-tab a {
      float: left;
      width: 50%;
    }

    .profile-tab .tablink {    
      float: left;
      color: black;
      padding: 5px 10px;
      font-size: 16px;
      border-bottom:  4px solid gray;
      /*min-width: 150px*/
      width: 100%;
    }

    .profile-tab .tablink.tablink-profile-active {
      border-color: #d82232;
      animation-name: activeTablink;
      animation-duration: 0.5s;
    }

    @keyframes activeTablink {
    from {border-color: gray;}
    to {border-color: #d82232;}
  }

  @media (max-width: 450px){
    .profile-tab .tablink {    
      font-size: 12px;

    }
  }

   @media (max-width: 767px ){
    .td-padding-competition {
      padding: 20px 8px !important;
    }
  }
	</style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="container">
                {# PROFILE #} 
    
		    <div id="flexipoints" class=" mision table-responsive col-xs-12 ranking-table profile-box" style="padding-top:20px">

 

					<div class="col-xs-12 mision no-padd">
						<p class="ranking-store">TU GRUPO</p>
					</div>
					<div class="profile" style="max-width: 800px;">
						<div style="padding:0px !important;" class="col-xs-6 ">
							 	<div class="profile-container">
							 	<img class="profile-icon" src="{{ asset('images/users/'~app.user.image) }}"/>
								 {# <img class="star-profile" src="{{ asset('img/redstar3.png') }}"/>								 #}
								</div>
							 </div>
						<div style="padding-top: 0px !important;padding-left: 0px;padding-right: 0px;text-align:left" class="col-xs-6 blue">
						<h2 class="black bold upper store-name">
	{% set pos2 = 1 %}
	{% set userPos2 = 0 %}
	{% for att in rankingIndividual %}{% if app.user.gtGroup.id == att.id %}{% set userPos2 = pos2 %}{{ pos2 }}º{% endif %}{% set pos2 = pos2 + 1 %}{% endfor %}

										  	{{ app.user.gtGroup.name }}

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



		        <h2 class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">PULSA AQUÍ PARA VER LOS PREMIOS</h2>

		         <table class="table gametool-table ranking-table">
		          <tr>
		            <td colspan="2"></td>
		            <td><b>Flexipoints</b></td>
		          </tr>
		                <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.name != "Flexi Managers" %}
		            {% if loop.index == 6 %}</tbody></table>
		              <div class="col-xs-12" style="margin-bottom: 20px; text-align: center"><img src="{{asset('img/ranking-top5.png')}}"/></div>
		              <table class="table gametool-table ranking-table">
		              	<tr>
		            <td colspan="2"></td>
		            <td><b>Flexipoints</b></td>
		          </tr>
		                    <tbody>
		            {% endif %}
		            <e_>
		                      <td class="ranking-number-format" style="font-size: 32px !important;width: 100px;">{% if i == 1 or i == 2 or i == 3 or i == 4 or i == 5 %}<img src="{{ asset('img/ranking'~i~'.png') }}"/>{% else %}{{i}}º{% endif %}</td>                    
		                      <td class="tleft upper">{{att.name}}</td>
		                      <td class="pointscolor score-number"><button type="button" class="btn" style="padding: 0; background-color: transparent;font-size: inherit" data-html="true" data-toggle="tooltip" data-placement="top" title="+1  cada 100 puntos en promedio que consiga el equipo de tienda<br>Puntos totales: {{att.score}}<br>Usuarios: {{att.numUsers}}">{{att.totalScore}}</button></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 %}  
		                    {% set i = i + 1 %}                         
		                    </tr>
		                  {% endfor %}
		              </tbody>
		          </table>

				{# <a href="{{asset('documents/InfoPremiosIndividuales.pdf')}}" target="_blank"><div  style="margin-top:25px;" class="btn btn-record">PREMIOS</div></a>
 #}
		    </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 text-center">
					   {# <img class="closeModal" src="{{asset('img/cerrar_1.png')}}">   #}
			 		<img style="width:100%;height:auto;max-width:400px;margin-top:20px;margin-bottom:50px" src="{{ asset('img/awards.png') }}">
			 		<img class="closeModal" src="{{asset('img/cerrar_1.png')}}">

            </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 showAwardsModal(){
		$("#awardsModal").modal('show');
	}

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