{% extends "templates/base.html" %}
{% block title %}{{ 'Courses' }}{% endblock %}
{% block head_include %}
<meta name="description" content="Courses" />
<meta name="keywords" content="Courses {{course.title}}" />
<style>
</style>
{% endblock %}

{% block content %}
<section class="top-section container" 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>
			</ol>
		</nav>
		<div class="badge badge-info enrollment-badge hide">Enrolled</div>
		<div>
			<!-- {% if not course_enrolled and frappe.session.user != "Guest" %}
				<button class="btn btn-dark btn-enroll float-right" data-course="{{ course.name }}">Enroll</button>
			{% endif %} -->
			<h1>{{ course.title }}</h1>
		</div>
		<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
			<li class="nav-item">
				<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
					aria-selected="true">Course Details</a>
			</li>
			{% if discussions %}
			<li class="nav-item">
				<a class="nav-link" id="discussions-tab" data-toggle="tab" href="#discussions" role="tab"
					aria-controls="discussions" aria-selected="false">Discussions</a>
			</li>
			{% endif %}
		</ul>
	</div>
	<div class="tab-content">
		<div class="tab-pane fade py-4 show active" role="tabpanel" id="home">
			<div class='container'>
        <div>{{ frappe.utils.md_to_html(course.description) }}</div>
				<div class="list-group">
					{% for topic in course.topics %}
					<div class="list-group-item">
						<h5><a href="/courses/{{course.slug}}/{{topic.slug}}">{{topic.title}}</a></h5>
						<div>{{topic.preview | markdown }}</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
		<div class="tab-pane fade py-4" role="tabpanel" id="discussions">
			<div>
				{% if batches %}
				<div class="dropdown">
					<button class="btn btn-default dropdown-toggle mb-5" data-toggle="dropdown" aria-expanded="false">
						<span class="current-batch">{{ batches[0] }}</span>
						<b class="caret"></b>
					</button>
					<ul class="dropdown-menu dropdown-menu-right" role="menu">
					{% for batch in batches %}
					<li>
						<a class="grey-link dropdown-item list-batch" href="#" onclick="return false;" data-label="{{ batch | urlencode}}">
							<span class="alt-underline"> {{ batch }} </span>
						</a>
					</li>
					{% endfor %}
					</ul>
				</div>
				{% endif %}
				<div class="border p-5">
					<div class="form-group">
						<textarea class="form-control message-text" rows="3"
							placeholder="Enter your message here."></textarea>
						<button class="btn btn-primary mt-5 send-message" data-author="{{ author | urlencode}}"
							data-batch="{{ current_batch | urlencode }}">Send</button>
					</div>
				</div>
				{% if discussions %}
				<div class="discussions">
					{% for message in discussions %}
					<div class="list-group-item">
						<h6>{{ message.author }}</h6>
						{{ message.message }}
						<div class="small text-muted text-right">{{ message.creation }}</div>
					</div>
					{% endfor %}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</section>
{% endblock %}