@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="bg-white rounded-lg shadow-md p-6">
    <h1 class="text-3xl font-bold mb-6">Admin Dashboard</h1>
    
    <div class="mb-6">
        <a href="{{ route('admin.users.create') }}" 
           class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            Create New User
        </a>
    </div>

    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <h2 class="text-xl font-semibold p-4 bg-gray-50">Users List</h2>
        <ul class="divide-y divide-gray-200">
            @foreach($users as $user)
            <li class="p-4 hover:bg-gray-50">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="text-lg font-medium">{{ $user->name }}</h3>
                        <p class="text-gray-600">{{ $user->email }}</p>
                    </div>
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
                        {{ $user->role }}
                    </span>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@endsection