{% load static %}
{% 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"/>
        <script type="text/javascript" src="{% static 'portal/js/lib/jquery.min.js' %}"></script>
        {% 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 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/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 type="text/javascript" src="{% static 'portal/js/bootstrap.min.js' %}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.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 %}
                <!-- Google tag (gtag.js) -->
                <script async src="https://www.googletagmanager.com/gtag/js?id=G-R81N6YZYT7"></script>
                <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-R81N6YZYT7');
                </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" %}
        <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 %}
            {% if request.session.screentime_warning_timeout %}
                {% include "portal/partials/screentime_popup.html" %}
                <script>setTimeout(showScreentimePopup, {{ request.session.screentime_warning_timeout }});</script>
            {% endif %}
            {% if request.session.last_request %}
                {% include "portal/partials/session_popup.html" %}
                <script>
          // showing the popup after 28 minutes so it adds up to 30 minutes with the 2 minute countdown
          setTimeout(showSessionPopup, 1680000);
                </script>
            {% endif %}
            {% block footer %}
                {% include 'portal/partials/footer.html' %}
            {% endblock footer %}
        </div>
        <div id="confirmation-dialog" title=""></div>
        {% block scripts %}
            <script>
    let bannerHeight;

    // store current hash, then remove it so the page doesn't jump to the section
    const currentHash = window.location.hash
    window.location.hash = ''

    $(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
        });
    }

    function updateLocationHash(hash) {
      // using replaceState as changing hash directly will scroll to element
      history.replaceState({}, '', hash)
    }

    $(document).ready(function() {
        bannerHeight = $('.sticky-subnav').height();
        if(!bannerHeight) {
            bannerHeight = $('.menu').height() * 1.25
        }
        animateScroll(bannerHeight);

        // select the tab based on the current location hash
        const tabs = $('.sub-nav [data-toggle="tab"]')
        const tabNames = tabs.map((index, element) => $(element).attr('href')).toArray()
        const currentTabIndex = tabNames.indexOf(currentHash)
        if (currentTabIndex < 0) {
            updateLocationHash(tabNames[0])
        }
        else {
            updateLocationHash(tabNames[currentTabIndex])
            tabs[currentTabIndex].click()
            animate($(tabNames[currentTabIndex]).offset().top - bannerHeight)
        }

        // make each tab update the current location hash on click
        tabs.on('shown.bs.tab', (event) => {
            updateLocationHash(event.target.hash)
            window.scrollTo(0, 0)
        })
    });
            </script>
            {% include "common/freshdesk_widget.html" %}
            <script>
    FreshworksWidget('hide');
    $('.freshdesk__contact-us').on('click', function() {
        FreshworksWidget('open');
    });
            </script>
            <script>
    // disable newsletter signup button by default
    const newsletterSubmitButton = $('#submit_newsletter');
    newsletterSubmitButton.addClass("disabled");
    newsletterSubmitButton.prop("disabled", true);

    // enable them or disable it depending on age verification checkbox
    $('#id_age_verification').on("click", function() {
        newsletterSubmitButton.prop("disabled", !this.checked);
        newsletterSubmitButton.toggleClass("disabled", !this.checked);
    });
            </script>
        {% endblock scripts %}
    </body>
</html>
