{%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', {client: app.user.cliente.id}) }}">Volver a Campañas</a>
                {% else %}
                  <a class="competition-return-text" href="{{ path('competition_users_list', {id: app.user.id}) }}">Volver a Campañas</a>
                {% endif %}

            </div>
     
     <div class="fondo col-md-12 competition col-xs-12">
            <div class="record-trivial-name col-md-12 col-xs-12">
              {{trivial.name}}
            </div>
            <div class="col-sm-3  record-trivial-img"><img class="trivial_img" src="{{ asset('images/trivials/'~trivial.image) }}"></div>
            <div class="col-sm-6  badge-trivial-medallas">MEDALLAS</div>
            <div id="trivial-badge" class="trivial-edit-form col-xs-12">
              <table class="table gametool-table">
                <tr>
                  <td>NOMBRE</td>
                  <td>IMAGEN 1</td>
                  <td>DESCRIPCIÓN 1</td>
                  <td>IMAGEN 2</td>
                  <td>DESCRIPCIÓN 2</td>
                  <td>IMAGEN 3</td>
                  <td>DESCRIPCIÓN 3</td>
                  <td>Activa</td>
                  <td>Editar</td>
                </tr>
                {% for bc in pagination %}
                  <tr>
                    <td>{{bc.name}}</td>
                      {% set checked = 0 %}
                      {% for b in bc.badges %}
                        <td><img src="{{ asset('images/badges/'~b.imageName) }}" width="50" /></td>
                        <td>{{b.description}}</td>
                      {% endfor %}
                      ´{% set checked = 0 %}
                      {% for bpc in bc.badges[0].badgeParameterTrinders if bpc.trinder.id == trivial.id  %}
                        {% if bpc.userBadgeReferences|length > 0 %}
                          {% set checked = 1 %}
                        {% endif %}
                      {% endfor %}
                    <td><input type="checkbox" name="active-badge" data-badge="{{bc.id}}" data-trinder="{{trivial.id}}" {% if checked %} checked {% endif %} onchange="changeBadgeStatus(this);"></td>
                    <td><a class="btn" href="{{ path('badge_edit', {trinderId: trivial.id ,id: bc.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a></td>
                </tr>
                {% endfor %} 
              </table> 
         </div>
         {% if app.user.role == 'ROLE_ADMIN' %}
             <div class="col-xs-12" style="margin:40px 0 30px"> 
                <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" style="margin:40px 0 30px"> 
                <a class="btn gametool-btn-green btn-add" href="{{ path('competition_client_list') }}">Volver</a>
            </div>
        {% endif %}
     </div>
     </div>
                
 {% endblock %}
{% block javascripts %}
  {{parent()}}
  <script type="text/javascript">
    function changeBadgeStatus(element) {
      const xhttp = new XMLHttpRequest();
      var url = Routing.generate('badge_status', {id: element.dataset.badge, trinderId: element.dataset.trinder });
      xhttp.onload = function() {
        // alert(this.responseText);
        }
      xhttp.open("PUT", url, true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send();
    }
  </script>
{% endblock %}