{% 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 href="{{ asset('css/tutorial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <style type="text/css">

    .scaled {
      /*zoom: 0.8;*/
      -moz-transform: scale(0.7);
      -webkit-transform: scale(0.7);
      transform: scale(0.7);
      transform-origin: top center;
    }

    .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 (min-width:  768px) {
  .ranking-number-format {
      padding: 0 !important;
    }
  }
  @media (max-width: 767px ){
    .competition-container-box {
      height: 43vh !important;
    }
    .td-padding-competition {
      padding: 20px 8px !important;
    }
  }
  @media (max-width: 450px){
    .profile-tab .tablink {    
      font-size: 12px;
    }
  }
  </style>
{% endblock %}
{% block body %}
{{ parent() }}
  <div class="container {# scaled #}">         
        {# PROFILE #}
<div class="row">
  <div class="col-xs-12 home-image"><img src="{{asset('images/appearance/logo.png')}}"></div>
</div>
<div class="competition-container-box" style="max-width: 800px;margin:10px auto;height: 50vh">
  <div class="ranking-title" style="text-align: center; font-size: 20px">TOP 5 GRUPOS</div>

  	<div id="flexipoints" class="scaled profile-box" style="height: 40vh">
        <table class="table gametool-table ranking-table">
          <tr>
            <td colspan="2"></td>
            <td><b>Puntos</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">
                    <tbody>
            {% endif %}
            <tr>
                      <td class="ranking-number-format"  style="font-size: 32px !important">{% if i == 1 or i == 2 or i == 3 or i == 4 or i == 5 %}<img width="50px" 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 {{trinder.weighing}} puntos en promedio que consiga el equipo <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>
          <div class="competition-ranking-see-more"><a href="{{path('record_list', {id:trinder.id})}}">Ver más...</a></div>
      </div>
	</div>
          <div class="row">             
            <div class="col-xs-12 btn-play-container">
              <div id="playGame" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame" class="btn btn-play"><span id="languagetext">JUGAR</span></div>
            </div>
          </div>
            <!-- Modal -->
                <div class="modal fade" id="modalGame" role="dialog">
                  <div class="modal-dialog">                  
                    <!-- Modal content-->
                    <div class="modal-content">
              
                      <div id="game">
              
                      </div>

                    </div>
                    
                  </div>
                </div>

     </div>
    {% endblock %}
    {% block javascripts %}
      {{parent()}}
      {% if firstTime %}
        <script type="text/javascript">
          window.onload = function(){
            $('#tutoModal').modal('show');
          };

          {% if firstTime is defined and firstTime == 1 %}       
              var fT = 1;
              $("#tutoModal").on('hidden.bs.modal', function (e) {
                  if(fT == 1){
                    showBadgeModal();
                  }
              });

            function showBadgeModal(){
              $('#myBadgeModal-'+currentModal).appendTo("body").modal('show');
              fT = 0;
            }
          {% endif %}

        </script>
      {% endif %}
      <script src="{{ asset('js/countdown.js') }}" ></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="{{ asset('js/donut-chart.js') }}" ></script>
      <script src="{{ asset('js/competition-search.js') }}" ></script>
      <script src="{{ asset('js/competition-accordion.js') }}" ></script>
      <script src="{{ asset('js/competition-delete.js') }}" ></script>
      <script src="{{ asset('js/actions-links.js') }}" ></script>
      <script src="{{ asset('js/playGame_ok1.js') }}" ></script>
      <script src="{{ asset('js/delete-trivial.js') }}" ></script>
      <script src="{{ asset('js/validateAddCompetitionForm.js') }}" ></script>
      <script src="{{ asset('js/downloadTrackingCompetition.js') }}" ></script>
      <script type="text/javascript">

      $(function () {
        count = 0;
        wordsArray = ["JUGAR", "PLAY", "JOKATU","JOGAR","JOUER","GIOCO","遊ぶ"];
        setInterval(function () {
          count++;
           $("#languagetext").text(wordsArray[count % wordsArray.length]);
          // $("#languagetext").fadeOut(400, function () {
          //   $(this).text(wordsArray[count % wordsArray.length]).fadeIn(500);
          // });
        }, 500);
      });


      $(document).ready(function(){
        $('#modalGame').on('shown.bs.modal', function () {
          $('.container').removeClass('scaled');
        });      
      });    

      function openProfileTab(evt, profileSection) {
      var i, x, tablinks, userProfileImage;
      x = document.getElementsByClassName("profile-box");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }

      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" tablink-profile-active", "");
      }
      document.getElementById(profileSection).style.display = "block";
      evt.currentTarget.firstElementChild.className += " tablink-profile-active";
    }

      </script>
{% endblock %}