{% extends 'portal/base.html' %}
{% load static %}
{% load app_tags %}
{% load benefits_tags %}
{% load banner_tags %}

{% block nav_teach %}
<a href="{% url 'teach' %}" class="button--menu button--menu--primary button--menu--enabled button--menu--teacher--active">
    Teachers
</a>
{% endblock nav_teach %}

{% block css %}
{{block.super}}
{% endblock css %}

{% block scripts %}
{{block.super}}
{% endblock scripts %}

{% block subNav %}
{{ block.super }}
{% banner banner_name="BANNER" %}
<div class="sticky-subnav sub-nav sub-nav--teacher">
    <a href="#overview" class="button button--regular button--secondary button--secondary--light">Overview</a>
    <a href="#curriculum" class="button button--regular button--secondary button--secondary--light">Curriculum</a>
    <a href="#assessment" class="button button--regular button--secondary button--secondary--light">Assessment</a>
</div>
{% endblock subNav %}

{% block content %}
{{block.super}}

<section id="overview" class="background">
    <h3>We&rsquo;re with you every step of the way</h3>
    {% benefits %}
</section>

<div id="curriculum">
    <div class="background background--primary">
        <div class="col-sm-8 col-center">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Aligned to the curriculum</h3>
                    <p>Rapid Router has been created to teach the first principles of computer programming that are covered in the new Computing curriculum.</p>

                    <p>Rapid Router is a fun and engaging education resource which includes a coding game that helps teach children the basic principles of programming.
                        Built on &lsquo;Blockly&rsquo;, an easy-to-use visual programming language that's similar to Scratch, Rapid Router enables teachers to monitor and manage
                        individual pupil progress and identify where more support is required.</p>

                    <p><a href="{{ 'user_guide_v1/introduction_to_coding.pdf'|cloud_storage }}">See how the app relates to Key Stages 1, 2 and 3 of the computer science strand here</a>.</p>
                    <p><a href="{{ 'user_guide_v1/introduction_to_coding_scotland.pdf'|cloud_storage }}">See how the app relates to the Scottish computer science strand here</a>.</p>
                </div>
                <section class="col-sm-6">
                    <a href="https://www.youtube.com/embed/xP-U-MJLk-g?rel=0&amp;autoplay=1" class="youtube">
                        <img title="Watch Video" alt="Watch Video" src="{% static 'portal/img/thumbnail_intro_c4l.jpg' %}">
                    </a>
                    <br><a href="{% url 'play' %}" class="button button--regular button-primary button--primary--general-educate">Get started</a>
                </section>
            </div>
        </div>
    </div>
</div>

<div id="assessment">
    <div class="background col-sm-8 col-center">
        <div class="row">
            <div class="col-sm-6">
                <h3>Resources and scoring</h3>
                <p>Once you&rsquo;ve <a href="{% url 'register' %}">registered</a> your personal details and logged in, you&rsquo;ll be able to create your school or club, or join other teachers at your institution.</p>

                <p><strong>Sign up your class, track each pupil&rsquo;s progress, download free teaching packs</strong>, which include sessions plans, pupil resources and
                    assessment tools. There are even videos to help you and your class understand what you&rsquo;ll be learning next.</p>

                <section class="background">
                    <a href="{% url 'register' %}" class="button button--regular button--primary--general-play register">Register now</a>
                </section>
            </div>
            <img class="col-sm-6" title="Teaching Resources" alt="Resources image" src="{% static 'portal/img/resources_montage.jpg' %}">
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        invokeColorbox();
        if($(window).width() > 760) {
            toggleStickySubnav($('.banner').outerHeight() + $('.menu').outerHeight());
        }
    });
</script>

{% endblock content %}
