@extends('backend.adminlayouts.master')

@section('body')
<span class="header-wrapper">
    <h3 class="text-gray-700 text-3xl font-medium">Permisiuni</h3>
    <a href="{{ route('permissions.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-block">
        Adauga permisiune
    </a>
</span>
<div class="container mx-auto">
    <div class="mt-6 space-y-4">
        <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 ($permissions as $permission)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">{{ $permission->name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right">
                        <a href="{{ route('permissions.edit', $permission->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('permissions.destroy', $permission->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>
</div>
@endsection