57 lines
3.2 KiB
PHP
57 lines
3.2 KiB
PHP
<div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-{{ $comment->id }}">
|
|
<img src="{{ $comment->user->avatar_url }}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;" alt="{{ $comment->user->name }}">
|
|
<div style="flex: 1;">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
|
|
<span style="font-weight: 600; font-size: 14px;">{{ $comment->user->name }}</span>
|
|
<span style="color: var(--text-secondary); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
<div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
|
|
{{ $comment->body }}
|
|
</div>
|
|
<div style="display: flex; gap: 12px; margin-top: 8px;">
|
|
@auth
|
|
<button onclick="toggleReplyForm({{ $comment->id }})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
|
|
Reply
|
|
</button>
|
|
@if(Auth::id() === $comment->user_id)
|
|
<button onclick="deleteComment({{ $comment->id }})" style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
|
|
Delete
|
|
</button>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
|
|
<!-- Reply Form -->
|
|
<div id="replyForm{{ $comment->id }}" style="display: none; margin-top: 12px;">
|
|
<div style="display: flex; gap: 8px;">
|
|
<textarea
|
|
class="form-control"
|
|
placeholder="Write a reply..."
|
|
rows="2"
|
|
style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: none; font-size: 14px;"
|
|
></textarea>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
|
|
<button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;" onclick="toggleReplyForm({{ $comment->id }})">Cancel</button>
|
|
<button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;" onclick="submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">Reply</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Replies -->
|
|
@if($comment->replies && $comment->replies->count() > 0)
|
|
<div style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color); padding-left: 12px;">
|
|
@foreach($comment->replies as $reply)
|
|
@include('videos.partials.comment', ['comment' => $reply, 'video' => $video ?? null])
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleReplyForm(commentId) {
|
|
const form = document.getElementById('replyForm' + commentId);
|
|
form.style.display = form.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
</script>
|