{% 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' or app.user.role == 'ROLE_TUTOR' %}
                     <a class="competition-return-text" href="{{ path('category_list', {id: category.game.id}) }}">{% trans %}Go to categories{% endtrans %}</a>
                 {% endif %}
            </div>  
      <div class="fondo col-xs-12">
            <div class="record-trivial-name col-md-12 col-xs-12">
              {{category.game.name}}
            </div>
            <div class="col-sm-3 record-trivial-img" ><img class="trivial_img" src="{{ asset('images/trivials/'~category.game.image) }}"></div>
            <div class="col-sm-6 badge-trivial-medallas">{{category.name}}</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>{% trans %}NAME{% endtrans %}</th>
                            <th>{% trans %}QUESTIONS{% endtrans %}</th>
                            <th>{% trans %}ACTIONS{% endtrans %}</th>
                        </tr>
                    </thead>
                    <tbody>
                              {% for area in pagination %}
                        <tr data-id="{{area.id}}" data-name="{{area.name}}" data-type="el area" >
                                <td>{{area.id}}</td>
                                <td>{{area.name}}</td>
                                <td>{{area.questions|length}}</td>
                                <td>
                                    {% if date(area.category.game.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                        <a class="btn" title="Editar {{area.name}}" href="{{ path('area_edit', {id: area.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a>
                                    {% endif %}
                                     <a class="btn" title="Preguntas {{area.name}}" href="{{ path('question_list', {id: area.id}) }}"><img src="{{asset('img/trivial-preguntas.png')}}"></a>
                                    {% if date(area.category.game.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                                        <a class="btn btn-delete" title="Eliminar {{area.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(category.game.competition.beginAt) > date() or app.user.role == "ROLE_ADMIN" %}
                    <a class="btn trivial-cateogorias-add btn-add" data-toggle="modal" data-target="#categoryModal" href="#">{% trans %}Add area{% endtrans %}</a>
                  {% else %}
                    <a title="No se pueden añadir areas porque la campaña ya ha iniciado" data-toggle="tooltip" class="btn trivial-cateogorias-add gametool-btn-disabled" href="#">{% trans %}Add area{% 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('category_list', {id: 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/Area/Form/add.html.twig',{form: addform_ajax,message:'Estás seguro?',id:"form-add",with_submit:false}) }}
    {% endblock %}