{% extends "layouts/default.html" %}

{% block title %} Blank Page {% endblock title %}

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="full-container">
        <div class="peers fxw-nw pos-r">
        <!-- Sidebar -->
        <div class="peer bdR" id="chat-sidebar">
            <div class="layers h-100">
            <!-- Search -->
            <div class="bdB layer w-100">
                <input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
            </div>

            <!-- List -->
            <div class="layer w-100 fxg-1 scrollable pos-r">
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
                    <small class="lh-1 c-green-500">Online</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
                    <small class="lh-1 c-amber-500">Away</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
                    <small class="lh-1 c-grey-500">Offline</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
                    <small class="lh-1 c-red-500">Busy</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
                    <small class="lh-1 c-green-500">Online</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
                    <small class="lh-1 c-amber-500">Away</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
                    <small class="lh-1 c-grey-500">Offline</small>
                </div>
                </div>
                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
                <div class="peer">
                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
                </div>
                <div class="peer peer-greed pL-20">
                    <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
                    <small class="lh-1 c-red-500">Busy</small>
                </div>
                </div>
            </div>
            </div>
        </div>

        <!-- Chat Box -->
        <div class="peer peer-greed" id="chat-box">
            <div class="layers h-100">
            <div class="layer w-100">
                <!-- Header -->
                <div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
                <div class="peers ai-c">
                    <div class="peer d-n@md+">
                    <a href="" title="" id="chat-sidebar-toggle" class="td-n c-grey-900 cH-blue-500 mR-30">
                        <i class="ti-menu"></i>
                    </a>
                    </div>
                    <div class="peer mR-20">
                    <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
                    </div>
                    <div class="peer">
                    <h6 class="lh-1 mB-0">John Doe</h6>
                    <i class="fsz-sm lh-1">Typing...</i>
                    </div>
                </div>
                <div class="peers">
                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
                    <i class="ti-video-camera"></i>
                    </a>
                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
                    <i class="ti-headphone"></i>
                    </a>
                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
                    <i class="ti-more"></i>
                    </a>
                </div>
                </div>
            </div>
            <div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
                <!-- Chat Box -->
                <div class="p-20 gapY-15">
                <!-- Chat Conversation -->
                <div class="peers fxw-nw">
                    <div class="peer mR-20">
                    <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
                    </div>
                    <div class="peer peer-greed">
                    <div class="layers ai-fs gapY-5">
                        <div class="layer">
                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
                            <div class="peer mR-10">
                            <small>10:00 AM</small>
                            </div>
                            <div class="peer-greed">
                            <span>Lorem Ipsum is simply dummy text of</span>
                            </div>
                        </div>
                        </div>
                        <div class="layer">
                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
                            <div class="peer mR-10">
                            <small>10:00 AM</small>
                            </div>
                            <div class="peer-greed">
                            <span>the printing and typesetting industry.</span>
                            </div>
                        </div>
                        </div>
                        <div class="layer">
                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
                            <div class="peer mR-10">
                            <small>10:00 AM</small>
                            </div>
                            <div class="peer-greed">
                            <span>Lorem Ipsum has been the industry's</span>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>

                <!-- Chat Conversation -->
                <div class="peers fxw-nw ai-fe">
                    <div class="peer ord-1 mL-20">
                    <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
                    </div>
                    <div class="peer peer-greed ord-0">
                    <div class="layers ai-fe gapY-10">
                        <div class="layer">
                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
                            <div class="peer mL-10 ord-1">
                            <small>10:00 AM</small>
                            </div>
                            <div class="peer-greed ord-0">
                            <span>Heloo</span>
                            </div>
                        </div>
                        </div>
                        <div class="layer">
                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
                            <div class="peer mL-10 ord-1">
                            <small>10:00 AM</small>
                            </div>
                            <div class="peer-greed ord-0">
                            <span>??</span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
            <div class="layer w-100">
                <!-- Chat Send -->
                <div class="p-20 bdT bgc-white">
                <div class="pos-r">
                    <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
                    <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
                    <i class="fa fa-paper-plane-o"></i>
                    </button>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>

{% endblock content %}