{% include header %}
    <!-- The following CSS are included as plugins and can be removed if unused-->
    {% block styles %}{% endblock %}
    </head>

    <body class="infobar-overlay infobar-active">
        {% include analytics %}
        {% include headerbar %}
        {% include topnav %}

        <div id="wrapper">
            <div id="layout-static">
                <div class="static-sidebar-wrapper sidebar-midnightblue">
                    <div class="static-sidebar">
                        {% include sidebar %}
                    </div>
                </div>
                <div class="static-content-wrapper">
                    <div class="static-content">
                        <div class="page-content">
                            <ol class="breadcrumb">
                                {% block breadcrumb %}<li><a href="index.html">Home</a></li>{% endblock %}
                            </ol>
                            <div class="page-heading">            
                                <h1>{% block title %}Blank{% endblock %}</h1>
                                {% include header-options-default %}
                            </div>
                            <div class="container-fluid">
                                {% block content %}{% endblock %}
                            </div> <!-- .container-fluid -->
                        </div> <!-- #page-content -->
                    </div>
                    {% include footer %}
                </div>
            </div>
        </div>


        <div class="infobar-wrapper scroll-pane">
            <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"></div>
                                    </li>
                                    <li>
                                        <div class="title">Orders</div>
                                        <div class="stats">4,750</div>
                                        <div class="sparkline" id="infobar-orderstats"></div>
                                    </li>
                                </ul>
                                <a href="#" class="more">More Sparklines</a>
                            </div>
                        </div>
                    </div>

                    <div class="widget" id="widget-weather">
                        <div class="widget-heading">
                            <a href="javascript:;" data-toggle="collapse" data-target="#weatherwidget"><h4>Weather</h4></a>
                        </div>
                        <div id="weatherwidget" class="collapse in">
                            <div class="widget-body">
                                <div class="weather-container">
                                    <div class="weather-widget"></div>
                                    <button class="btn-link more js-geolocation">Use Your Location</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="widget" id="widget-stats">
                        <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" id="widget-contactdetails">
                        <div class="widget-heading">
                            <a href="javascript:;" data-toggle="collapse" data-target="#contactdetails"><h4>Contact Details</h4></a>
                        </div>
                        <div id="contactdetails" class="collapse in">
                            <div class="widget-body">
                                <div class="contactdetails">
                                    <div class="avatar">
                                        <img src="{{'demo/avatar/avatar_02.png' | asset_url | img_loc }}" class="img-responsive img-circle">
                                    </div>
                                    <span class="contact-name">Jonathan Smith</span>
                                    <span class="contact-status">Client Representative</span>
                                    <ul class="details">
                                        
                                        <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i>&nbsp;heyfromsmith@themex.co</a></li>
                                        <li><i class="fa fa-fw fa-phone"></i>&nbsp;+1 234 567 890</li>
                                        <li><i class="fa fa-fw fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="widget" id="widget-activity">
                        <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" id="widget-contacts">
                        <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 class="widget" id="widget-settings">
                        <div class="widget-heading">
                            <a href="javascript:;" data-toggle="collapse" data-target="#settings"><h4>Settings</h4></a>
                        </div>
                        <div id="settings" class="collapse in">
                            <div class="widget-body">
                                <ul class="settings">
                                    <li>Notifications<span class="pull-right"><input type="checkbox" class="js-switch-primary switchery-xs" checked /></li>
                                    <li>Alerts<span class="pull-right"><input type="checkbox" class="js-switch-warning switchery-xs" checked /></li>
                                    <li>Warning<span class="pull-right"><input type="checkbox" class="js-switch-success switchery-xs" checked /></li>
                                    <li>Messages<span class="pull-right"><input type="checkbox" class="js-switch-danger switchery-xs" checked /></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="widget" id="widget-piechart">
                        <div class="widget-heading">
                            <a href="javascript:;" data-toggle="collapse" data-target="#piechartstats"><h4>Pie Chart</h4></a>
                        </div>
                        <div id="piechartstats" class="collapse in">
                            <div class="widget-body">
                                <div class="easypiechart epc-progress" id="processing" data-percent="75">
                                    <span class="percent"></span>
                                </div>
                                <div class="tabular tabular-pie">
                                    <div class="tabular-row">
                                        <div class="tabular-cell">
                                            <span class="pie-heading pending">Pending</span>
                                            <span class="pie-variable">15</span>
                                        </div>
                                        <div class="tabular-cell">
                                            <span class="pie-heading active">Active</span>
                                            <span class="pie-variable">42</span>
                                        </div>
                                    </div>
                                </div>
                                <a href="#" class="more">More Pie Charts</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    
    {% include demo-switcher %}
    {% include scripts %}
    
    <!-- Load page level scripts-->
    {% block scripts %}{% endblock %}
    <!-- End loading page level scripts-->

    </body>
</html>