{% load staticfiles %}
{% load wnsq_tags %}
<!DOCTYPE html>
<html>
<head>
    <title>Winose Evolution</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
    {% block stylesheets %}
        <link rel="stylesheet" href="{% static 'css/metro-bootstrap.css' %}"/>
        <link rel="stylesheet" href="{% static 'css/metro-bootstrap-responsive.css' %}"/>
        <link rel="stylesheet" href="{% static 'css/iconFont.min.css' %}"/>
        <link rel="stylesheet" href="{% static 'css/project.css' %}"/>
        <link rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}"/>
    {% endblock stylesheets %}


    {# dem scripts. #}
    {% block scripts %}

        <script type="text/javascript" src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/metro.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
        <script type="text/javascript">
            // must reside here inline, else template inheritance messes it up
            $(function () {
                $('#query').autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '{% url 'generic search ajax' %}',
                            dataType: 'json',
                            type: 'GET',
                            data: {
                                'query': $('#query').val()
                            },
                            success: function (data) {
                                response($.map(data.query_result, function (item) {
                                    return {
                                        label: item[0] + ( ' (in ' + item[1] + ')'),
                                        value: item[0]
                                    }
                                }));
                            }
                        })
                    },
                    minLength: 1
                });
            });
        </script>
    {% endblock scripts %}


</head>
<body class="metro">

{% block navbar_block %}
    {% include 'topbar.html' %}
{% endblock navbar_block %}



<nav class="breadcrumbs">
    <ul>
        <li><a href="{% url 'homepage' %}"><i class="icon-home"></i></a></li>
        {% for bread_crumb in view.bread %}
            <li><a href="{{ bread_crumb.url }}">{{ bread_crumb.label }}</a></li>
        {% endfor %}
    </ul>
</nav>

<!-- main content container -->
{#<div class="grid">#}

<div class="span12" style="margin-left: 45px; margin-top: 18px;">
    <div style="margin-bottom: 8px;">

        {% comment %}
       common notications are placed here
        {% endcomment %}

        <p style="color: red; font-weight: bold;">
            {% block notifications %}
            {% endblock %}
        </p>

        {% block button_bar %}
        {% endblock button_bar %}
    </div>
    {% block content %}
    {% endblock content %}
</div>
<!-- /row -->

<!-- /grid -->
{#</div>#}


</body>
</html>