<div class="card shadow-sm mb-3" id="post-{{ $post->id }}">
    <div class="card-body pb-2">

        {{-- Cabecera --}}
        <div class="d-flex align-items-center mb-2">
            <a href="{{ route('social.profile', $post->author) }}">
                <img src="{{ $post->author->profile_photo_url }}"
                     class="rounded-circle mr-2" width="40" height="40" style="object-fit:cover">
            </a>
            <div class="flex-grow-1">
                <a href="{{ route('social.profile', $post->author) }}" class="font-weight-bold text-dark d-block">
                    {{ $post->author->name }} {{ $post->author->apellidoPaterno }}
                </a>
                <small class="text-muted">{{ $post->created_at->diffForHumans() }}</small>
            </div>
            @if($post->user_id === auth()->id())
                <form action="{{ route('posts.destroy', $post) }}" method="POST"
                      onsubmit="return confirm('¿Eliminar publicación?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm text-muted" title="Eliminar">
                        <i class="fas fa-trash-alt fa-sm"></i>
                    </button>
                </form>
            @endif
        </div>

        {{-- Contenido --}}
        @if($post->body)
            <p class="mb-2">{{ $post->body }}</p>
        @endif

        @if($post->image_path)
            <img src="{{ \Illuminate\Support\Facades\Storage::url($post->image_path) }}"
                 class="img-fluid rounded mb-2" style="max-height:500px; width:100%; object-fit:cover; cursor:pointer"
                 onclick="window.open(this.src,'_blank')">
        @endif

        {{-- Contadores --}}
        <div class="d-flex align-items-center text-muted small border-top pt-2">
            <span class="mr-3">
                <i class="fas fa-heart text-danger mr-1"></i>
                <span id="like-count-{{ $post->id }}">{{ $post->likes->count() }}</span> Me gusta
            </span>
            <span>
                <i class="fas fa-comment mr-1"></i>
                {{ $post->comments->count() }} comentarios
            </span>
        </div>
    </div>

    {{-- Botones de acción --}}
    <div class="card-footer bg-white py-1 d-flex border-top-0">
        @php $liked = $post->isLikedBy(auth()->user()); @endphp
        <button class="btn btn-sm flex-fill like-btn {{ $liked ? 'text-danger' : 'text-muted' }}"
                data-post-id="{{ $post->id }}">
            <i class="{{ $liked ? 'fas' : 'far' }} fa-heart mr-1"></i>
            Me gusta (<span class="like-count">{{ $post->likes->count() }}</span>)
        </button>
        <button class="btn btn-sm flex-fill text-muted toggle-comments" data-post-id="{{ $post->id }}">
            <i class="far fa-comment mr-1"></i> Comentar
        </button>
    </div>

    {{-- Sección de comentarios --}}
    <div id="comments-{{ $post->id }}" class="d-none px-3 pb-3">
        <div id="comment-list-{{ $post->id }}" class="mb-2">
            @foreach($post->comments as $comment)
                <div class="d-flex align-items-start mb-2">
                    <img src="{{ $comment->author->profile_photo_url }}"
                         class="rounded-circle mr-2" width="28" height="28" style="object-fit:cover">
                    <div class="bg-light rounded px-2 py-1 flex-grow-1">
                        <strong class="small">{{ $comment->author->name }}</strong>
                        <div class="small">{{ $comment->body }}</div>
                    </div>
                </div>
            @endforeach
        </div>
        <form class="comment-form d-flex" data-post-id="{{ $post->id }}">
            @csrf
            <img src="{{ auth()->user()->profile_photo_url }}"
                 class="rounded-circle mr-2" width="28" height="28" style="object-fit:cover">
            <input type="text" name="body" class="form-control form-control-sm rounded-pill"
                   placeholder="Escribe un comentario...">
        </form>
    </div>
</div>
