@extends('layouts.app')

@section('title')
    All Threads
@endsection

@section('description')
    All threads is here.
@endsection

@section('breadcrumb')
    <li class="active"><a href="/threads">All Threads</a></li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        @forelse ($threads as $thread)        
        <div class="box box-widget">
            <div class="box-body">
                <!-- Post -->
                <div class="post">
                    <div class="user-block">
                    <h3>{{ $thread->title }}</h3>
                    <img class="img-circle img-bordered-sm" src="/dist/img/user1-128x128.jpg" alt="user image">
                        <span class="username">
                            <a href="#">{{ $thread->creator->name }}</a>
                        </span>
                    <span class="description">Shared publicly - {{ $thread->created_at->diffForHumans() }}</span>
                    </div>
                    <!-- /.user-block -->
                    <p>{{ $thread->body }}</p><a href="{{ $thread->path() }}"> more..</a>
                    <ul class="list-inline">
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
                    </li>
                    <li class="pull-right">
                        <a href="{{ $thread->path() }}" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
                        ({{ $thread->replies_count }})</a></li>
                    </ul>

                    <!-- /.box-footer -->
                    <div class="box-footer">
                        <form action="#" method="post">
                        <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 type="text" class="form-control input-sm" placeholder="Press enter to post comment">
                        </div>
                        </form>
                    </div>
                    <!-- /.box-footer -->
                </div>
                <!-- /.post -->
            </div>
        </div>
        @empty
            <p>There are no relevant results at this time.</p>
        @endforelse
    </div>
</div>
@endsection