{%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}) }}">Go back</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">QUESTIONS</div>
            
                        <div class="table-responsive trivial-edit-form col-xs-12" style="border-bottom: none;">
                        <div class="col-xs-12">                 
                  <a class="btn trivial-question-multiadd col-md-2" style="margin-left: 41.6%" data-toggle="modal" data-target="#categoryModalMultiAdd" href="#">Massive upload</a>             
              </div>
                <table class="table gametool-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>CATEGORY</th>  
                            <th class="trivial-question-statement" colspan="3">STATEMENT</th>
                            <th>IMAGE</th>
                            <th>ANSWER</th>
                            <th>ACTIONS</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[0].name}}</td>
                                    {% set statementHelper = question.questionTranslations[0].statement %} 
                                    {% if statementHelper ends with '?' %}
                                      {% set statementHelper = question.questionTranslations[0].statement|slice(0, question.questionTranslations[0].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[0].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>
                                       <a class="btn btn-delete" title="Eliminar pregunta" href="#"><img src="{{asset('img/delete-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>category</th>    
                            <th class="trivial-question-statement" colspan="3">STATEMENT</th>
                            <th>ANSWER OK</th>
                            <th>ANSWER KO</th>
                            <th>ANSWER KO</th>
                            <th>ACTIONS</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[0].name}}</td>   
                                    {% set statementHelper = question.questionTranslations[0].statement %} 
                                    {% if statementHelper ends with '?' %}
                                      {% set statementHelper = question.questionTranslations[0].statement|slice(0, question.questionTranslations[0].statement|length - 1)  %}
                                    {% endif %}                                              
                                    <td colspan="3" class="trivial-question-statement" {% if '?' in statementHelper %}style="background-color: yellow"{% endif %}>{{question.questionTranslations[0].statement }}</td>                                  
                                    <td {% if '?' in question.answers[0].answerTranslations[0].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[0].answerTranslations[0].answerText}}</td>
                                    <td {% if '?' in question.answers[1].answerTranslations[0].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[1].answerTranslations[0].answerText}}</td>
                                    <td {% if '?' in question.answers[2].answerTranslations[0].answerText %}style="background-color: yellow"{% endif %}>{{question.answers[2].answerTranslations[0].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>
                                       <a class="btn btn-delete" title="Eliminar pregunta" href="#"><img src="{{asset('img/delete-competition.png')}}"></a>
                                    </td>
                            </tr>
                                  
                            {% endfor %}
                </tbody>
              </table>
              <div class="navigation">
                      {{ knp_pagination_render(pagination)}}
                  </div>
            </div>
           </div>
           </div>
           {{ include ('Trivial/categoryMultiAdd.html.twig',{form: multiaddForm}) }}
           {{ include ('Clientes/forms/form.html.twig',{form: deleteform_ajax,message:'Are you sure?',id:"form-delete",with_submit:false}) }}

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