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

{% block subNav %}
<section class="banner banner--independent-student row mx-0">
    <div>
        <h1 class="banner__text--primary">
            Welcome, {{ user|make_into_username }}
        </h1>
        <h4>This is where you can access your games</h4>
    </div>
</section>
{% endblock subNav %}

{% block content %}
<div id="play_dashboard_page">
    <div class="background container">
        <section><h4>Your games</h4></section>
        <div class="grid-games col-center col-sm-4">
            <div class="card">
                <div class="card__images">
                    <img title="Rapid Router" alt="Rapid Router"
                         class="card__image"
                         src="{% static 'portal/img/RR_logo_green.svg' %}">
                </div>
                <div class="card__text">
                    <h5 class="card__title">Rapid Router</h5>
                    <p>Rapid Router guides you, and makes learning to code easy
                        and great fun. Using Blockly, you can advance through
                        the levels to become an Ocado delivery hero.</p>
                    <div class="button-group">
                        <a href="{% url 'levels'%}"
                           class="button button--primary">Play</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="background background--primary">
        <div class="container">
            <div class="col-center text-center col-sm-9">
                <section><img title="Rapid Router logo" alt="Rapid Router logo" src="{% static 'portal/img/RR_logo_simple.png' %}"></section>
                <h4>You have completed {{ num_completed }} Rapid Router level{{ num_completed|pluralize }}!</h4>
                <h4>You have {{ num_top_scores }} top score{{ num_top_scores|pluralize }}!</h4>
                <h4>You have a score of {{ total_score }}. There are {{ total_available_score }} available points.</h4>
            </div>
        </div>
    </div>
</div>
{% endblock %}