{% load staticfiles %}
{% load app_tags %}

{% load sekizai_tags %}

<!DOCTYPE html>
<html>
<head>
    {% render_block "css" %}

    <title>{% block title %}Code for Life{% endblock %}</title>
    <meta name="msapplication-config" content="none"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    {% include "common/onetrust_cookies_consent_notice.html" %}

    {% block head %}
    {% endblock head %}

    {% block css %}
    <link href="{% static 'portal.css' %}" type="text/css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="{% static 'portal/img/favicon.ico' %}" type="image/x-icon"> 
    <link rel="icon" href="{% static 'portal/img/favicon.ico' %}" type="image/x-icon">
    {% endblock css %}

    {% include "portal/tag_manager/tag_manager_head.html" %}

    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script type="text/javascript" src="/static/portal/js/lib/jquery-3.5.1.min.js">\x3C/script>')</script>
    <script 
        src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
        crossorigin="anonymous"></script>
    <script>window.jQuery.ui || document.write('<script type="text/javascript" src="/static/portal/js/lib/jquery-ui-1.12.1.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="{% static 'portal/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/lib/modernizr-build.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/deleteWorkspaces.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/jquery.placeholder.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/lib/jquery.colorbox.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/lib/papaparse.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'portal/js/sticky_subnav.js' %}"></script>
    <script src="https://code.iconify.design/2/2.0.3/iconify.min.js"
            integrity="sha256-pRhh6noOilGT8GyGitRuoRwdp5k1p8QJW2lvyGz4B9M="
            crossorigin="anonymous"></script>
    {% block check_user_status %}
    <script>
        // Set to 'TEACHER', 'SCHOOL_STUDENT', 'INDEPENDENT_STUDENT', or 'UNTRACKED'
        USER_STATUS = '{{ user|get_user_status }}';
        DEVELOPER = '{{ user|is_developer }}' === 'True';
        BETA = '{{ request|has_beta_access }}' === 'True';
    </script>
    {% endblock check_user_status %}

    {% block google_analytics %}
    {% if request|is_production %}
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');


            ga('create', 'UA-49883146-1', 'auto');
            ga('send', 'pageview');

            function send_event(category_name, action, label_name) {
                ga('send', {
                    hitType: 'event',
                    eventCategory: category_name,
                    eventAction: action,
                    eventLabel: label_name
                });
            }
        </script>

        <script src="/static/portal/js/riveted.min.js"></script>
        <script>riveted.init();</script>
        <script>
            function send_event(name_of_file, action){
                ga('send', {
                    hitType: 'event',
                    eventCategory: 'PDFs',
                    eventAction: action,
                    eventLabel: name_of_file
                });
            }
        </script>
    {% endif %}
    {% endblock google_analytics %}
</head>

<body id="top">
{% include "portal/tag_manager/tag_manager_body.html" %}
{% render_block "js" %}
{% include 'portal/mouseflow.html' %}

<div class="content-footer-wrapper">
    {% block contentWrapper %}
    <div {% block pageID %}id="contentWrapper"{% endblock %}>
        {% block topBar %}
        {% include 'portal/partials/header.html' %}
        {% endblock topBar %}

        {% block subNav %}
        {% endblock subNav %}
        <div id="messages">
            {% if messages %}
            <div class="sub-nav--message">
                {% for message in messages %}
                <div class="sub-nav {{ message.tags }}">
                    <div class="container">
                        <div class="row">
                            <div class="d-flex col-sm-12 align-items-center">
                                {% if 'error' in message.tags or 'warning' in message.tags %}
                                    <span class="material-icons-outlined md-32">error</span>
                                {% else %}
                                    <span class="material-icons-outlined md-32">info</span>
                                {% endif %}
                                <p class="flex-grow-1">
                                    {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
                                </p>
                                <a class="x-icon"><span class="sr-only">Close</span> <span class="iconify" data-icon="mdi:close"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        <!--[if lt IE 10]>
        <ul class="messages">
            <li class="error">You appear to be using an old version of Internet Explorer. You will be unable to play Rapid Router, unless you upgrade to Internet Explorer 10, or consider using another browser.</li>
        </ul>
        <![endif]-->

        {% block contentDiv %}
        <div class="content">

            {% block content %}
            {% block base_new_content %}{% endblock %}
            {% endblock content %}

        </div>
        {% endblock contentDiv %}

        <div class="push"></div>
    </div>
    {% endblock contentWrapper %}

    {% block footer %}
        {% include 'portal/partials/footer.html' %}
    {% endblock footer %}
</div>

<div id="confirmation-dialog" title=""></div>

{% block scripts %}
<script>
    let bannerHeight;

    $(function() {
        $('input, textarea').placeholder();
    });

    function animateScroll(bannerHeight) {
        $('a[href*="#"]:not(a[data-toggle="tab"])').on('click', function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                history.pushState({}, "", this.href);
                let $target = getTarget(this);
                if ($target.length) {
                    animate($target.offset().top - bannerHeight);
                    return false;
                }
            }
        });
    }

    function getTarget(clickTarget) {
        let $target = $(clickTarget.hash);
        $target = $target.length && $target || $('[name=' + clickTarget.hash.slice(1) +']');
        return $target;
    }

    function animate(targetOffset) {
        let stickyWarningHeight = 0;
        let stickyWarning = $('#sticky-warning');
        if (stickyWarning.length) {
            stickyWarningHeight = stickyWarning.height();
        }
        $('html,body').animate({scrollTop: targetOffset - $('.menu').height() - stickyWarningHeight}, 1000);
    }

    function invokeColorbox() {
        $(".youtube").colorbox({
            iframe:true,
            innerWidth:640,
            innerHeight:390,
            transition: 'fade',
            closeButton: true
        });
    }

    $(document).ready(function() {
        bannerHeight = $('.sticky-subnav').height();
        if(!bannerHeight) {
            bannerHeight = $('.menu').height() * 1.25
        }
        animateScroll(bannerHeight);
    });
</script>
{% include "common/freshdesk_widget.html" %}
<script>
    FreshworksWidget('hide');
    $('.freshdesk__contact-us').on('click', function() {
        FreshworksWidget('open');
    });
</script>
{% endblock scripts %}
</body>
</html>
