{% load url from future %}<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}XBMC Media Library{% endblock  %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <!-- Bootstrap -->
        <link href="{{STATIC_URL}}lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="{{STATIC_URL}}lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="screen" />
        
        <!-- jQuery -->
        <link href="{{STATIC_URL}}lib/datatables/css/jquery.dataTables.css" rel="stylesheet" media="screen" />
        <link href="{{STATIC_URL}}lib/datatables/css/DT_bootstrap.css" rel="stylesheet" media="screen" />
        <link href="{{STATIC_URL}}lib/jqueryui/css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" media="screen" />
        
        <!-- Charisma -->
        <link href="{{STATIC_URL}}lib/charisma/css/bootstrap-journal.css" rel="stylesheet" />
        <link href="{{STATIC_URL}}lib/charisma/css/charisma-app.css" rel="stylesheet" media="screen" />
        <link href="{{STATIC_URL}}lib/charisma/css/fullcalendar.css" rel="stylesheet" />
        <link href="{{STATIC_URL}}lib/charisma/css/fullcalendar.print.css" rel="stylesheet" media="print" />
        
        <!-- Local -->
        <link href="{{STATIC_URL}}css/default.css" rel="stylesheet" media="screen" />
        
    </head>
    <body ng-app="xbmc">
        <div id="wrap">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="{% url "home" %}">XBMC Media Library</a>
                </div>
            </div>
                
            <div class="container-fluid">
                <div class="row-fluid">
                    <!-- left menu starts -->
                    <div class="span2 main-menu-span">
                        <div class="well nav-collapse sidebar-nav">
                            <ul class="nav nav-tabs nav-stacked main-menu">
                                {% block side_nav_list %}
                                    <li class="nav-header hidden-tablet">Main</li>
                                    <li><a class="ajax-link" href="{% url "home" %}"><i class="fa fa-dashboard"></i><span class="hidden-tablet"> Dashboard</span></a></li>
                                    
                                    {% block side_nav_extra %}{% endblock %}
                                {% endblock %}
                            </ul>
                        </div><!--/.well -->
                    </div><!--/span-->
                    <!-- left menu ends -->

                    <!-- Content starts -->
                    <div class="row span10">
                        {% block content %}{% endblock %}
                    </div>
                    <!-- Content ends -->
                </div>
                <!-- Content row ends -->

                <div id="push"></div>
                <hr />
                <footer id="footer">
                    {% block footer %}
                        <p class="pull-left muted credit">XBMC Media Library</p>
                        <p class="pull-right muted credit">
                            Powered by Django, jQuery and AngularJs<br />
                            Made pretty with Bootstrap and Charisma</p>
                    {% endblock %}
                </footer>
            </div>
        </div>
        
        <!-- jQuery -->
        <script src="{{STATIC_URL}}lib/jquery/js/jquery-1.10.2.min.js"></script>
        <script src="{{STATIC_URL}}lib/jquery/js/jquery-migrate-1.2.1.min.js"></script>
        <script src="{{STATIC_URL}}lib/jquery/js/jquery.cookie.js"></script>
        <script src="{{STATIC_URL}}lib/jquery/js/jquery.serialize-object.js"></script>
        <script src="{{STATIC_URL}}lib/jqueryui/js/jquery-ui-1.10.3.custom.min.js"></script>
        
        <script src="{{STATIC_URL}}lib/datatables/js/jquery.dataTables.min.js"></script>
        <script src="{{STATIC_URL}}lib/datatables/js/FixedHeader.min.js"></script>
        
        <!-- Bootstrap -->
        <script src="{{STATIC_URL}}lib/bootstrap/js/bootstrap.min.js"></script>
        
        <!-- Charisma -->
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.history.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.chosen.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.uniform.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.colorbox.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.cleditor.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.noty.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.elfinder.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.raty.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.iphone.toggle.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.autogrow-textarea.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/jquery.uploadify-3.1.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/fullcalendar.min.js"></script>
        <script src="{{STATIC_URL}}lib/charisma/js/charisma.js"></script>

        <!-- AngularJs -->
        <script src="{{STATIC_URL}}lib/angular/js/angular.min.js"></script>
        <script src="{{STATIC_URL}}lib/angular/js/angular-resource.min.js"></script>
        <script src="{{STATIC_URL}}js/utility.js"></script>
        <script src="{{STATIC_URL}}js/xbmc.js"></script>
        
        {% block application_scripts %}{% endblock %}
        <script type="text/javascript">{% block scripts %}{% endblock %}</script>
    </body>
</html>