{% extends "admin/_base_list.html.twig" %}

{% block title %}Listado de slides{% endblock %}

{% block table_header %}
  <th class="column-title">#</th>
  <th class="column-title">Imagen</th>
  <th class="column-title">Activo</th>
  <th class="column-title no-link"><span class="nobr">Acción</span></th>
{% endblock %}

{% block table_content %}
  {% if entities|length %}
  {% for entity in entities %}
  <tr class="pointer item" data-iditem="{{ entity.id }}">
    <td>
        <i class="fa fa-sort" aria-hidden="true"></i> 
    </td>
    <td>
      {% if entity.nombreImagen %}
      <div class="preview">
        <img src="{{ asset('uploads/images/slides/' ~ entity.nombreImagen) }}" alt="" width="100">
      </div>
      {% else %}
        -
      {% endif %}
    </td>
    <td>{% if entity.activo %}Si{% else %}No{% endif %}</td>
    <td>
      <a href="{{ path('admin_evento_slide_edit', { eventoId: evento.id, id: entity.id }) }}" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> Editar</a>
      {{ form_start(deleteForms[entity.id]) }}
      <button type="submit" class="btn btn-danger btn-xs" 
        data-toggle="confirmation" 
        data-title="Realizar accion?" 
        data-btn-ok-label="Si" 
        data-btn-cancel-label="No"
      ><i class="fa fa-remove"></i> Borrar</button>
      {{ form_end(deleteForms[entity.id]) }}
    </td>
  </tr>
  {% endfor %}
  {% else %}
  <tr class="pointer">
    <td colspan="4">No hay registros creados.</td>
  </tr>
  {% endif %}
{% endblock %}

{% block actions %}
  <div class="text-right">
    <a href="{{ path('admin_evento_slide_new', { eventoId: evento.id }) }}" 
      class="btn btn-success btn-xs">
      <i class="fa fa-plus"></i> Crear
    </a>
  </div>
{% endblock %}

{% block actionsBottom %}
   <a href="{{ path('admin_evento_edit', { id: evento.id }) }}" class="btn btn-primary">Volver al evento</a>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    {% block scriptSection %}
    <script type="text/javascript">
        $( function() {
            $( "#sortable" ).sortable({
                stop: function( event, ui ) {
                    setTimeout(function() {
                    var trItem = $('tr.item'), 
                        items = [], idItem;
                    
                    for (var i = 0; i < trItem.length; i++) {
                        idItem = $(trItem[i]).data('iditem');
                        if (idItem === undefined) {
                            continue;
                        }
                        items.push(
                            {
                                idItem: idItem
                            }
                        );
                    }
                    $.post( 
                        '{{ path("admin_evento_slide_ordenar", { eventoId: evento.id }) }}',
                        {
                            items: items
                        }, 
                        function( response ) {

                        }
                    );
                    }, 500);
                }
            });
            $( "#sortable" ).disableSelection();
        } );
    </script>
    {% endblock %}

{% endblock %}