@extends('adminlte::page')

@section('title', 'Roles')

@section('content_header')
   <a @popper(Añadir nuevo rol) href="{{ route('roles.create') }}" class="btn btn-primary float-right"><i class="bi bi-plus-lg"></i>Crear rol</a> 
    <h1>Listado de roles</h1>
@stop

 
@section('content')
   @include('popper::assets')
  @include('alerts.alert') 
   <div class="card card-outline card-primary">
   
    <div class="card-body">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                   
                    <th>Nombre</th>
                    <th colspan="2" class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @forelse($roles as $role)
                    <tr> 
                     
                        <td>{{ $role->name }}</td>
                      
                        <td style="width:260px;" class="text-center">
                       
                            <form action="{{ route('roles.destroy', $role->id) }}" method="POST" style="display: inline">
                                @csrf
                                @method('DELETE') <div class="btn-group" role="group" aria-label="Basic example">
                                <a @popper(Modificar este rol) href="{{ route('roles.edit', $role->id) }}" class="btn btn-warning"><i class='bi bi-pencil-square'></i> Editar</a>
                                <button @popper(Se eliminará este rol) class="btn btn-danger" type="submit"><i class='bi bi-trash3'></i> Eliminar</button>
                              </div> 
                            </form>
                     
                        </td>
                @empty
                    <tr>
                        <td colspan="4" class="text-center">No hay roles registrados</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
   </div>
   
   
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
@stop