{% 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>
              {% if app.user.role == 'ROLE_ADMIN' %}
                     <a class="competition-return-text" href="{{ path('competition_list') }}">Volver a Campañas</a>
               {% elseif app.user.role == 'ROLE_TUTOR'%}
                <a class="competition-return-text"  href="{{ path('competition_client_list') }}">Volver a Campañas</a>
                 {% endif %}
            </div>  
      <div class="fondo col-xs-12">
            <div class="record-trivial-name col-md-12 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-6 badge-trivial-medallas">CATEGORÍAS</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>NOMBRE</th>
                            <th>ICONO</th>
                            <th>AREAS</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                              {% for category in pagination %}
                        <tr data-id="{{category.id}}" data-name="{{category.name}}" data-type="la categoría" >
                                <td>{{category.id}}</td>
                                <td>{{category.name}}</td>
                                <td><img class="badges" src="{{ asset('images/category/'~category.image) }}"></td>
                                <td>{{category.areas|length}}</td>
                                <td>
                                    {% if date(category.trinder.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}                                      
                                        <a class="btn" title="Editar {{category.name}}" href="{{ path('category_edit', {id: category.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                    {% endif %}
                                     <a class="btn" title="Preguntas {{category.name}}" href="{{ path('area_list', {id: category.id}) }}"><img src="{{asset('img/trivial-preguntas.png')}}"></a>
                                    {% if date(category.trinder.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                        <a class="btn btn-delete" title="Eliminar {{category.name}}" href="#"><img src="{{asset('img/delete-competition.png')}}"></a>
                                    {% endif %}                                                                        
                                    
                                </td>
                            
                        </tr>
                            
                              {% endfor %}
                </tbody>
              </table>
                {#display navigation#}
                <div class="navigation">
                    {{ knp_pagination_render(pagination)}}
                </div>
            </div>        
                <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 col-md-2 col-md-offset-4" data-toggle="modal" data-target="#categoryModal" href="#">Añadir categoría</a>
                    <a class="btn trivial-question-multiadd col-md-2" data-toggle="modal" data-target="#categoryModalMultiAdd" href="#">Subida Masiva</a>
                  {% else %}
                    <a title="No se pueden añadir categorías porque la campaña ya ha iniciado" data-toggle="tooltip" class="btn trivial-cateogorias-add gametool-btn-disabled col-md-2 col-md-offset-4" href="#">Añadir categoría</a>
                    <a title="No se pueden añadir categorías porque la campaña ya ha iniciado" data-toggle="tooltip" class="btn trivial-question-multiadd gametool-btn-disabled col-md-2" href="#">Subida Masiva</a>
                  {% endif %}   
                </div>
                {% if app.user.role == 'ROLE_ADMIN' %}
                   <div class="col-xs-12 gametool-gb"> 
                      <a class="btn gametool-btn-green btn-add" href="{{ path('competition_list') }}">Volver</a>
                  </div>
                 {% elseif app.user.role == 'ROLE_TUTOR'%}
                 <div class="col-xs-12 gametool-gb"> 
                      <a class="btn gametool-btn-green btn-add" href="{{ path('competition_client_list') }}">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/addCategoryform.html.twig',{form: addform_ajax,message:'Estás seguro?',id:"form-add",with_submit:false}) }}
           {{ include ('Trivial/categoryMultiAdd.html.twig',{form: multiaddForm}) }}

    {% endblock %}