{%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 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('category_list',{id: trinder.id}) }}">Volver a Categorías</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>
            <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>TIPO</th>                        
                            <th class="trivial-question-statement">ENUNCIADO</th>
                            <th>RESPUESTAS</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                         {% for question in pagination %}
                            <tr  data-id="{{question.id}}" data-name="{{question.statement}}" data-type="la pregunta">
                                    <td>{{question.id}}</td>   
                                    <td>{{question.type}}</td>                                                 
                                    <td class="trivial-question-statement">{{question.statement }}</td>
                                    <td>{{question.answers|length }}</td>
                                    <td>                                                        
                                        {% if date(question.area.category.trinder.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                          <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>
                                        {% endif %}
                                    </td>

                            </tr>
                                  
                            {% endfor %}
                </tbody>
              </table>
              <div class="navigation">
                      {{ knp_pagination_render(pagination)}}
                  </div>
            </div>
                  
                {#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="#">Añadir pregunta</a>                   
                  <a class="btn trivial-question-multiadd col-md-2" data-toggle="modal" data-target="#questionModalMultiAdd" href="#">Subida Masiva</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="#">Subida Masiva</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('category_list',{id: trinder.id}) }}">Volver</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">
    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 %}