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

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

{% block content %}

<div class="background">
    {% headline headline_name="HEADLINE" %}
</div>

<div class="background container">
    <section class="banner--rapid-router">
        <img title="Rapid Router logo"
             alt="Banner image of Rapid Router logo and game"
             src="{% static 'common/img/RR_logo.svg' %}">
    </section>
    <div class="background row d-flex">
        <div class="col-sm-6 d-flex flex-column">
            <div class="flex-grow-1">
                <h5 class="mt-0">Starting with Blockly</h5>
                <p>Starting with Blockly, you can learn to become a coding
                    superhero, amaze your friends with your high scores. Create
                    levels for your friends and compete for the most coins.</p>
                <p>If you are not part of a school, you can <a href="{% url 'register' %}">register here</a>.</p>
            </div>
            <div class="row my-4">
                <div class="col-sm-12">
                    <a href="https://code-for-life.gitbook.io/rapid-router/blockly-guide"
                       class="button button--primary button--icon col-sm-8"
                       target="_blank">
                        Learn more about Blockly<span class="iconify" data-icon="mdi:open-in-new"></span></a>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <a href="{% url 'levels' %}"
                       class="button button--primary button--icon col-sm-8">
                        Try Rapid Router <span class="iconify" data-icon="mdi:chevron-right"></span></a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <a href="https://www.youtube-nocookie.com/embed/w0Pw_XikQSs?rel=0&amp;autoplay=1"
               class="youtube">
                <img src="{% static 'portal/img/thumbnail_play_rapid_router.png' %}"
                     alt="Image of Rapid Router game with try button in bottom right corner">
            </a>
        </div>
    </div>
</div>

<section class="background background--primary">
    <h4>Meet the characters</h4>
    <div class="container image-row text-left">
        <div>
            <img title="Wes" alt="Illustration of Wes"
                 src="{% static 'portal/img/wes.png' %}">
            <h5>Wes</h5>
            <p>Wes is as cunning as a fox, which is weird, because he's actually
                a wolf.</p>
        </div>
        <div>
            <img title="Kirsty" alt="Illustration of Kirsty"
                 src="{% static 'portal/img/kirsty.png' %}">
            <h5>Kirsty</h5>
            <p>Kirsty is a girl with big ambitions. Her biggest ambition is to
                take the crown, and rule the world!</p>
        </div>
        <div>
            <img title="Dee" alt="Illustration of Dee"
                 src="{% static 'portal/img/dee.png' %}">
            <h5>Dee</h5>
            <p>Dee is a Mark II DeliviBot. She's super friendly and her wire
                hair sparks when she laughs.</p>
        </div>
        <div>
            <img title="Nigel" alt="Illustration of Nigel"
                 src="{% static 'portal/img/nigel.png' %}">
            <h5>Nigel</h5>
            <p>Nigel is the tallest kid in his class, and he's growing taller by
                the day.</p>
        </div>
        <div>
            <img title="Phil" alt="Illustration of Phil"
                 src="{% static 'portal/img/phil.png' %}">
            <h5>Phil</h5>
            <p>Phil is a Boarsnark, however, he is different to most Boarsnarks
                because he's very kind, and very gentle.</p>
        </div>
    </div>
</section>

<div class="background container">
    <section>
        <img title="Python Den logo"
             alt="Banner image of Python Den logo and game"
             src="{% static 'portal/img/python_den_banner.svg' %}">
    </section>
    <div class="background row d-flex">
        <div class="col-sm-6">
            <img src="{% static 'portal/img/python_den.png' %}"
                 alt="Python Den logo and characters">
        </div>
        <div class="col-sm-6 d-flex flex-column">
            <div class="flex-grow-1">
                <h5 class="mt-0">Python programming</h5>
                <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 your learning.</p>
                <p>From foundational syntax to advanced concepts like loops
                    and data manipulation, each session is a new challenge.</p>
                <p>We aim to provide a tried-and-tested, structured set of
                    lessons that you can use at home or in class, no matter
                    your own level of experience.</p>
            </div>
            <div class="row my-4">
                <div class="col-sm-12">
                    <a href="{% url 'python_levels' %}"
                       class="button button--primary button--icon col-sm-8">
                        Try Python Den <span class="iconify" data-icon="mdi:chevron-right"></span></a>
                </div>
            </div>
        </div>
    </div>
</div>

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

{% endblock content %}
