<div class="infobar scroll-content">

    <div id="widgetarea">

        <div class="widget" id="widget-sparkline">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#sparklinestats"><h4>Sparkline Stats</h4></a>
            </div>
            <div id="sparklinestats" class="collapse in">
                <div class="widget-body">
                    <ul class="sparklinestats">
                        <li>
                            <div class="title">Earnings</div>
                            <div class="stats">$22,500</div>
                            <div class="sparkline" id="infobar-earningsstats" style="100%"></div>
                        </li>
                        <li>
                            <div class="title">Orders</div>
                            <div class="stats">4,750</div>
                            <div class="sparkline" id="infobar-orderstats" style="100%"></div>
                        </li>
                    </ul>
                    <a href="#" class="more">More Sparklines</a>
                </div>
            </div>
        </div>

        <div class="widget">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#recentactivity"><h4>Recent Activity</h4></a>
            </div>
            <div id="recentactivity" class="collapse in">
                <div class="widget-body">
                    <ul class="recent-activities">
                        <li>
                            <div class="avatar">
                                <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Jean Alanis</a> invited 3 unconfirmed members</span>
                                <span class="time">2 mins ago</span>
                                
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="{{'demo/avatar/avatar_09.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Anthony Ware</a> is now following you</span>
                                <span class="time">4 hours ago</span>
                                
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="{{'demo/avatar/avatar_04.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Bruce Ory</a> commented on <a href="#">Dashboard UI</a></span>
                                <span class="time">16 hours ago</span>
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="{{'demo/avatar/avatar_01.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Roxann Hollingworth</a>is now following you</span>
                                <span class="time">Feb 13, 2015</span>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="more">See all activities</a>
                </div>
            </div>
        </div>

        <div class="widget" >
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#widget-milestones"><h4>Milestones</h4></a>
            </div>
            <div id="widget-milestones" class="collapse in">
                <div class="widget-body">
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">UI Design</div>
                            <div class="progress-percentage">12/16</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-lime" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">UX Design</div>
                            <div class="progress-percentage">8/24</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-orange" style="width: 33.3%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">Frontend Development</div>
                            <div class="progress-percentage">8/40</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-purple" style="width: 20%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress m0">
                        <div class="clearfix">
                            <div class="progress-title">Backend Development</div>
                            <div class="progress-percentage">24/48</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
                        </div>
                    </div>
                    <a href="#" class="more">See All</a>
                </div>
            </div>
        </div>

        <div class="widget">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#widget-contact"><h4>Contacts</h4></a>
            </div>
            <div id="widget-contact" class="collapse in">
                <div class="widget-body">
                    <ul class="contact-list">
                        <li id="contact-1">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_02.png' | asset_url | img_loc }}" alt=""><span>Jeremy Potter</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-1">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Jeremy Potter</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-2">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_07.png' | asset_url | img_loc }}" alt=""><span>David Tennant</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-2">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">David Tennant</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-3">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_03.png' | asset_url | img_loc }}" alt=""><span>Anna Johansson</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-3">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Anna Johansson</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-4">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_09.png' | asset_url | img_loc }}" alt=""><span>Alan Doyle</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-4">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Alan Doyle</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-5">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_05.png' | asset_url | img_loc }}" alt=""><span>Simon Corbett</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-5">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Simon Corbett</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-6">
                            <a href="javascript:;"><img src="{{'demo/avatar/avatar_01.png' | asset_url | img_loc }}" alt=""><span>Polly Paton</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-6">
                                <div class="avatar">
                                    <img src="{{'demo/avatar/avatar_11.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Polly Paton</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                    </ul>
                    <a href="#" class="more">See All</a>
                </div>
            </div>
        </div>
    </div>
</div>