{%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">
  <style type="text/css">
    .edit-question:hover {
      cursor: pointer;
    }
  </style>
{% 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 Categorias</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</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>CATEGORIA</th>  
                            <th class="trivial-question-statement" colspan="3">ENUNCIADO</th>
                            <th>IMÁGEN</th>
                            <th>RESPUESTA</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                         {% for question in pagination if question.type == 'TINDER' %}
                            <tr  data-id="{{question.id}}" data-name="{{question.questionTranslations[0].statement}}" data-type="la pregunta">
                                    <td>{{question.id}}</td>
                                    <td>{{question.area.category.categoryTranslations[1].name}}</td>
                                    {% set statementHelper = question.questionTranslations[1].statement %} 
                                    {% if statementHelper ends with '?' %}
                                      {% set statementHelper = question.questionTranslations[1].statement|slice(0, question.questionTranslations[1].statement|length - 1)  %}
                                    {% endif %}   
                                    <td colspan="3" class="trivial-question-statement" id ="trinder_{{loop.index}}" {% if '?' in statementHelper %}style="background-color: yellow"{% endif %}> {{question.questionTranslations[1].statement }}</td>
                                    <td><img src="{{ asset('images/question/'~question.image) }}" style="max-width: 75px"></td>
                                    <td>{% for a in question.answers if a.answerValid %}{{a.answerTranslations[0].answerText}}{% endfor %}</td>
                                    <td>                                                        
                                       <a class="btn" title="Editar pregunta" href="{{ path('question_edit_all', {id: question.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                    </td>

                            </tr>
                                  
                            {% endfor %}
                </tbody>
              </table>
              <div class="navigation">
                      {{ knp_pagination_render(pagination)}}
                  </div>
            </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>CATEGORIA</th>    
                            <th class="trivial-question-statement" colspan="3">ENUNCIADO</th>
                            <th>RESPUESTAS OK</th>
                            <th>RESPUESTAS KO</th>
                            <th>RESPUESTAS KO</th>
                            <th>ACCIONES</th>                            
                        </tr>
                    </thead>
                    <tbody>
                         {% for question in pagination if question.type == 'TRIVIAL' %}
                            <tr  data-id="{{question.id}}" data-name="{{question.questionTranslations[0].statement}}" data-type="la pregunta">
                                    <td>{{question.id}}</td>
                                    <td>{{question.area.category.categoryTranslations[1].name}}</td>   
                                    {% set statementHelper = question.questionTranslations[1].statement %} 
                                    {% if statementHelper ends with '?' %}
                                      {% set statementHelper = question.questionTranslations[1].statement|slice(0, question.questionTranslations[1].statement|length - 1)  %}
                                    {% endif %}                                              
                                    <td colspan="3" class="trivial-question-statement" {% if '?' in statementHelper %}style="background-color: yellow"{% endif %}>{{question.questionTranslations[1].statement }}</td>                                  
                                    <td {% if '?' in question.answers[0].answerTranslations[1].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[0].answerTranslations[1].answerText}}</td>
                                    <td {% if '?' in question.answers[1].answerTranslations[1].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[1].answerTranslations[1].answerText}}</td>
                                    <td {% if '?' in question.answers[2].answerTranslations[1].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[2].answerTranslations[1].answerText}}</td>
                                    <td>                                                        
                                       <a class="btn" title="Editar pregunta" href="{{ path('question_edit_all', {id: question.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                    </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>

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