{% load addcss %}
{% load bootstrap3 i18n %}
{% load eztables %}
<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# Loading jQuery in the Header for support datatables initialization in the app_table.html template #}
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
    <script src="{{ STATIC_URL }}js/script.js"></script>
    {# Load CSS #}
    <!--<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css"/>-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <!-- Data Tables Stylesheet -->
    <link rel="stylesheet" type="text/css"
          href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
    <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}style.css"/>

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            {% if logo %}
            <a class="navbar-brand logo-nav" href="#">
                <img src="{{ STATIC_URL }}{{logo}}">
            </a>
            {% endif %}
            <a class="navbar-brand" href="#">{{ title }}</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-{{ navbar.align }}">
                {% for child in navbar.children %}
                <li><a href="{{child.link}}">{{child.text}}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                {% for child in sidebar.children %}
                <li class="{% if child.active %} active {% endif %}"><a href="{{ child.link }}">{{ child.text }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="col-md-10 col-md-offset-2 main">
            <div class="row">
                {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                    <div class="{% if message.tags %}alert alert-{{ message.tags }}{% endif %}">
                        {% if message.tags %}
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {% endif %}
                        {{ message }}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
                {% if content.title != '' %}
                <h1 class="page-header">{{ content.title }}</h1>
                {% endif %}
                {% for child in content.children %}
                {% if child.type == 'form' %}
                {% include 'app_form.html' %}
                {% elif child.type == 'table' or child.type == 'datatable' %}
                {% include 'app_table.html' %}
                {% elif child.type == 'paragraph' %}
                {% if child.heading != '' %}
                <h2 class="sub-header">{{ child.heading }}</h2>
                {% endif %}
                <div class="text-{{ child.alignment }}{% if child.is_alert %} alert alert-{{child.alert_type}} alert-dismissable{% endif %}">
                    {% if child.is_alert %}
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {% endif %}
                    <p>{{ child.text }}</p>
                </div>
                {% else %}
                <div class="alert alert-danger">
                    <p>Unknown Element!!</p>
                </div>
                {% endif %}
                {% endfor %}
            </div>
            <div class="row">
                <div class="col-md-12 text-{{footer.align}}" id="footer">
                    {% for child in footer.children %}
                    {% if child.type == 'form' %}
                    {% include 'app_form.html' %}
                    {% elif child.type == 'table' or child.type == 'datatable' %}
                    {% include 'app_table.html' %}
                    {% elif child.type == 'paragraph' %}
                    {% if child.heading != '' %}
                    <h2 class="sub-header">{{ child.heading }}</h2>
                    {% endif %}
                    <div class="text-{{ child.alignment }}{% if child.is_alert %} alert alert-{{child.alert_type}} alert-dismissable{% endif %}">
                        {% if child.is_alert %}
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {% endif %}
                        <p>{{ child.text }}</p>
                    </div>
                    {% else %}
                    <div class="alert alert-danger">
                        <p>Unknown Element!!</p>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
{# bootstrap_javascript #}
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script type="text/javascript">
    window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove();
    });
    }, 5000);



</script>
</body>
</html>