{% load staticfiles %}
{% load main_extras %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

	<title>{{ course.title }}</title>

    <!-- Bootstrap core CSS -->
	<!-- <link href="{% static 'lib/bootstrap' %}/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="{% static 'frontend/index' %}/theme.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'courses' %}/offcanvas.css" rel="stylesheet">


    <link href="{% static 'frontend/index' %}/styles.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


	<!-- code editor syntax highligh -->
	<link rel="stylesheet" href="{% static 'lib/codemirror' %}/lib/codemirror.css">
	<script src="{% static 'lib/codemirror' %}/lib/codemirror.js"></script>
	<script src="{% static 'lib/codemirror' %}/addon/edit/matchbrackets.js"></script>
	<link rel="stylesheet" href="{% static 'lib/codemirror' %}/addon/hint/show-hint.css">
	<script src="{% static 'lib/codemirror' %}/addon/hint/show-hint.js"></script>
	<script src="{% static 'lib/codemirror' %}/mode/clike/clike.js"></script>


{% block exercise_head %}
<link href="{% static 'generated_exercises' %}/{{ slide.slide_type }}/styles.css" rel="stylesheet">
{% endblock %}

  </head>

  <body>


  {% include "frontend/navbar.html" %}


    <div class="container">


{% if not user.is_authenticated %}
<div class="alert alert-info" role="alert"><strong>Note:</strong> Your progress will be lost when you do not login.</div>
{% endif %}



<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<h2>{{ course.title }}</h2>
</div><!--/.sidebar-offcanvas-->


<div class="col-xs-12 col-sm-9">
	<ul class="pagination pagination-sm">
	{% for pslide in section.slides.all %}

	<li class="{% if pslide.id == slide.id %}active{% endif %}"><a href="{% url 'courses:slide' course.id section.id pslide.id %}">
		{% if pslide.icon %}<span class="{{ pslide.icon }}" aria-hidden="true"></span>
		{% else %}
		&#65279;
		{% endif %}
		{{ pslide.title_short }}
	</a></li>
	{% endfor %}
	</ul>
</div><!-- .col-xs-12.col-sm-9  -->

      </div><!-- .row -->



      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">

{% for lsection in course.sections.all %}

<a href="{% url 'courses:section' course.id lsection.id %}" class="list-group-item {% if lsection.id == section.id %}active{% endif %}">
	<h5 class="list-group-item-heading" style="font-weight: bold; font-size: 15px;">{{ lsection.title }}</h5>
	<p class="list-group-item-text">{{ lsection.description }}</p>
</a>
{% endfor %}

<!--
  <a href="#" class="list-group-item">
	  <span class="badge">14</span>
	  <h4 class="list-group-item-heading">Test with badge.</h4>
	  <p class="list-group-item-text">Shubberdub bub club.</p>
  </a>
	-->

          </div>
        </div><!--/.sidebar-offcanvas-->

        <div class="col-xs-12 col-sm-9">



          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>

			<h3 class="page-header" style="margin-top: 0;">{{ slide.title }}</h3>

		  <div>

{% if slide %}
	{% block exercise_content_before %}
	{% endblock %}

	{% block exercise_content %}
		{{ slide.content |safe }}
	{% endblock %}
{% else %}
	<p>No slide content provided yet.</p>
{% endif %}

{% comment %}
slide.data: {{ slide.data }}</br>
slide_data: {{ slide_data }}</br>
{% endcomment %}


			</br>

{% if next_slide.slide %}
{% csrf_token %}
<form action="{% url 'courses:slide' next_slide.course.id next_slide.section.id next_slide.slide.id %}" style="display: inline-block; float: right;">
	<input type="submit" class="btn btn-default btn-lg"  value="Continue &raquo;" id="continue" {% if slide.grading %}disabled{% else %}{% endif %} />
</form>
{% endif %}


{% if slide.grading %}
{% block exercise_buttons %}
<input type="button" name="submit" id="submit-grade" value="Check" class="btn btn-default" />
{% endblock %}
{% else %}

{% endif %}






			<div style="clear: both;"></div>
			</br>

{% block exercise_content_after %}
{% endblock %}

<div id="response"></div><!-- #response -->

{% block exercise_response_before %}
{% endblock %}

{% block exercise_response %}
<div id="output-wrapper" style="display: none;">
	<h5 style="font-weight: bold;">Output (stdout + stderr):</h5>
	<pre id="output" class="well well-sm" style="font-size: 0.9em;">DEFAULT OUTPUT NOT OVERWRITTEN- There has been an error with this exercise.</pre>
</div><!-- #output -->
{% endblock %}



{% block exercise_response_after %}
{% endblock %}

	</div>



        </div><!--/.col-xs-12.col-sm-9-->
      </div><!--/row-->

      <hr>

      {% include "frontend/footer.html" %}


    </div><!--/.container-->


{% if slide %}
<!-- js variables for current slide -->
<script type="text/javascript">
window.data = {
	'course': {{ course.id }},
	'section': {{ section.id }},
	'slide': {{ slide.id }},
}
</script>
{% endif %}

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'lib/jquery.min.js' %}"></script>
<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'lib/bootstrap/assets/js/ie10-viewport-bug-workaround.js' %}"></script>

<!-- addition libraries -->
<script src="{% static 'lib/json2.js' %}"></script>

<!-- custom javascript for courseware -->
<script src="{% static 'misc/jquery-django-csrf-fix.js' %}"></script>
<script src="{% static 'courses/offcanvas.js' %}"></script>
<script src="{% static 'courses/eventstream.js' %}"></script>
<!-- <script src="{% static 'misc/youtube_api.js' %}"></script> -->

{% block exercise_script %}
<script type="text/javascript" src="{% static 'generated_exercises' %}/{{ slide.slide_type }}/script.js"></script>
{% endblock %}


</body>
</html>
