@extends('layouts.app')

@section('title', 'Members')

@section('content')
<div class="container py-4">
  <h2 class="mb-4 text-center fw-bold">Members</h2>

  <div class="row">
    @foreach($users as $user)
      <div class="col-md-3 mb-4">
        <div class="card h-100 text-center shadow-sm">
          <a href="{{ route('members.show', $user->id) }}">
            <img 
              src="{{ $user->avatar 
                    ? asset('storage/' . $user->avatar) 
                    : 'https:
              class="card-img-top" 
              style="height:200px;object-fit:cover;"
              alt="{{ $user->name }}">
          </a>

          <div class="card-body p-3">
            {{-- اسم العضو في لابل بيضاوي أنيق --}}
            <h5 class="card-title mb-2">
              <a href="{{ route('members.show', $user->id) }}" 
                 class="badge rounded-pill bg-dark text-white px-3 py-2 text-decoration-none fs-6">
                 {{ $user->name }}
              </a>
            </h5>

            <p class="small text-muted mb-1">{{ $user->posts_count }} Posts</p>
            <p class="small text-truncate">{{ $user->bio ?? 'No bio yet' }}</p>
          </div>
        </div>
      </div>
    @endforeach
  </div>

  <div class="mt-4">
    {{ $users->links() }}
  </div>
</div>
@endsection