{% extends "FactelBundle::Layout.html.twig" %}

{% block css %}
    <!-- DataTables CSS -->
    <link href="{{asset('recursos/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css')}}" rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="{{asset('recursos/bower_components/datatables-responsive/css/dataTables.responsive.css')}}" rel="stylesheet">
    <link href="{{asset('garyavendanio/uikit/css/uikit.min.css')}}" rel="stylesheet">
{% endblock %}

{% block panel_title %}
<div class="uk-background-cover text-blue-500 h-44 w-full rounded-2xl uk-grid uk-grid-collapse uk-flex-between uk-flex-middle px-8" style="background-image: url( {{asset('recursos/img/bg-header.png')}} );">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="text-xl">Roles</span>
    </div>
    <div>
        <a href="{{ path('rol_new') }}">
            <button class="uk-button uk-button-primary capitalize flex uk-flex-middle rounded-full link-boton">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Nuevo Rol</span>
            </button>
        </a>
    </div>
</div>
{% endblock %}
    
{% block content %}
<div class="dataTable_wrapper table-responsive row">  
    <table class="table table-striped table-bordered table-hover" id="data-table">
        <thead>
            <tr>
                <th class="font-light text-blue-500">Nombre</th>
                <th class="font-light text-blue-500">Acciones</th>
            </tr>
        </thead>
        <tbody>
        {% for entity in entities %}
            <tr>
                <td>{{ entity.name }}</td>
                <td>
                    <a href="{{ path('rol_edit', { 'id': entity.id }) }}" title="Editar">
                        <button class="btn bg-blue-500 text-blue-100 hover:bg-blue-100 hover:text-blue-600 link-boton">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                        </button>
                    </a>

                    <button class="btn bg-gray-500 text-gray-100 hover:bg-gray-100 hover:text-gray-600 link-boton accion" data-toggle="modal" data-target="#confirm-delete" type="button" accion = "{{entity.id}}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                     {{ form(deleteForms[entity.id], { 'attr': {'id': entity.id } })}}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block javascript %}
	<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
	<script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
    <script src="{{asset('recursos/bower_components/datatables-responsive/js/dataTables.responsive.js')}}"></script>
	<script src="{{asset('recursos/bower_components/RowGroup-1.2.0/dataTables.rowGroup.min.js')}}"></script>
{% endblock %}