@php
    $columns = [
        [
            'label' => 'Miembro',
            'width' => 'w-auto',
            'isHtml' => true,
            'render' => function ($item) {
                $photoPath = $item['photo_url'];
                if ($photoPath) {
                    $url = asset('storage/' . $photoPath);
                } else {
                    $url = 'https://ui-avatars.com/api/?name=' . urlencode($item['name']);
                }
                $html = '<div class="flex items-center space-x-3">';
                $html .= '<img src="' . $url . '" class="w-10 h-10 rounded-full object-cover" alt="Foto de ' . $item['name'] . '">';
                $html .= '<span class="text-black font-medium text-size-small-heading">' . e($item['name']) . '</span>';
                $html .= '</div>';

                return $html;
            },
        ],
        [
            'label' => 'Departamento',
            'width' => 'w-[150px]',
            'render' => fn($staft) => e($staft['department']),
        ],
        [
            'label' => 'Rol',
            'width' => 'w-[150px]',
            'render' => fn($staft) => e($staft['role']),
        ],
        [
            'label' => 'Estado',
            'width' => 'w-[150px]',
            'type' => 'status',
            'render' => fn($staft) => $staft['active'],
        ],
    ];
    $editRoute = 'admin.stafts.edit';
@endphp
<x-layouts.auth-layout>
    <div class="max-w-lg">
        <h2 class="text-size-title text-black mb-4">Staff</h2>
        <p class="text-accent text-parrafo">Visualiza y gestiona al equipo que colabora en la planificación, seguimiento
            y ejecución de bodas y eventos en el resort.</p>
    </div>
    <div class="mt-6 md:mt-8">
        <div class="flex flex-col md:flex-row md:justify-between">
            <div class="flex flex-col md:flex-row gap-4">
                <x-controls.select name="type_event" placeholder="Tipo de evento" />
                <x-controls.select name="state_event" placeholder="Estado" />
            </div>
            <x-buttons.button href="{{ route('admin.stafts.create') }}" variant="add" icon="plus">Agregar nuevo
                miembro</x-buttons.button>
        </div>
    </div>
    <div class="mt-6 md:mt-8">
        <x-tables.table-crud :columns="$columns" :editRoute="$editRoute" :items="$listData" />
    </div>
</x-layouts.auth-layout>