<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Proyectos</h2>
            @can('create projects')
                <a href="{{ route('projects.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Nuevo proyecto
                </a>
            @endcan
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            @if(session('success'))
                <div class="alert alert-success mb-4 shadow">
                    {{ session('success') }}
                </div>
            @endif

            <div class="bg-white rounded-xl shadow p-6">
                <livewire:projects.project-table />
            </div>
        </div>
    </div>
</x-app-layout>
