{% extends 'portal/base.html' %}
{% load staticfiles %}
{% load app_tags %}
{% load headline_tags %}
{% load benefits_tags %}

{% block nav_play %}<a href="{% url 'play' %}" class="button--menu button--menu--primary button--menu--enabled button--menu--student--active">Students</a>{% endblock nav_play %}
{% block rapidrouter %}<a href="{% url 'play_rapid_router' %}" class="button--menu button--menu--secondary button--menu--enabled button--menu--teacher--active">Rapid Router</a>{% endblock rapidrouter %}

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

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

{% block subNav %}
{{ block.super }}
<div class="banner banner--rapid-router--background row">
    <div class="row banner--rapid-router--content">
        <div class="col-sm-5 col-sm-offset-2">
            <h1 class="banner--homepage__text banner__text--center">Rapid Router</h1>
            <div class="background">
                <a href="{% url 'levels' %}" class="button button--jumbo button--primary--general-educate">Play now</a>
            </div>
        </div>
        <div class="col-sm-4">
            <a href="https://www.youtube.com/embed/PQFyF3R6Xts?rel=0&amp;autoplay=1" class="youtube">
                <img title="Watch Video" alt="Watch Video" src="{% static 'portal/img/thumbnail_intro_rr.jpg' %}">
            </a>
        </div>
    </div>
</div>
{% endblock subNav %}

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

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

<section class="background background--quaternary">
    <h2>Meet the characters</h2>
    <div class="col-sm-10 col-center image-row">
        <div>
            <img title="Wes" alt="Wes image" src="{% static 'portal/img/wes.png' %}">
            <p>Wes is as cunning as a fox, which is weird, because he&rsquo;s actually a wolf.</p>
        </div>
        <div>
            <img title="Kirsty" alt="Kirsty image" src="{% static 'portal/img/kirsty.png' %}">
            <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="Dee image" src="{% static 'portal/img/dee.png' %}">
            <p>Dee is a Mark II DeliviBot. She&rsquo;s super friendly and her wire hair sparks when she laughs.</p>
        </div>
        <div>
            <img title="Nigel" alt="Nigel image" src="{% static 'portal/img/nigel.png' %}">
            <p>Nigel is the tallest kid in his class, and he&rsquo;s growing taller by the day.</p>
        </div>
        <div>
            <img title="Phil" alt="Phil image" src="{% static 'portal/img/phil.png' %}">
            <p>Phil is a Boarsnark, however, he is different to most Boarsnarks because he&rsquo;s very kind, and very gentle.</p>
        </div>
    </div>
</section>

{% endblock content %}
