{% 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 id="gametype" data-type="{{ trinder.type }}" class="container marketing lista">
          <div class="competition-return">
              <div class="competition-return-image"><img src="{{asset('img/competition-return.png')}}"></div>
              <a class="competition-return-text" href="{{ path('area_list',{id: area.category.id}) }}">{% trans %}Go to Areas{% endtrans %}</a>
            </div>  
      <div class="fondo col-xs-12">
            <div class="record-trivial-name col-xs-12">
              {{trinder.name}}
            </div>
            <div class="col-sm-3 record-trivial-img"><img class="trivial_img" src="{{ asset('images/trivials/'~trinder.image) }}"></div>
            <div class="col-sm-9 badge-trivial-medallas">PREGUNTAS {{area.name|upper}}</div>
          {% if trinder.type == "TRINDER" or  trinder.type == "TINDER" %}
            <div class="table-responsive trivial-edit-form col-xs-12" style="border-bottom: none;">

                <table class="table gametool-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th class="trivial-question-statement">{% trans %}STATEMENT{% endtrans %}</th>
                            <th>{% trans %}IMAGE{% endtrans %}</th>
                            <th>{% trans %}ANSWER{% endtrans %}</th>
                            <th>{% trans %}ACTIONS{% endtrans %}</th>
                        </tr>
                    </thead>
                    <tbody>
                         {% for question in pagination|filter(question => question.type == 'TINDER') %}
                            <tr  data-id="{{question.id}}" data-name="{{question.questionTraductions[0].statement}}" data-type="la pregunta">
                                    <td>{{question.id}}</td>
                                    <td class="trivial-question-statement">{{question.questionTraductions[0].statement }}</td>
                                    <td><img src="{{ asset('images/question/'~question.image) }}" style="max-width: 75px"></td>
                                    <td>{% for a in question.answers|filter(a => a.answerValid) %}{{a.answerTraductions[0].answerText}}{% endfor %}</td>
                                    <td>                                                        
                                        {% if date(question.area.category.game.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                          <a class="btn" title="Ver traducciones" href="{{ path('question_translation_list', {id: question.id}) }}"><img src="{{asset('img/translation.png')}}" width="25"></a>
                                          <a class="btn" title="Editar pregunta" href="{{ path('question_edit', {id: question.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                          <a class="btn btn-delete" title="Eliminar pregunta" href="#"><img src="{{asset('img/delete-competition.png')}}"></a>
                                        {% else %}
                                          <a class="btn" title="Ver respuestas" href="{{ path('answer_list', {id: question.id}) }}"><img src="{{asset('img/preview.png')}}"></a>
                                          <a class="btn" title="Ver traducciones" href="{{ path('question_translation_list', {id: question.id}) }}"><img src="{{asset('img/translation.png')}}" width="25"></a>
                                        {% endif %}
                                    </td>

                            </tr> 
                            {% endfor %}
                </tbody>
              </table>
                <div class="navigation">
                      {{ knp_pagination_render(pagination)}}
                  </div>

            </div>
          {% endif  %}
          {% if trinder.type=="TRIVIAL" or  trinder.type=="TRINDER" %}
            <div class="table-responsive trivial-edit-form col-xs-12" style="border-bottom: none;">

                <table class="table gametool-table">
                    <thead>
                        <tr>
                            <th>ID</th>    
                            <th>{% trans %}TYPE{% endtrans %}</th>                        
                            <th class="trivial-question-statement">{% trans %}STATEMENT{% endtrans %}</th>
                            <th>{% trans %}ANSWER{% endtrans %}</th>
                            <th>{% trans %}ACTIONS{% endtrans %}</th>
                        </tr>
                    </thead>
                    <tbody>
                         {% for question in pagination|filter(question => question.type == 'TRIVIAL') %}
                            <tr  data-id="{{question.id}}" data-name="{{question.questionTraductions[0].statement}}" data-type="la pregunta">
                                    <td>{{question.id}}</td>   
                                    <td>{{question.type}}</td>                                                 
                                    <td class="trivial-question-statement">{{question.questionTraductions[0].statement }}</td>
                                    <td>{{question.answers|length }}</td>
                                    <td>                                                        
                                        {% if date(question.area.category.game.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                          <a class="btn" title="Ver traducciones" href="{{ path('question_translation_list', {id: question.id}) }}"><img src="{{asset('img/translation.png')}}" width="25"></a>
                                          <a class="btn" title="Editar pregunta" href="{{ path('question_edit', {id: question.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                          <a class="btn btn-delete" title="Eliminar pregunta" href="#"><img src="{{asset('img/delete-competition.png')}}"></a>
                                        {% else %}
                                          <a class="btn" title="Ver respuestas" href="{{ path('answer_list', {id: question.id}) }}"><img src="{{asset('img/preview.png')}}"></a>
                                           <a class="btn" title="Ver traducciones" href="{{ path('question_translation_list', {id: question.id}) }}"><img src="{{asset('img/translation.png')}}" width="25"></a>
                                        {% endif %}
                                    </td>

                            </tr>
                                  
                            {% endfor %}
                </tbody>
              </table>
                <div class="navigation">
                      {{ knp_pagination_render(pagination)}}
                  </div>
            </div>
          {% endif  %}
                {#display navigation#}
                <div class="col-xs-12">
                  {% if date(trinder.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}  
                  {# <a class="btn trivial-cateogorias-add btn-add" data-toggle="modal" data-target="#questionModal" href="#">Añadir pregunta</a> #}
                  <a class="btn trivial-cateogorias-add btn-add col-md-2 col-md-offset-4" data-toggle="modal" data-target="#questionModal" href="#">{% trans %}Add question{% endtrans %}</a>                   
                  <a class="btn trivial-question-multiadd col-md-2" data-toggle="modal" data-target="#questionModalMultiAdd" href="#">{% trans %}Massive upload{% endtrans %}</a>
                  {% else %}
                    <a title="No se pueden añadir preguntas porque la campaña ya ha iniciado" data-toggle="tooltip" class="btn gametool-btn-disabled trivial-cateogorias-add btn-add col-md-2 col-md-offset-4" href="#">Añadir pregunta trivial</a>
                  <a title="No se pueden añadir preguntas porque la campaña ya ha iniciado" data-toggle="tooltip" class="btn gametool-btn-disabled trivial-question-multiadd col-md-2" href="#">{% trans %}Massive upload{% endtrans %}</a>
                  {% endif %}                
              </div>
              {% if app.user.role == 'ROLE_ADMIN' or app.user.role == "ROLE_TUTOR" %}
                   <div class="col-xs-12 gametool-gb"> 
                      <a class="btn gametool-btn-green btn-add" href="{{ path('area_list',{id: area.category.id}) }}">{% trans %}Go back{% endtrans %}</a>
                  </div>
              {% endif %}
           </div>
           </div>
                
                  {{ include ('Clientes/forms/form.html.twig',{form: deleteform_ajax,message:'Estás seguro?',id:"form-delete",with_submit:false}) }}
                  {{ include ('Trivial/forms/addQuestionform.html.twig',{form: addform_ajax,message:'Estás seguro?',id:"form-add",with_submit:false}) }}
                  {{ include ('Trivial/questionMultiAdd.html.twig',{form: multiaddForm}) }}

                              {% endblock %}
{% block javascripts %}
  {{parent()}}
  <script src="{{ asset('js/validateQuestion.js') }}" ></script>
  <script type="text/javascript">





          /**  var gameType = $("#gametype").data("type");**/





      document.getElementById("tipo").addEventListener('change', function(){
          var fileInput = document.getElementById("question_file_file");
          var tinderContainer = document.getElementById("tinder-container");
          var fileTinderInput = document.getElementById('file-input');

          if(this.value=="Tinder"){
              fileInput.setAttribute('multiple', true);
              fileTinderInput.setAttribute('required',true);
              tinderContainer.style.display = "block";
          } else {
              fileInput.removeAttribute('multiple');
              fileTinderInput.removeAttribute('required');
              tinderContainer.style.display = "none";
          }
      }, false);








  </script>
{% endblock %}