@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="px-4 py-3">
        <p class="text-xs font-bold uppercase tracking-widest text-slate-400">Listado de Usuarios (6)</p>
    </div>
    <div class="px-4 space-y-3">
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 size-12 font-bold text-lg">
                RA
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">Roberto Alarcón</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-purple-50 dark:bg-purple-900/20 px-2 py-1 text-xs font-medium text-purple-700 dark:text-purple-300 ring-1 ring-inset ring-purple-700/10">Administrador</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-12 font-bold text-lg">
                MV
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">María Velázquez</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-blue-50 dark:bg-blue-900/20 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-inset ring-blue-700/10">Operador</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-12 font-bold text-lg">
                JL
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">Juan López</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-emerald-50 dark:bg-emerald-900/20 px-2 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-700/10">Conductor</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-12 font-bold text-lg">
                CG
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">Carlos Gómez</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-emerald-50 dark:bg-emerald-900/20 px-2 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-700/10">Conductor</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-12 font-bold text-lg">
                AM
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">Ana Martínez</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-emerald-50 dark:bg-emerald-900/20 px-2 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-700/10">Conductor</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
        <div
            class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm transition-colors active:bg-slate-50">
            <div
                class="flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-12 font-bold text-lg">
                SP
            </div>
            <div class="flex-1">
                <p class="text-base font-semibold">Sergio Pérez</p>
                <div class="flex items-center gap-2">
                    <span
                        class="inline-flex items-center rounded-md bg-blue-50 dark:bg-blue-900/20 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-inset ring-blue-700/10">Operador</span>
                </div>
            </div>
            <button class="text-primary font-medium text-sm px-3 py-1 bg-primary/5 rounded-lg">Editar</button>
        </div>
    </div>

    <a href="{{ route('settings.user_systems.create') }}"
        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/40 flex items-center justify-center z-40">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
@endsection