@extends('layouts.app')

@section('title')
    Thread: {{ $thread->title }}
@endsection

@section('description')
    
@endsection

@section('breadcrumb')
    <li><a href="/threads">All Threads</a></li>
    <li class=active"">{{ $thread->id }}</a></li>
@endsection

@section('content')
<div class="row">
<div class="col-md-12">
    <!-- Box Comment -->
    <div class="box box-widget">
    <div class="box-header with-border">
        <div class="user-block">
        <img class="img-circle" src="/dist/img/user1-128x128.jpg" alt="User Image">
        <span class="username"><a href="{{ $thread->creator->path() }}">{{ $thread->creator->name }}</a></span>
        <span class="description">Shared publicly - {{ $thread->created_at->diffForHumans() }}</span>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <p>{{ $thread->body }}</p>

        <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
        <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
        <span class="pull-right text-muted">2 {{ $thread->likes_count }} {{ str_plural('like', $thread->likes_count) }} - {{ $thread->comments_count }} {{ str_plural('comment', $thread->comments_count) }}</span>
    </div>
    <!-- /.box-body -->
    <!-- /.box-footer -->
    <div class="box-footer">
        <form action="/threads/{{ $thread->id }}/comments" method="post">
        {{ csrf_field() }}
        <img class="img-responsive img-circle img-sm" src="/dist/img/user4-128x128.jpg" alt="Alt Text">
        <!-- .img-push is used to add margin to elements next to floating images -->
        <div class="img-push">
            <input id="body" name="body" type="text" class="form-control input-sm" placeholder="Press enter to post comment">
        </div>
        </form>
    </div>
    <!-- /.box-footer -->     
    <div class="box-footer box-comments">
        @foreach ($thread->comments as $comment)
        <div class="box-comment">
        <!-- User image -->
        <img class="img-circle img-sm" src="/dist/img/user3-128x128.jpg" alt="User Image">

        <div class="comment-text">
                <span class="username">
                <a href="{{ $comment->owner->path() }}">{{ $comment->owner->name }}</a>
                <span class="text-muted pull-right">{{ $comment->created_at->diffForHumans() }}</span>
                </span><!-- /.username -->
                    {{ $comment->body }}
                </span>
        </div>
        <!-- /.comment-text -->
        </div>
        <!-- /.box-comment -->
        @endforeach
    </div>

    </div>
    <!-- /.box -->
</div>
<!-- /.col -->
</div>
@endsection