{% 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">
{% endblock %}
{% block body %}
{{ parent() }}
  <div class="container">         
        {# PROFILE #}
<div class="row">
  <div class="col-xs-12 home-image"><img src="{{asset('img/logo2.png')}}"></div>
</div>
<div class="row">
  {% set widthPercentage = (cooperativeScore * 100) / challenge1Points %}

  {% set challenge2PointsRest = challenge2Points - challenge1Points %}
  {% set cooperativeScore2 = cooperativeScore - challenge1Points %}
  {% set widthPercentage2 = (cooperativeScore2 * 100) / challenge2PointsRest %}

  {% set challenge3PointsRest = challenge3Points - challenge2Points %}
  {% set cooperativeScore3 = cooperativeScore - challenge2Points %}
  {% set widthPercentage3 = (cooperativeScore3 * 100) / challenge3PointsRest %}

  {% if currentLevel == "3" %}
     {% set widthPercentage = 100 %}
     {% set widthPercentage2 = 100 %}
  {% endif %}
  <div class="col-xs-12 progressbar-container" style="padding:0px;">
      <div class="progressbar-total-container">
        <div class="progressbar-total">
          <div id="width" class="progressbar-otherpoints"
          style="width:{{widthPercentage}}%;max-width:100%;"><div class="mision" style="width:auto;"></div></div>
          </div>
        <div class="progressbar-points"><h6>{% if widthPercentage >= 100 %}{{challenge1Points}}{% elseif widthPercentage <= 0 %}0{% else %}{{cooperativeScore}}{% endif %}/{{challenge1Points}}</h6></div>
      </div>
         <div class="end-blackstar">
          {% if cooperativeScore >= challenge1Points %}
            <a href="{{ path('competition_documents', {id: 1}) }}"><img id="s" class="profile-blue-star" src="{{ asset('documents/thumbnails/video1.PNG') }}" style="max-width: 100px;padding: 10px 10px 15px;" /></a>
          {% else %}
            <img id="s" class="profile-blue-star" src="{{ asset('img/magic-box.png') }}"/>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12 progressbar-container" style="padding:0px;">
        <div class="progressbar-total-container">
      <div class="progressbar-total ">
        <div id="width" class="progressbar-otherpoints"
        style="width:{{widthPercentage2}}%;max-width:100%;"><div class="mision" style="width:auto;"></div></div>
      </div>
        {% if widthPercentage >= 100 %}
        <div class="progressbar-points"><h6>{% if widthPercentage2 >= 100 %}{{challenge2PointsRest}}{% elseif widthPercentage2 <= 0 %}0{% else %}{{cooperativeScore2}}{% endif %}/{{challenge2PointsRest}}</h6></div>
        {% endif %}
      </div>
         <div class="end-blackstar">
          {% if cooperativeScore >= challenge2Points %}
            <a href="{{ path('competition_documents', {id: 1}) }}"><img id="s" class="profile-blue-star" src="{{ asset('documents/thumbnails/video2.PNG') }}" style="max-width: 100px;padding: 10px 10px 15px;" /></a>
          {% else %}
            <img id="s" class="profile-blue-star" src="{{ asset('img/magic-box.png') }}"/>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12 progressbar-container" style="padding:0px;">
      <div class="progressbar-total-container">
      <div class="progressbar-total ">
        <div id="width" class="progressbar-otherpoints"
          style="width:{{widthPercentage3}}%;max-width:100%;"><div class="mision" style="width:auto;"></div></div>
        </div>
        {% if widthPercentage2 >= 100 %}
          <div class="progressbar-points"><h6>{% if widthPercentage3 >= 100 %}{{challenge3PointsRest}}{% elseif widthPercentage3 <= 0 %}0{% else %}{{cooperativeScore3}}{% endif %}/{{challenge3PointsRest}}</h6></div>
        {% endif %}
        </div>
         <div class="end-blackstar">
          {% if cooperativeScore >= challenge3Points %}
            <a href="{{ path('competition_documents', {id: 1}) }}"><img id="s" class="profile-blue-star" src="{{ asset('documents/thumbnails/video3.PNG') }}" style="max-width: 100px;padding: 10px 10px 15px;" /></a>
          {% else %}
            <img id="s" class="profile-blue-star" src="{{ asset('img/magic-box.png') }}"/>
          {% endif %}
        </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">PLAY</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 is defined and firstTime == 1 %}
        <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 = ["PLAY", "JUGAR", "JOKATU","JOGAR","JOUER","GIOCO","遊ぶ"];
        setInterval(function () {
          count++;
           $("#languagetext").text(wordsArray[count % wordsArray.length]);
        }, 500);
      });

      </script>
{% endblock %}