@extends('layouts.app')
@section('content')
<div class="mb-6 flex items-center justify-between">
  <h1 class="text-lg font-semibold">اقتراحات مخصصة</h1>
  <form method="POST" action="" onsubmit="localStorage.removeItem('recoCache');location.reload();return false;">
    <button class="text-sm text-green-700 hover:underline" type="submit">تحديث النتائج</button>
  </form>
</div>
<div class="grid md:grid-cols-3 gap-4">
@foreach($users as $u)
  <div class="bg-white dark:bg-brand-dark-card shadow rounded p-4 flex flex-col">
    <div class="flex items-center gap-3 mb-3">
      <div class="w-12 h-12 rounded-full overflow-hidden bg-gray-200 flex items-center justify-center text-xs">
        @if($u->avatar_path || $u->avatar)
          <img src="{{ asset('storage/'.($u->avatar_path ?? $u->avatar)) }}" alt="avatar" class="w-full h-full object-cover" />
        @else
          <span class="text-gray-500">لا صورة</span>
        @endif
      </div>
      <div>
        <p class="font-medium text-sm">{{ $u->name }}</p>
        <p class="text-[11px] text-gray-500">درجة التوافق: <span class="font-semibold text-green-600">{{ $u->match_score }}%</span></p>
      </div>
    </div>
    <p class="text-xs text-gray-600 line-clamp-3 flex-1">{{ Str::limit($u->about_me ?? $u->bio, 120) }}</p>
    <a href="{{ route('profile.show', $u->id) }}" class="mt-3 text-xs text-blue-600 hover:underline">عرض الملف</a>
  </div>
@endforeach
</div>
<div class="mt-6">{{ $users->links() }}</div>
@endsection