@extends('layouts.app')

@section('title', $user->name . '\'s Profile')

@section('content')
<div class="container py-4">
  <div class="row">

    {{-- Profile Card --}}
    <div class="col-md-4 mb-3">
      <div class="card p-3 text-center shadow-sm">
        <img 
          src="{{ $user->avatar 
                ? asset('storage/' . $user->avatar) 
                : 'https:
          class="rounded-circle mb-3" 
          style="width:150px;height:150px;object-fit:cover;"
          alt="{{ $user->name }}">

        <h4>{{ $user->name }}</h4>

        @if(auth()->check() && auth()->id() === $user->id)
          <p class="text-muted">{{ $user->email }}</p>
        @endif

        <p>{{ $user->bio ?? 'This user has not added a bio yet.' }}</p>
      </div>
    </div>

    {{-- Posts --}}
    <div class="col-md-8">
      <h5 class="mb-3">Posts by {{ $user->name }}</h5>

      @forelse($posts as $post)
        <div class="card mb-3 shadow-sm">
          <div class="card-body">

            {{-- Post Title (TEXT ONLY) --}}
            <h6 class="mb-1">{{ $post->title }}</h6>

            <p class="small text-muted mb-3">
              {{ $post->created_at->format('M d, Y') }}
            </p>

            <p class="mb-3">
              {{ \Illuminate\Support\Str::limit(strip_tags($post->body), 180) }}
            </p>

            {{-- View Post Button --}}
            <a href="{{ route('posts.show', $post->id) }}" class="btn btn-view-post">
              View Post
            </a>

          </div>
        </div>
      @empty
        <p class="text-muted">No posts yet.</p>
      @endforelse

      <div class="mt-3">
        {{ $posts->links() }}
      </div>
    </div>

  </div>
</div>
@endsection