{% 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://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdCZE3FuBgH5fHsGocKGv%2Fuploads%2FpNFqak7cyoAenDK1PEOZ%2FCode%20for%20Life%20-%20Programming%20teaching%20resources.mp4?alt=media" 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://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdCZE3FuBgH5fHsGocKGv%2Fuploads%2FrCbonCJjzNYlDTmvrPOA%2FCode%20for%20Life%20-%20Rapid%20Router%20for%20teachers.mp4?alt=media"
                   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 Rapid Router fits into
                        <a href="https://docs.codeforlife.education/national-curriculum-alignment" target="_blank">
                            the English national curriculum &mdash; the computer science strand
                            <span class="iconify" data-icon="mdi:open-in-new"></span></a>
                        and
                        <a href="https://docs.codeforlife.education/national-curriculum-alignment-1" 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">Python programming</h4>
                    <p>The Python Den is an exploration of Python
                        programming through a comprehensive course with free
                        lesson plans, videos and worksheets to support you in
                        teaching Python programming to your students. From
                        foundational syntax to advanced concepts like loops
                        and data manipulation, each session is tailored to
                        engage young learners.</p>
                    <p>We aim to provide a tried-and-tested, structured set
                        of lessons that you can use in your classroom, no
                        matter your own level of experience.
                    </p>
                </div>
                <div>
                    <a href="{% url 'python_levels' %}"
                       class="button button--primary button-right-arrow">
                        Try out Python Den
                    </a>
                </div>
            </div>
            <div class="col-sm-6">
                <a href="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdCZE3FuBgH5fHsGocKGv%2Fuploads%2FB1XFzZC63IEYvYBzLFfC%2FPython_Den_teachers.mp4?alt=media" class="youtube">
                    <img src="{% static 'portal/img/thumbnail_python_den.png' %}"
                         alt="Python Den logo">
                </a>
            </div>
        </div>
    </div>
</div>

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

{% endblock content %}
