@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-8 py-10">
    <h1 class="text-3xl font-bold text-white mb-8">Manage Profiles</h1>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        @foreach(auth()->user()->profiles as $profile)
        <div class="text-center text-gray-200">
            <div class="w-24 h-24 bg-gray-700 rounded-full mx-auto text-4xl flex items-center justify-center">
                {{ strtoupper(substr($profile->name,0,1)) }}
            </div>
            <p class="mt-2">{{ $profile->name }}</p>
        </div>
        @endforeach

        <a href="/profiles/create" class="flex items-center justify-center border border-gray-600 rounded-lg p-6 hover:bg-gray-800">
            <span class="text-4xl text-gray-400">+</span>
        </a>
    </div>
</div>
@endsection