{% 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">
  <link href="{{ asset('css/bubbles.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">     

{# BURBUJITAS #}
<section class="sticky">
  <div class="bubbles">
      <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>    
  </div>
</section>  



{# PROFILE #}

        <div class="home-profile" style="max-height:20vh">
          <div class="row">
          <div class="col-xs-2 no-pad" style="text-align:right;" data-toggle="modal" data-target="#modalAjustes" ><img  class="ajustes-button"  id="openMenu" src="{{asset('img/open.png')}}"></div>
          <div class="col-xs-9 profile-container no-pad ">
                <div class="col-xs-12 home-profile-name">
                  <div class="col-xs-12">
                  <p>{{app.user.name}}</p>
                  </div>
                     <div class="col-xs-1"></div>
                      <div class="col-xs-4 home-chest"><img class="home-mini-chest" src="{{asset('img/minichest.png')}}"><span class="chest_nmb">{{bronce + plata + oro }}</span></div>
                      <div class="col-xs-2"></div>
                      <div class="col-xs-4 home-chest"><img class="home-mini-chest" src="{{asset('img/sword.png')}}"><span class="chest_nmb">{{ total_partidas }}</span></div>
                       <div class="col-xs-1"></div>
                  </div>
                <div class="avatar-container no-pad"><div class="inner-cercle"></div><img class="avatar-image" src="{{ asset('images/users/'~app.user.image) }}"></div>
                <div class="no-pad"><img class="perfil-button" src="{{asset('img/settings.png')}}"></div>
          </div>
         </div>
        </div>
     

{# ENDPROFILE #}


        {# BOTONERA #}


        <div class="container-buttons-home" style="max-height:20vh">
          <div class="row">
          <div class="col-xs-4" style="padding-top:35px;"><a href="{{path('warehouse')}}"><div class="noti_almacen"><div class="noti_txt">{{ bronce + plata + oro}}</div></div><img src="{{asset('img/home1.png')}}"><p>{% trans %}ALMACÉN{% endtrans %}</a></p></div>
          <div class="col-xs-4" style="padding-top:15px;"><a href="{{path('record_list', {id:1})}}" ><img src="{{asset('img/home2.png')}}"><p>{% trans %}RÁNKING{% endtrans %}</a></p></div>
          <div class="col-xs-4"  style="padding-top:35px;" ><a href="{{path('news')}}"><img src="{{asset('img/home3.png')}}"><p>{% trans %}NEWS{% endtrans %}</a></p></div>
          </div>
        </div>




        {# END BOTONERA #}



        {# <a href="#" class="button big blue rounded">Submit</a> #}
<div class="row" style="max-height:30vh">
  <div class="col-xs-12 home-image"><img class="" src="{{asset('img/logo2.png')}}"></div>
</div>

          <div class="row" style="max-height:30vh">             
            <div class="col-xs-12 btn-play-container">
                 <div href="#" data-toggle="modal" data-target="#modalSelectGame">

                   <div class="btn-play" >
                                    <div class="text">{% trans %}JUGAR{% endtrans %}</div>
                                </div>
                  
                </div>
            </div>
          </div>

           <!-- Modal -select -->
{#                 <div class="modal fade" id="modalSelectGame" role="dialog" >
                  <div class="modal-dialog modal-md" >   
                    <!-- Modal content-->
                    <img style="max-width: 100%;position: relative;top: 60px;z-index: 1;" src="{{asset('img/headermodal.png')}}">
                    <div class="modal-content modal-select"> 
                                  <img class="closeAllModal " src="{{asset('img/cerrar.png')}}">
                          <div style="text-align:center;" id="selectGame">
                                <div style="margin:25px;" id="playGame" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame"><img style="max-width:90%;" src="{{asset('img/train.png')}}"></div>
                                <div style="margin:25px;" id="goPvp" href="#" data-toggle="modal" data-target="#modalGame" ><a href="{{ path('duel') }}"><img style="max-width:90%;" src="{{asset('img/pvp.png')}}"></a></div>
                          </div>
                    </div>
                    
                  </div>
                </div>
 #}

                <div id="modalSelectGame" class="modal fade badgesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                              <div class="vertical-alignment-helper">
                                <div class="modal-dialog mymodal vertical-align-center" style="max-width:none">
                                <div class="modal-content modal-home">
                                  <img class="closePlayModal "  src="{{asset('img/cerrar.png')}}">
                                  <div class="home-modal-title"><span>{% trans %}JUGAR{% endtrans %}</span></div>
                                  <div class="row" style="margin:0px 15px auto !important;">
                                    <div style="text-align:center;" id="selectGame">
                                        <div style="margin:25px;" id="playGame" data-id-trivial="1" data-tokenSession="{{app.session.get('tokenSession')}}" href="#" data-toggle="modal" data-target="#modalGame"><img style="max-width:100%;" src="{{asset('img/train.png')}}"></div>
                                        <div style="margin:25px;" id="goPvp" href="#" data-toggle="modal" data-target="#modalGame" ><a href="{{ path('duel') }}"><img style="max-width:100%;" src="{{asset('img/pvp.png')}}"></a></div>
                                  </div>
                           
                                  </div>
                                </div>
                              </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>

              <!-- Modal - ajustes -->
                <div class="modal fade" id="modalAjustes" role="dialog" >
                  <div class="modal-dialog" >   

                    <!-- Modal content-->
                    <div class="modal-content modalAjustes">
                           <img class="closeTutoModal " src="{{asset('img/cerrar.png')}}">

                     <div class="col-xs-12 header_ajustes" style="">

                       {% trans %}MENÚ{% endtrans %}
                      </div> 
                      <div class="col-xs-12  content_ajustes" style="text-align:center;color:white;">
                       <a href="{{ path('profile') }}">{% trans %}Perfil{% endtrans %}</a>
                      </div>
                         <div class="col-xs-12 content_ajustes"  style="text-align:center;color:white;">
                        <a href="{{ path('list_user_badges') }}">{% trans %}Logros{% endtrans %}</a>
                      </div>
                         <div class="col-xs-12 content_ajustes"  style="text-align:center;color:white;">
                        <a href="{{path('record_list', {id:1})}}">{% trans %}Ránking{% endtrans %}</a>
                      </div>
                       <div class="col-xs-12 content_ajustes "  style="text-align:center;color:white;">
                         <a class="tut" href="#" data-target="#tutoModal" data-toggle="modal" data-dismiss="modal" >{% trans %}Tutorial{% endtrans %}</a>
                      </div>
                      <div class="col-xs-12 content_ajustes "  style="text-align:center;color:white;">
                         <a class="audio" href="#" >{% trans %}Audio{% endtrans %}</a>
                      </div>
                         <div class="col-xs-12 content_ajustes" style="text-align:center;color:white;">
                        <a href="{{ path('logout') }}">{% trans %}Salir{% endtrans %}</a>
                      </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 type="text/javascript">

    //       window.onload = function () {
    //         	var isAudio = sessionStorage.getItem('audio');


				// if (isAudio=='true'){
			 //   		 $(".audio").text("Audio ON");
				// }
				// else{
				// 	$(".audio").text("Audio OFF");
				// }
    //            }


$(".closePlayModal").click(function(){
    $("#modalSelectGame").modal('toggle');
  });
$(".closeTutoModal").click(function(){
    $("#modalAjustes").modal('toggle');
  });

$(".audio").click(function(){
 var isAudio = sessionStorage.getItem('audio');


	if (isAudio=='true'){
      sessionStorage.setItem('audio', 'false');
  		  audio.pause();
  		  $(".audio").text("Audio OFF");
	}
	else{
  sessionStorage.setItem('audio', 'true');
		 audio.play();
		 $(".audio").text("Audio ON");
	}
   
  });



      </script>
      <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>
{% endblock %}