@extends('layouts.app')

@section('title', 'Roles')

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="header-title">Listado de Roles</h4>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif


        <table class="table table-bordered table-striped align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 50px;">#</th>
                    <th>Nombre del Rol</th>
                    
                </tr>
            </thead>
            <tbody>
                @forelse ($roles as $index => $rol)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $rol->nombre }}</td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="text-center">No hay roles registrados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection