@extends('layouts.layout')
@push('styles')
    <style>
        .badge {
            padding: 0.5rem;
            font-size: 1rem;
            border-radius: 0.25rem;
        }

        .badge-success {
            background-color: #28a745;
            color: white;
        }

        .badge-warning {
            background-color: #ffc107;
            color: black;
        }

        .badge-danger {
            background-color: #dc3545;
            color: white;
        }

        .legend {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .fast {
            background-color: #28a745
        }

        .average {
            background-color: #ffc107
        }

        .slow {
            background-color: #dc3545
        }

        .legend-item {
            width: 15px;
            height: 15px;
            display: inline-block;
            border-radius: 3px;
        }
    </style>
@endpush

@section('content')
    <userdetailcomponent :user_data="{{ json_encode($user_data) }}"
        :show_init_password="{{ json_encode($show_init_password) }}"></userdetailcomponent>
@endsection