{% spaceless %}
    {% load i18n %}
    {% load gravatar %}
    {% load account %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>{% block pageTitle %}{% endblock %}</title>

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        {% block head %}{% endblock %}

        <style>
            @media (max-width: 992px) { .navbar { margin-bottom: 10px; } }
            @media (max-width: 768px) { .navbar-collapse { text-align: right; } }
            @media (min-width: 768px) {
                .box-shadow-dialog { box-shadow: 2px 2px 20px 0px; border-radius: 15px; padding: 0px 20px 15px;}
                div#headerBar .navbar-nav, div#headerBar div:first-child { height: 50px; }
                .navbar-brand, .navbar-nav li { position: relative; top: 50%; transform: translateY(-50%); }
            }
            html, body { height: 100%; }
            #bodyWrapper { min-height: 100%; position: relative; }
            #content-wrapper { padding-bottom: 45px; }
            div#headerBar, div#footer { border-radius: 0px; vertical-align: middle; }
            div#footer { min-height: 0; width: 100%; position: absolute;
                bottom: 0; margin-bottom: 0; padding: 0 3px; }
            div#footer * { margin-top: 3px; margin-bottom: 3px; }
            #logged-in-user-name { margin-right: 10px; }
            .gravatar { box-shadow: 0px 0px 10px 1px white; border-radius: 5px; }
            .narrow-panel-dialog { max-width: 450px; }
        </style>
        {% block style %}{% endblock %}
    </head>
    <body>

<!--[if lt IE 9]>
  <div class="alert alert-danger">
    <h4>Browser Incompatibility</h4>
    <p>
      This site does not support your browser. These pages won't look right and some functions will not work at all.
      We strongly recommend that you upgrade to a newer browser to get a functional experience from this site.
    </p>
    <p>For instance, <a href="http://www.google.com/chrome">Google Chrome</a> is an excellent choice.</p>
  </div>
<![endif]-->

    <div id="bodyWrapper">
        {# BEGIN HEADER BAR #}
        <div id="headerBar" class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#headerBarCollapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="header-home" class="navbar-brand" href="{% block headerBarBrandLink %}/{% endblock %}">
                        {% block headerBarBrand %}{% endblock %}
                    </a>
                </div>

                <div id="headerBarCollapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        {% block headerBarLeft %}{% endblock %}
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        {% block headerBarRight %}{% endblock %}

                        {% if user.is_authenticated %}
                            <li><a id="header-logout" href="{% url "account_logout" %}">{% trans "Sign Out" %}</a></li>
                            <li>
                                <a id="header-user-profile" href={% url "account_profile" %}>
                                    <strong id="logged-in-user-name">{% user_display user %}</strong>
                                    {% gravatar user.email 35 %}
                                </a>
                            </li>
                        {% else %}
                            <li><a id="header-login" href="{% url "account_login" %}">{% trans "Sign In" %}</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        {# END HEADER BAR #}

        {# BEGIN BODY #}
        <noscript>
            <div class="alert alert-danger">
                <h4>Uh oh!</h4>
                <p>It looks like you have scripts disabled in your browser.</p>
                <p>This site won't be very useful without javascript. Please enable scripting for this site before
                    continuing.</p>
            </div>
        </noscript>

        <div class="container">
            {% include "dcbase/messages.html" %}
        </div>

        <div id="content-wrapper">
        {% block content %}{% endblock %}
        </div>
        {# END BODY #}

        {# BEGIN FOOTER #}
        <div id="footer" class="navbar navbar-inverse" role="navigation">
            {% block footerBar %}{% endblock %}
        </div>
        {# END FOOTER #}
    </div>

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
    <script>
        $.cookie('_tz_offset', (new Date()).getTimezoneOffset());
        var dcbase = {
            createUrl: function (urlPattern) {
                var parts = urlPattern.split('0');
                var finalUrl = '';
                for (var i = 0; i < (parts.length - 1); i++) {
                    finalUrl += parts[i];
                    finalUrl += arguments[i + 1];
                }
                finalUrl += parts[parts.length - 1];
                return finalUrl;
            }
        };
    </script>
    {% block script %}{% endblock %}

    </body>
    </html>
{% endspaceless %}
