<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--suppress HtmlUnknownTarget -->
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>SMQTK</title>

        <!-- jQuery -->
{#-        <script type="text/javascript"#}
{#-                src="/static/js/jquery-1.11.1.js"></script>#}
        <script type="text/javascript"
                src="/static/js/jquery-1.11.1.min.js"></script>

        <!-- jQuery.timer -->
        <script type="text/javascript"
                src="/static/js/jquery.timer.js"></script>

        <!-- jQuery UI -->
        {#-
        <script type="text/javascript"
                src="/static/js/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css"
              href="/static/css/jquery-ui.css"/>
        #}
        <script type="text/javascript"
                src="/static/js/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css"
              href="/static/css/jquery-ui.min.css"/>

        <!-- Bootstrap.js -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {#-
        <!--<script type="text/javascript"-->
                <!--src="/static/js/bootstrap.js"></script>-->
        <!--<link rel="stylesheet" type="text/css"-->
              <!--href="/static/css/bootstrap.css"/>-->
        #}
        <script type="text/javascript"
                src="/static/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css"
              href="/static/css/bootstrap.min.css"/>

        <!-- BootBox -- for alerts -->
        {#-
        <!--<script type="text/javascript"-->
                <!--src="/static/js/bootbox.js"></script>-->
        #}
        <script type="text/javascript"
                src="/static/js/bootbox.min.js"></script>

        <!-- Local functionality -->
        <script type="text/javascript"
                src="/static/js/smqtk.vars.js"></script>
        <script type="text/javascript"
                src="/static/js/smqtk.alerts.js"></script>
        <script type="text/javascript"
                src="/static/js/setZeroTimeout.js"></script>


        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            @media (max-width: 980px) {
                body {
                    padding-top: 0;
                }

            }

            .middle img {
               max-width:2000px;
               height : 150px;
               margin-left : -1000px;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function () {
                // Setup CSRF token to be sent in appropriate ajax requests with
                // this document scope.
                // - Only applies to this page.
                XMLHttpRequest.prototype.origOpen = XMLHttpRequest.prototype.open;
                XMLHttpRequest.prototype.open = function() {
                    this.origOpen.apply(this, arguments);
                    this.setRequestHeader(CSRF_HEADER_KEY, "{{ csrf_token_gen() }}");
                };

            {%- with msgs = get_flashed_messages(category_filter=["error"]) %}
            {%- if msgs %}
                {%- for msg in msgs %}
                alert_error("{{msg}}");
                {%- endfor %}
            {%- endif %}
            {%- endwith %}

            {%- with msgs = get_flashed_messages(category_filter=["success"]) %}
            {%- if msgs %}
                {%- for msg in msgs %}
                alert_success("{{msg}}");
                {%- endfor %}
            {%- endif %}
            {%- endwith %}

            {%- with msgs = get_flashed_messages(category_filter=["info"]) %}
            {%- if msgs %}
                {%- for msg in msgs %}
                alert_info("{{msg}}");
                {%- endfor %}
            {%- endif %}
            {%- endwith %}

            }); // end document.ready()
        </script>

        {% block head_scripts %}
        {% endblock head_scripts %}
    </head>

    <body>
        {%- block settitle %}
        {%- endblock settitle %}

        <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="#smqtk-nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">SMQTK</a>
                </div>
                <div id="smqtk-nav-collapse" class="collapse navbar-collapse">
                    {%- if not 'user' in session %}
                        {%- set login_url = url_for('login.login') %}
                        {%- set login_text = 'login' %}
                    {%- else %}
                        {%- set login_url = url_for('login.logout') %}
                        {%- set login_text = session.user.fullname + ' ~ logout' %}
                    {%- endif %}
                    <ul class="nav navbar-nav navbar-right">
                        <li{%- if active_page == "login" %} class="active"{%- endif %}>
                            <a href="{{ login_url }} "> {{ login_text|safe }} </a>
                        </li>
                    </ul>
                </div> <!-- end navbar collapse -->
            </div> <!-- container-fluid -->
        </div>

        {# Show errors from server #}
        <div id="alert_placeholder"  class="container-fluid">
        </div>

        {%- block body_content %}
        {%- endblock body_content %}

        <footer>
            {#- DEBUG
            {%- if debug %}
            <div class="container-fluid">
                <hr>
                <h2>Session contents</h2>
                <h4>{{ session }}</h4>
            </div>
            {%- endif %}
            #}

            <hr>
            <center>
                <p>
                    <a href="http://www.kitware.com/solutions/computervision/computervision.html">
                        <img src="/static/img/Kitwarelogo-gradation.png"
                             alt="&copy; Kitware Inc  2013" height="30px">
                    </a>
                </p>
            </center>
        </footer>

    </body>
</html>
