{% load i18n %}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{% block title %}Djangui!{% endblock title %}</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css"/>

    {% block extra_css %}
    {% endblock extra_css %}


    <style>
        .navbar-brand {
          float: none;
            width: 150px;
          }

        .navbar-center
        {
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            margin: auto;
            margin-left: 50% !important;
            margin-right: 50% !important;
          height:100%;
        }

        .djangui-affix{
         max-height: 100%;
         overflow-y: auto;
        }

        .navbar-nav li {
         line-height: 40px;
        }

        .navbar-nav li.register {
            margin-top: 5px;
        }

        #djangui-job-table a {
            display: block;
            width: 110px;
            word-wrap: break-word;
        }

        @media(max-width: 1200px){
            .djangui-affix{
                position: relative !important;
            }
        }

        .glyphicon.spinning {
            animation: spin 1s infinite linear;
            -webkit-animation: spin2 1s infinite linear;
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        {% block extra_style %}
        {% endblock extra_style %}
    </style>
</head>
<body>
    <nav class="navbar navbar-default">
{#    from http://www.bootply.com/3iSOTAyumP for brand centering #}
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-center navbar-brand"><a class="navbar-brand" href="{% url 'djangui_home' %}"><span class="glyphicon glyphicon-home"></span> Djangui</a></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                  {% if request.user.is_authenticated %}
                        <li><a href="#"><span class="glyphicon glyphicon-user"> </span>{{ request.user.username|title }}</a></li>
                      <li><a href="{% url "logout" %}?next={{ request.path }}">Logout</a></li>
                  {% else %}
                      <li>{% include "registration/login_header.html" %}</li>
                  {% endif %}
              </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    {% block left_sidebar %}
        <div class="col-md-3 col-xs-6">
            {% block left_sidebar_content %}
            {% endblock left_sidebar_content %}
        </div>
    {% endblock left_sidebar %}

    {% block center %}

        <div class="center-div {% block center_content_class %}col-md-6 col-xs-6{% endblock center_content_class %}">
{#                <div{% block center_content_affix %} class="djangui-affix col-md-5" data-spy="affix" data-offset-bottom="0"{% endblock center_content_affix %}>#}
                {% block center_content %}
                {% endblock center_content %}
{#                </div>#}
        </div>
    {% endblock center %}

    {% block right_sidebar %}
        <div class="col-md-3 col-xs-12">
        {% block right_sidebar_content %}
        {% endblock right_sidebar_content %}
        </div>
    {% endblock right_sidebar %}

</body>
    {% block js %}
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.min.js"></script>
    {% endblock js %}
    {% block extra_js %}
    {% endblock extra_js %}
    {% block inline_js %}

        <script type="text/javascript">
            function clearErrors($form){
                $form.find('.errorlist').remove();
                $form.find('.has-error').toggleClass('has-error');
            }

            function addUlError($field, error){
                $field.closest('.form-group').addClass('has-error');
                $field.after('<ul class="errorlist list-unstyled alert alert-danger"><li class="error">'+error+'</li></ul>');
            }

            function addInlineError($field, error){
                $field.closest('.form-group').addClass('has-error');
                $field.append('<span class="errorlist error alert-danger">'+error+'</span>');
            }

            function processErrors($form, errors){
                for (var key in errors){
                    for(var i=0;i<errors[key].length;i++) {
                        var error = errors[key][i];
                        var $field;
                        if (key == '__all__') {
                            //stick it at the form's top
                            $field = $('<ul class="errorlist"></ul>');
                            $field.prependTo($form);
                        }
                        else {
                            $field = $('#' + key);
                            if (!$field.length)
                                $field = $('[name="' + key + '"]');
                            if($form.hasClass('form-inline') || $form.hasClass('navbar-form')){
                                $field2 = $('<span class="errorlist"></span>');
                                $field2.appendTo($field.parent());
                                $field = $field2;
                            }
                        }
                        if ($form.hasClass('form-inline') || $form.hasClass('navbar-form'))
                            addInlineError($field, error);
                        else
                            addUlError($field, error);
                    }
                }
            }

        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
            $('#djangui-login').click(function(event){
            event.preventDefault();
            var $form = $(this).closest('form');
            // if we are cloning a job, we need to specify the fields as the files because the file type input
            // will be blank
            var formData = $form.serializeArray();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: formData,
                dataType: 'json',
                async: false,
                cache: false,
                success: function(data){
                    clearErrors($form);
                    if(data.valid){
                        if(data.redirect){
                            window.location.href = data.redirect;
                        }
                    }
                    else{
                        processErrors($form, data.errors)
                    }
                }
            });
        });

        })
        </script>
    {% endblock inline_js %}
</html>