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

{% block scripts %}
{{block.super}}
<script type="text/javascript" src="{% static 'portal/js/join_create_game_toggle.js' %}"></script>
{% endblock scripts %}

{% block subNav %}
<section class="banner banner--aimmo">
    <img title="Kurono logo" alt="Kurono logo" src="{% static 'portal/img/kurono_logo.svg' %}">
</section>
<div class="sub-nav sub-nav--teacher">
    <div class="container">
        <div class="sub-nav__content">
            <p>Select a class from the dropdown menu to add a new game below</p>
            <div class="dropdown">
                <form autocomplete="off" id="create-game-form" method="post" class="hidden">
                    {% csrf_token %}
                    <input type="hidden" name="game_class" id="id_game_class">
                </form>
                <button class="button--dropdown" data-toggle="dropdown" aria-expanded="false" id="add_class_dropdown">
                    Select class
                </button>
                <ul id="add-class-dropdown-menu" class="dropdown-menu">
                    {% for game_class in form.game_class.field.queryset %}
                        <li class="dropdown-menu__option">
                            {% if game_class.active_game %}
                                <a class="button button--regular disabled" data-class-id="{{ game_class.id }}">
                            {% else %}
                                <a class="button button--regular" id="class_{{ game_class.id }}"
                                   data-class-id="{{ game_class.id }}"
                                   onclick='send_event("Kurono", "Clicked", "Create game button");'>
                            {% endif %}
                            <p class="dropdown-menu__option__text">{{ game_class.name }}</p>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock subNav %}

{% block content %}
<div class="background container">
    <section><h4>My games</h4></section>
    {% games_table 'kurono/play' %}
</div>

<div id="kurono_teacher_dashboard_page"></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">
                    <h5 class="mt-0">Kurono Resources</h5>
                    <p>We have a set of individual and collaborative worksheets that keep the students engaged and having fun whilst
                        embedding important Python skills, supported by lesson guides and resource sheets.</p>
                    <p>Please visit our dedicated Code for Life Space to find everything you need from lesson plans to solutions.</p>
                    <p>This space is only available to teachers.</p>
                </div>
                <div>
                    <a href="https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/"
                       class="button button--primary button--icon col-sm-6" target="_blank">
                        Open Kurono resources<span class="iconify" data-icon="mdi:open-in-new"></span>
                    </a>
                </div>
            </div>
            <div class="col-sm-6">
                <img alt="Kurono Resources" title="Kurono Resources" src="{% static 'portal/img/thumbnail_kurono_resources.png' %}">
            </div>
        </div>
    </div>
</div>
<div>
    <div class="background container">
        <h5>Tell us what you think of Kurono...</h5>
        <p>Your testing and feedback will help Code for Life deliver an enjoyable game, and will allow us to consult
            with you on resources that will be relevant to teaching computing classes in secondary schools
            (13 &mdash; 18 year olds).</p>
        <div class="row background">
            <div class="col-sm-6">
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSdNGbf-oLanNhIqCQ-Yz7mbiTBBjX-8rpdXQUB8XIgBvwwuJg/viewform?usp=sf_link"
                   class="button button--primary button--icon col-sm-6" target="_blank">
                    Give feedback<span class="iconify" data-icon="mdi:open-in-new"></span>
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock content %}
