{% extends 'core/base.html' %}
{% load static %}
{% block content %}
<style scoped>
    span.fa-circle {
        position: relative;
        font-size: 1.2em;
        top: -2px;
        color: red;
        left: 0px;
    }

    span.num {
        position: relative;
        font-size: 0.8em;
        top: -4px;
        color: rgb(20, 42, 243);
        left: -13px;
    }


</style>
<div class="row">
    <div class="col-lg-12">
        <div class="card card-default">
            <div class="card-body">
                <div class="content-heading" style="display:flex; justify-content: space-between">
                    <div></div>
                    <a href="{% url 'CreateRolesListView' %}">
                        <button class="btn btn-oval btn-success"> Crear nuevo rol</button>
                    </a>
                </div>
                <br>
                <table class="table w-100 table-striped table-condensed text-center focus-datatable1">
                    <thead>
                        <th> id</th>
                        <th> Nombre</th>
                        <th> Descripción</th>
                        <th> Acciones</th>
                    </thead>
                    <tbody>
                    {% for rol in roles %}
                    <tr>
                        <td>{{ rol.id }}</td>
                        <td>{{ rol.name }}</td>
                        <td>{{ rol.description }}</td>
                        <td>
                            <a href="{% url 'EditRolesListView' rol.id %}">
                                <button class="btn btn-warning btn-xs" type="button">Editar</button>
                            </a>
                            <a href="{% url 'DeleteRol' pk=rol.id %}">
                                <button class="btn btn-danger btn-xs" onclick="return confirm('¿Estás seguro de eliminar este rol?');" type="button">Eliminar</button>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}