{% load static %}
{% load materialize_nav %}
<!DOCTYPE html>
<html>
<head>
    {% block head %}{% endblock %}

    {% include_materialize_header %}

    {# <!--Let browser know website is optimized for mobile--> #}
    {#  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  #}
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msqpplication-tap-highlight" content="no">
    <meta name="description" content="Application">

    <title>{% block header_title %}{% if PageTitle %}{% if AppName %}{{ AppName }} : {% endif %}{{ PageTitle }}{% elif Title %}{{ Title }}{% else %}{{ DefaultTitle }}{% endif %}{% endblock header_title %}</title>
</head>

<body>

    {% render_nav %}

    <main {% if ShowSidebar and FixedSidebar %}class="show_fixed_sidebar"{% endif %}>
        {% block main %}
        <div class="row">
            <div class="{% if not ContainerOn %}no-{% endif %}container" style="margin-top: 1rem">
                {% block content %}
                        <div class="col s12{% if SidePanel %} m9 l9 xl10{% endif %}">
                        {% block container %}
                                <div class="card">
                                <div class="card-content">
                                    {% block card %} {% endblock card %}
                                </div>
                            </div>
                        {% endblock container %}
                        </div>
                {% endblock content %}
            </div>
            {% if SidePanel %}
            <div class="hide-on-small-only col m3 l3 xl2">
                {% block side_panel %}
                    <div class="card">
                        <div class="card-content">
                            {% block side_card %}{% endblock side_card %}
                        </div>
                    </div>
                {% endblock side_panel %}
            </div>
            {% endif %}
        </div>
        {% endblock main %}
    </main>

    <!--
        hidden footer to help with some floating objects
        materializecss issue with tooltips showing up in weird places when a floating button was the last item.
    -->
    <footer class="page-footer white {% if ShowSidebar and FixedSidebar %}show_fixed_sidebar{% endif %}">|</footer>


    {% block modals %}{% endblock modals %}

    <script type="text/javascript">
        $( document ).ready(function(){
            $('.tooltipped').tooltip();  // Jquery initialize materializecss tooltips
            $('select').select();  // Jquery initialize select input dropdown

            {% block js_document_ready %}{% endblock %}

            // Setup containers and cards for small screens
            if ($('.hide-on-small-only').css('display') == 'none') {
                $('.container').toggleClass('container had-container');
                $('.card').toggleClass('card had-card');
            } else {
                $('.had-container').toggleClass('had-container container');
                $('.had-card').toggleClass('had-card card');
            }

            // Activate page notification
            {% if notification %}M.toast({"html": "{{ notification }}" });{% endif %}
        });

        // Resize event for containers and cards on small screens
        window.addEventListener('resize', function check_size_for_container(){
            if ($('.hide-on-small-only').css('display') == 'none'){
                $('.container').toggleClass('container had-container');
                $('.card').toggleClass('card had-card');
            } else {
                $('.had-container').toggleClass('had-container container');
                $('.had-card').toggleClass('had-card card');
            }
        }, true)
    </script>

    {% block start_js_script %}{% endblock %}
</body>
</html>

