<div class="infobar scroll-content">

    <div class="widget">
        <div class="widget-heading">
            <a href="javascript:;" data-toggle="collapse" data-target="#chatbody-fav"><h4>Favorites</h4></a>
        </div>
        <div class="collapse in" id="chatbody-fav">
            <div class="widget-body">
                <ul class="chat-users m-n">
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_02.png' | asset_url | img_loc }}" alt=""><span>Jeremy Potter</span></a></li>
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_07.png' | asset_url | img_loc }}" alt=""><span>David Tennant</span></a></li>
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_03.png' | asset_url | img_loc }}" alt=""><span>Anna Johansson</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_09.png' | asset_url | img_loc }}" alt=""><span>Alan Doyle</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_05.png' | asset_url | img_loc }}" alt=""><span>Simon Corbett</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_01.png' | asset_url | img_loc }}" alt=""><span>Polly Paton</span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="widget">
        <div class="widget-heading">
            <a href="javascript:;" data-toggle="collapse" data-target="#chatbody-all"><h4>Online Contacts</h4></a>
        </div>
        <div class="collapse in" id="chatbody-all">
            <div class="widget-body">
                <ul class="chat-users m-n">
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_02.png' | asset_url | img_loc }}" alt=""><span>Jeremy Potter</span></a></li>
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_07.png' | asset_url | img_loc }}" alt=""><span>David Tennant</span></a></li>
                    <li data-stats="online"><a href="javascript:;"><img src="{{'demo/avatar/avatar_03.png' | asset_url | img_loc }}" alt=""><span>Anna Johansson</span></a></li>
                    <li data-stats="busy">  <a href="javascript:;"><img src="{{'demo/avatar/avatar_04.png' | asset_url | img_loc }}" alt=""><span>Eric Jackson</span></a></li>
                    <li data-stats="away">  <a href="javascript:;"><img src="{{'demo/avatar/avatar_08.png' | asset_url | img_loc }}" alt=""><span>Howard Jobs</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_10.png' | asset_url | img_loc }}" alt=""><span>Annie Watson</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_09.png' | asset_url | img_loc }}" alt=""><span>Alan Doyle</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_05.png' | asset_url | img_loc }}" alt=""><span>Simon Corbett</span></a></li>
                    <li data-stats="offline"><a href="javascript:;"><img src="{{'demo/avatar/avatar_01.png' | asset_url | img_loc }}" alt=""><span>Polly Paton</span></a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="chat-area" style="display:none;">
        <div class="chat-user">
            <a id="hidechatbtn" class="btn btn-default btn-sm"><i class="fa fa-angle-left"></i></a>
            <span class="user">
                <span class="name">Jeremy Potter</span>
                <img src="{{'demo/avatar/avatar_02.png' | asset_url | img_loc }}" alt="" class="avatar">
            </span>
            
        </div>
        <div class="chat-history">
            <div class="chat-msg">
                <p>Hey! How's it going?</p>
                <span class="timestamp">1:20:42 PM</span>
            </div>
            <div class="chat-msg sent">
                <p>Not bad... i guess. What about you? Haven't gotten any updates from you in a long time.</p>
                <span class="timestamp">1:20:46 PM</span>
            </div>
            <div class="chat-msg">
                <p>Yeah! I've been a bit busy lately. I'll get back to you soon enough.</p>
                <span class="timestamp">1:20:54 PM</span>
            </div>
            <div class="chat-msg sent">
                <p>Alright, take care then.</p>
                <span class="timestamp">1:21:01 PM</span>
            </div>
        </div>
        <div class="chat-input">
            <textarea name="" rows="2"></textarea>
        </div>
    </div>

</div>