@extends('backend.adminlayouts.master')

@section('body')
<span class="header-wrapper">
    <h3 class="text-gray-700 text-3xl font-medium">Roluri</h3>
    <a href="{{ route('roles.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-block">
        Creeaza rol
    </a>
</span>
<div class="mt-6">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nume</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actiune</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach ($roles as $role)
            <tr>
                <td class="px-6 py-4 whitespace-nowrap">{{ $role->name }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-right">
                    <a href="{{ route('roles.edit', $role->id) }}" class="inline-block px-4 py-2 bg-yellow-600 text-white font-medium text-xs uppercase rounded shadow-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-800 transition duration-150 ease-in-out">Modifica</a>
                    <form action="{{ route('roles.destroy', $role->id) }}" method="POST" class="inline-block">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="inline-block px-4 py-2 bg-red-600 text-white font-medium text-xs uppercase rounded shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-800 transition duration-150 ease-in-out">Sterge</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection