@extends('layouts.template.app')
@section('title', 'Roles')
@section('first-title', 'USB')
@section('href', route('roles.index'))
@section('title-page', 'Roles')
@section('suit', 'Roles')
@section('item-suit', 'USB')


@section('content')
    <x-cards.only-card>
        <div class="card-header">
            <div class="row">
                @can('Crear roles')
                    <div class="col-12 text-end">
                        <a class="btn btn-primary btn-sm" href="{{ route('roles.create') }}">Nuevo rol</a>
                    </div>
                @endcan
            </div>
        </div>
        @if (session('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if ($roles->count())
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Rol</th>
                        @can('Editar roles')
                            <th scope="col" class="text-end">Editar</th>
                        @endcan
                        {{-- @can('Eliminar roles')
                            <th scope="col" class="text-end">Eliminar</th>
                        @endcan --}}
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @foreach ($roles as $role)
                        <tr>
                            <td>{{ $role->id }}</td>
                            <td>{{ $role->name }}</td>
                            @can('Editar roles')
                                <td class="text-end">
                                    <a class="btn" href="{{ route('roles.edit', $role) }}">
                                        <img width="25px" src="{{ asset('assets/images/icons/edit.png') }}" alt="">
                                    </a>
                                </td>
                            @endcan
                            {{-- @can('Eliminar roles')
                                <td width="10px">
                                    <form action="{{ route('roles.destroy', $role) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn"><img src="{{asset('assets/images/icons/trash.svg')}}" alt=""></button>
                                    </form>
                                </td>
                            @endcan --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <strong>No hay registros</strong>
        @endif
    </x-cards.only-card>
    {{-- //SCRIPTS --}}
    {{-- <script src="{{ asset('assets/js/quotes/quote/alerts-quotes.js') }}"></script> --}}
@endsection