@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/modules/staff.css') }}">
@endpush

@section('content')
<section class="staff-page">
    <div class="page-heading">
        <div>
            <h1>Personal</h1>
            <p>Gestiona roles, actividad y acceso de los colaboradores.</p>
        </div>
        <button class="button blue" data-mock-action="formulario de nuevo usuario abierto">+ Nuevo usuario</button>
    </div>
    <div class="data-table staff-table">
        <div class="data-head">
            <span>Nombre</span>
            <span>Rol</span>
            <span>Estado</span>
            <span>Último acceso</span>
        </div>
        @foreach ([['Ana Torres','Cajero(a)','Activo','09:10 a. m.'],['Juan Pérez','Mesero(a)','Activo','08:45 a. m.'],['Carlos López','Cocinero','Activo','09:12 a. m.'],['María López','Encargado de inventario','Activo','08:30 a. m.'],['Luis García','Administrador','Activo','07:50 a. m.']] as $person)
            <button class="data-row" data-mock-action="perfil de {{ $person[0] }} abierto">
                <span class="person-name"><i>{{ mb_substr($person[0], 0, 1) }}</i>{{ $person[0] }}</span>
                <span>{{ $person[1] }}</span>
                <span class="pill green">{{ $person[2] }}</span>
                <small>{{ $person[3] }}</small>
            </button>
        @endforeach
    </div>
</section>
@endsection