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

{% block subNav %}
{% banner banner_name="BANNER" %}
{% endblock subNav %}

{% block content %}
<div class="background">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="carousel-teach" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-teach" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-teach" data-slide-to="1"></li>
                        <li data-target="#carousel-teach" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/icon_step_by_step.png' %}" alt="Illustration of person climbing steps with flag">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    The step-by-step nature of Rapid Router makes it simple for you and your students to
                                    gain experience quickly.
                                </h5>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/icon_uk_flag.png' %}" alt="Illustration of The Union Jack flag">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    Our resources are aligned to the UK National computing curriculum, so you can gain
                                    the knowledge and confidence you need.
                                </h5>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/icon_tracking.png' %}" alt="Illustration of a progress chart">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    Easy to use teacher dashboard includes scores to track student progress as well as
                                    comprehensive teaching resources.
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="background background--primary">
    <div class="container">
        <div class="row d-flex">
            <div class="col-sm-6 d-flex flex-column">
                <div class="flex-grow-1">
                    <h4 class="mt-0">Resources and progress tracking</h4>
                    <p>
                        Once you've registered your personal details and logged in, you'll be able to create your school or
                        club, or join other teachers at your institution.
                    </p>
                    <p>
                        You can sign up your class, download free teaching packs, including sessions plans, pupil resources and
                        assessment tools and track pupils' progress. There are even videos to help you and your class understand
                        what you'll be learning next.
                    </p>
                </div>
                <div>
                    <a href="{% url 'register' %}" class="button button--primary button-right-arrow">
                        Register now
                    </a>
                </div>
            </div>
            <div class="col-sm-6">
                <a href="https://www.youtube-nocookie.com/embed/tM5nKPYlz74?rel=0&amp;autoplay=1" class="youtube">
                    <img src="{% static 'portal/img/thumbnail_educate_resources.png' %}" alt="Image of Code for Life Resources on Gitbook with play button in bottom right corner">
                </a>
            </div>
        </div>
    </div>
</div>

<div class="background">
    <div class="container">
        <div class="row d-flex">
            <div class="col-sm-6">
                <a href="https://www.youtube-nocookie.com/embed/hv0fM0twrOE?rel=0&amp;autoplay=1" class="youtube">
                    <img src="{% static 'portal/img/thumbnail_educate_rapid_router.png' %}" alt="Image of Rapid Router logo and game with play button in bottom right corner">
                </a>
            </div>
            <div class="col-sm-6 d-flex flex-column">
                <div class="flex-grow-1">
                    <h4 class="mt-0">Rapid router</h4>
                    <p>
                        Rapid Router is a fun and engaging education resource that helps teach the first principles of
                        computer programming covered in the UK Computing curriculum.
                    </p>
                    <p>
                        Built on 'Blockly', an easy-to-use visual programming language, Rapid Router enables teachers to
                        monitor and manage individual pupil progress and identify where more support is required.
                    </p>
                    <p>
                        See how the Rapid Router fits into
                        <a href="https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england" target="_blank">
                            English national curriculum &mdash; the computer science strand
                            <span class="iconify" data-icon="mdi:open-in-new"></span></a>
                        and
                        <a href="https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland" target="_blank">
                            the Scottish curriculum.
                            <span class="iconify" data-icon="mdi:open-in-new"></span>
                        </a>
                    </p>
                </div>
                <div class="d-flex flex-column align-items-end">
                    <a href="{% url 'levels' %}" class="button button--primary button-right-arrow">
                        Try out Rapid Router
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="background background--primary">
    <div class="container">
        <div class="row d-flex">
            <div class="col-sm-6 d-flex flex-column">
                <div class="flex-grow-1">
                    <h4 class="mt-0">Kurono</h4>
                    <p>
                        Kurono is our multiplayer game that is also aligned to the National Curriculum. It is aimed at
                        Key stages 3 and 4 and concentrates on text-based programming using Python. Students follow a
                        set of challenges that enable them to embed their skills by completing the exercises alongside
                        their classmates.
                    </p>
                    <p>
                        <a href="https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/teacher-guides/kurono-and-the-national-curriculum-for-computing" target="_blank">
                            See how Kurono relates to Key Stages 3 & 4 of the computer science strand here.
                            <span class="iconify" data-icon="mdi:open-in-new"></span>
                        </a>
                    </p>
                </div>
                <div>
                    <a href="{% url 'register' %}" class="button button--primary button-right-arrow">
                        Register now
                    </a>
                </div>
            </div>
            <div class="col-sm-6">
                <a href="https://www.youtube-nocookie.com/embed/6iiksCtIIGA?rel=0&amp;autoplay=1" class="youtube">
                    <img src="{% static 'portal/img/thumbnail_educate_kurono.png' %}" alt = "Image of Kurono logo and game with play button in bottom right corner">
                </a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        invokeColorbox();
    });
</script>

{% endblock content %}
