{% extends "templates/base.html" %}
{% block title %}{{topic.title}} ({{course.title}}){% endblock %}
{% block head_include %}
	<meta name="description" content="Topic {{topic.title}} of the course {{course.title}}" />
	<meta name="keywords" content="course {{course.title}} {{topic.title}}" />
	<style>
	</style>
{% endblock %}

{% block content %}
<section class="top-section" style="padding: 1rem 0rem;">
	<div class='container pb-5'>
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item" aria-current="page"><a href="/courses">Courses</a></li>
				<li class="breadcrumb-item" aria-current="page"><a href="/courses/course?course={{course.name}}">{{course.title}}</a></li>
			</ol>
		</nav>

		<h1>{{ topic.title }}</h1>

    {% for s in topic.sections %}
    <div class="section section-{{ s.type }}">
      {{ render_section(s) }}
    </div>
    {% endfor %}

	</div>
</section>
{% endblock %}

{% macro render_section(s) %}
  {% if s.type == "text" %}
    {{ render_section_text(s) }}
  {% elif s.type == "code" %}
    {{ render_section_code(s) }}
  {% else %}
    <div>Unknown section type: {{s.type}}</div>
  {% endif %}
{% endmacro %}

{% macro render_section_text(s) %}
  {{ s.contents | markdown  }}
{% endmacro %}

{% macro render_section_code(s) %}
<pre>{{s.code}}</pre>
{% endmacro %}