{% extends 'game/base.html' %}

{% load static %}
{% load i18n %}
{% load app_tags %}

{% block scripts %}
{{block.super}}
<script type="text/javascript" src="https://editor-static.raspberrypi.org/releases/v0.29.1/web-component.js"></script>
<script type="text/javascript" src="{% static 'game/js/editor.js' %}"></script>

<script>
    var EPISODE = "{{ worksheet.episode.name|escapejs }}"
</script>
{% endblock %}

{% block css %}
{{block.super}}
<link href="{% static 'game/css/level_selection.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'game/css/editor.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block header %}
<section class="banner">
    {% if user|is_logged_in_as_student or user|is_independent_student %}
        <img class="banner--python-den--image" title="Python Den logo" alt="Python Den logo" src="{% static 'game/image/Python_Den_hero_student.png' %}">
    {% else %}
        <img class="banner--python-den--image" title="Python Den logo" alt="Python Den logo" src="{% static 'game/image/Python_levels_page.svg' %}">
    {% endif %}
</section>
{% endblock header %}

{% block content %}
<div class="container">
    <h4 class="text-center">{{worksheet.episode.name}}</h4>
    <p>You can write your code and see its output using the code editor below.</p>
    <p>Next to it, you can view your worksheet - you can't write anything in it, but you can copy and paste from it.</p>
</div>

<div>
    <div class="d-flex align-items-stretch justify-content-between m-5 flex-lg-row flex-md-column flex-sm-column">
        <div class="d-flex align-items-stretch justify-content-center">
            <a href="{% if user|is_independent_student %} {{worksheet.indy_worksheet_link}} {% else %} {{worksheet.student_worksheet_link}} {% endif %}"
               class="button button--level button--icon hidden-md hidden-lg mb-5" target="_blank">
                Worksheet<span class="iconify" data-icon="mdi:open-in-new"></span></a>
            {% if not user|is_logged_in_as_student %}
                <a href="{{worksheet.video_link}}" class="button button--level button--icon hidden-md hidden-lg mb-5 ml-5" target="_blank">
                    Video<span class="iconify" data-icon="mdi:open-in-new"></span></a>
            {% endif %}
        </div>

        <editor-wc
                code="{{starter_code}}"
                use_editor_styles="true">
        </editor-wc>

        <div class="hidden-sm hidden-xs">
            <div class="d-flex flex-column">
                {% if user|is_logged_in_as_student %}
                <iframe height="500" width="600" src="{{worksheet.student_worksheet_link}}"></iframe>
                {% else %}
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        {% if user|is_independent_student %}
                            <a href="#worksheet" aria-controls="worksheet" role="tab" data-toggle="tab">Worksheet</a>
                        {% else %}
                            <a href="#student-worksheet" aria-controls="student_worksheet" role="tab" data-toggle="tab">Student Worksheet</a>
                        {% endif %}
                    </li>
                    {% if user|is_logged_in_as_teacher %}
                    <li role="presentation">
                        <a href="#worksheet" aria-controls="worksheet" role="tab" data-toggle="tab">Lesson plan</a>
                    </li>
                    {% endif %}
                    <li role="presentation">
                        <a href="#video" aria-controls="video" role="tab" data-toggle="tab">Video</a>
                    </li>
                </ul>

                <div class="tab-content">
                    {% if user|is_logged_in_as_teacher %}
                    <div role="tabpanel" class="tab-pane active" id="student-worksheet">
                        <iframe height="500" width="600" src="{{worksheet.student_worksheet_link}}"></iframe>
                    </div>
                    {% endif %}
                    <div role="tabpanel" class="tab-pane {% if user|is_independent_student %} active {% endif %}" id="worksheet">
                        <iframe height="500" width="600" src="{% if user|is_independent_student %} {{worksheet.indy_worksheet_link}} {% else %} {{worksheet.lesson_plan_link}} {% endif %}"></iframe>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="video">
                        <video height="500" width="600"
                               src="{{worksheet.video_link}}" type="video/mp4" controls></video>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>

{% endblock content %}