@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- Blog Content-->
        <div class="col-xl-9">
            <div class="card card-default">
                <div class="card-header">
                    <div class="bb">
                        <h2 class="text-lg mt-3">Maecenas rutrum fringilla vehicula.</h2>
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="">Erica Castro</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>56</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="card-body text-md">
                    <p>
                        Praesent bibendum eros urna, in mattis est. Curabitur a purus urna, sit amet auctor erat. Praesent pellentesque augue eu tellus facilisis pretium. Aenean sollicitudin facilisis
                        tortor eu mollis. Vivamus feugiat faucibus enim. Sed ut semper leo. Etiam feugiat risus massa. Nunc et magna in metus pharetra ultricies ac sit amet justo. Donec eu dolor sem,
                        non auctor sapien. Suspendisse nisl nulla, interdum at fermentum eget, adipiscing in elit.
                    </p>
                    <p>
                        Proin est sapien, convallis non hendrerit nec, laoreet ut ipsum. Praesent blandit venenatis mauris ac cursus. Nulla commodo interdum magna consectetur lacinia. Maecenas vitae
                        adipiscing mauris. Nam sodales sollicitudin adipiscing.
                    </p>
                    <br />
                    <div class="row">
                        <div class="col-3">
                            <a href=""><img class="img-fluid" src="/img/bg4.jpg" alt="demo" /></a>
                        </div>
                        <div class="col-3">
                            <a href=""><img class="img-fluid" src="/img/bg5.jpg" alt="demo" /></a>
                        </div>
                        <div class="col-3">
                            <a href=""><img class="img-fluid" src="/img/bg7.jpg" alt="demo" /></a>
                        </div>
                        <div class="col-3">
                            <a href=""><img class="img-fluid" src="/img/bg8.jpg" alt="demo" /></a>
                        </div>
                    </div>
                    <br />
                    <p>
                        Praesent tristique dui eu nunc fringilla et iaculis magna ornare. Proin sed erat sit amet metus rhoncus tincidunt. Vivamus commodo, tortor ut interdum posuere, urna risus
                        aliquet purus, eu fringilla dui neque quis nisi. Proin posuere gravida ipsum, a pretium augue commodo eget. In id elit nulla. Donec nec magna a diam eleifend facilisis non in
                        urna. Nam enim libero, lacinia a tristique a, accumsan sed purus. Phasellus ullamcorper rhoncus sagittis.
                    </p>
                    <p>
                        Sed eu rhoncus magna. Morbi non dui elementum nisl ultrices tincidunt. Nullam sagittis hendrerit erat, sit amet gravida ante tristique non. Nam arcu quam, aliquet eget varius
                        sed, placerat et elit. Morbi nec luctus eros. Cras rutrum scelerisque auctor. Praesent malesuada erat ut tellus egestas sagittis. Etiam feugiat risus massa. Aliquam eget turpis
                        eget dui eleifend suscipit ac sed dolor. Sed accumsan adipiscing enim. Sed auctor dignissim fringilla. Sed id turpis tellus. Nam vel tristique dolor. Ut scelerisque ligula
                        tellus. Duis accumsan, est vel convallis dignissim, est massa pharetra ipsum, eu auctor nunc mi ac libero. Integer fermentum molestie massa at congue. Vestibulum congue tempus
                        odio ac posuere. Integer lorem metus, rutrum non rhoncus sed, fringilla interdum urna.
                    </p>
                    <hr class="my-4" />
                    <div class="btn-group" role="group" aria-label="...">
                        <button class="btn btn-secondary" type="button"><em class="fab fa-facebook-f text-muted"></em></button>
                        <button class="btn btn-secondary" type="button"><em class="fab fa-twitter text-muted"></em></button>
                        <button class="btn btn-secondary" type="button"><em class="fab fa-google-plus-g text-muted"></em></button>
                        <button class="btn btn-secondary" type="button"><em class="fa fa-tumblr text-muted"></em></button>
                        <button class="btn btn-secondary" type="button"><em class="fa fa-pinterest text-muted"></em></button>
                        <button class="btn btn-secondary" type="button"><em class="fa fa-share-alt text-muted"></em></button>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">3 Comments</div>
                <div class="card-body">
                    <div class="media">
                        <img class="mr-3 rounded-circle thumb64" src="/img/user/01.jpg" alt="demo" />
                        <div class="media-body">
                            <h4>
                                <a href="">Susan Grant</a>
                                <small>10 min</small>
                            </h4>
                            <p>
                                Donec ac massa tortor. In hac habitasse platea dictumst. Nam blandit fringilla faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisi eget
                                metus semper congue.
                            </p>
                            <p>Fusce ullamcorper placerat tortor, placerat consequat diam cursus posuere.</p>
                        </div>
                    </div>
                    <hr />
                    <div class="media">
                        <img class="mr-3 rounded-circle thumb64" src="/img/user/03.jpg" alt="demo" />
                        <div class="media-body mb-3">
                            <h4>
                                <a href="">Dustin Dunn</a>
                                <small>20 min</small>
                            </h4>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                            Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            <hr />
                            <div class="media">
                                <img class="mr-3 rounded-circle thumb64" src="/img/user/06.jpg" alt="demo" />
                                <div class="media-body">
                                    <h4 id="nested-media-heading">
                                        <a href="">Marcus Gomez</a>
                                        <small>1 hour</small>
                                    </h4>
                                    Integer ac nisl et urna gravida malesuada. Vivamus fermentum libero vel felis aliquet interdum.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <em class="fas fa-pencil-alt mr-2"></em>
                    Add your Comment
                </div>
                <div class="card-body">
                    <form class="form-horizontal" action="/">
                        <div class="form-group row">
                            <div class="col-6"><input class="form-control" id="post-firstname" type="text" name="post-firstname" placeholder="Your firstname" /></div>
                            <div class="col-6"><input class="form-control" id="post-lastname" type="text" name="post-lastname" placeholder="Your lastname" /></div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12"><textarea class="form-control" id="post-comment" name="post-comment" rows="4" placeholder="Comment here.."></textarea></div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12"><button class="btn btn-primary" type="button">Send Comment</button></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Blog Sidebar-->
        <div class="col-xl-3">
            <div class="row">
                <div class="col-12">
                    <!-- Search-->
                    <div class="card card-default">
                        <div class="card-header">Search</div>
                        <div class="card-body">
                            <form class="form-horizontal">
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder="Search for..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-secondary" type="button"><em class="fa fa-search"></em></button>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-4 col-xl-12">
                    <!-- Categories-->
                    <div class="card card-default">
                        <div class="card-header">Categories</div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li>
                                    <a href="">
                                        <em class="fa fa-angle-right fa-fw"></em>
                                        Smartphones
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <em class="fa fa-angle-right fa-fw"></em>
                                        Mobiles
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <em class="fa fa-angle-right fa-fw"></em>
                                        Tech
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <em class="fa fa-angle-right fa-fw"></em>
                                        Inpiration
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <em class="fa fa-angle-right fa-fw"></em>
                                        Workspace
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-4 col-xl-12">
                    <!-- Tag Cloud-->
                    <div class="card card-default">
                        <div class="card-header">Tag Cloud</div>
                        <div class="card-body">
                            <div class="mw-100" id="jqcloud"></div>
                        </div>
                    </div>
                </div>
                <div class="col-4 col-xl-12">
                    <!-- Ads-->
                    <div class="card card-default">
                        <div class="card-header">Ads</div>
                        <div class="card-body ie-fix-flex">
                            <a href=""><img class="img-fluid img-thumbnail" src="/img/mockup.png" alt="demo" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/jqcloud.js') }}"></script>
@endsection
