@extends('layouts.private')

@section('content')

    <div class="container">
        <div class="row border mt-4 bg-white">
            <div class="col-sm-3 border-right">
                <div class="row py-3 border-bottom">
                    <div class="col-sm-12">
                        Conversation option goes here
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1" style="background-color: #daedf4;">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/deepika.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Deeksha Singhal</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row border-bottom pt-3 pb-1">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3">
                                <img src="/images/pragyan.jpg" width="60" height="60" class="rounded-circle mb-3 bg-primary" />
                            </div>
                            <div class="col-sm-9">
                                <strong>Prady Shah</strong><br/><span class="small">1/20/2020 4:30am: </span>
                                <span class="small">This is the last messsage from the message inbox...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="row py-3 border-bottom">
                    <div class="col-sm-12">
                        conversation search goes here
                    </div>
                </div>
                <div class="row h-100 pb-4">
                    <div class="col-sm-8 h-100">
                        <div class="row py-3">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-1">
                                        <img src="/images/pragyan.jpg" width="40" height="40" class="rounded-circle mb-3 bg-primary" />
                                    </div>
                                    <div class="col-sm-11">
                                        <strong>Prady Shah</strong> &middot; <span class="small">1/20/2020 4:30am</span><br/>
                                        <p style="font-weight: 100;">
                                            Completed detailed message is displayed over here.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row py-3">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-1">
                                        <img src="/images/deepika.jpg" width="40" height="40" class="rounded-circle mb-3 bg-primary" />
                                    </div>
                                    <div class="col-sm-11">
                                        <strong>You</strong> &middot; <span class="small">1/20/2020 4:30am</span><br/>
                                        <p style="font-weight: 100;">
                                            Completed detailed message is displayed over here.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="row py-3 border-top" style="margin-top: 440px;">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-10">
                                        <textarea class="form-control" style="height:100px;" placeholder="Enter your message"></textarea>
                                    </div>
                                    <div class="col-sm-2 h-100 p-0 m-0">
                                        <button class="btn btn-primary btn-lg" style="height: 100px">Send</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="col-sm-4 border-left" style="margin-bottom: 28px;">
                        <div class="row py-3 border-bottom">
                            <div class="col-sm-12">
                                <h4 class="p-0 m-0"><strong>Deeksha Singhal</strong></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection