{% extends "templates/base.html" %}
{% from "www/hackathons/macros/card.html" import null_card %}

{% block title %}{{ 'My Courses' }}{% endblock %}
{% block head_include %}
<meta name="description" content="My Courses" />
<meta name="keywords" content="" />
<style>
	div.card-hero-img {
		height: 220px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgb(250, 251, 252);
	}

	.card-image-wrapper {
		display: flex;
		overflow: hidden;
		height: 220px;
		background-color: rgb(250, 251, 252);
		justify-content: center;
	}

	.image-body {
		align-self: center;
		color: #d1d8dd;
		font-size: 24px;
		font-weight: 600;
		line-height: 1;
		padding: 20px;
	}

	.no-courses {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	section {
		padding: 5rem 0 5rem 0;
	}
</style>
{% endblock %}

{% macro card(course) %}
<div class="col-sm-4 mb-4 text-left">
	<a href="//courses/course?course={{course.name}}" class="no-decoration no-underline">
		<div class="card h-100">
			<div class='card-body'>
				<h5 class='card-title'>{{ course.title }}</h5>
			</div>
		</div>
	</a>
</div>
{% endmacro %}

{% block content %}
<section class="section">
	<div class='container'>
		{% if frappe.session.user != "Guest" %}
		{% for course in my_courses %}
		{{ card(course) }}
		{% endfor %}
		{% if my_courses %}
		{% for n in range( (3 - (my_courses|length)) %3) %}
		{{ null_card() }}
		{% endfor %}
		{% else %}
		<div class="no-courses">You haven't enrolled in any Course yet. <a href="/courses">Check out the availabe
				courses.</a></div>
		{% endif %}
		{% else %}
		<div class="no-courses">
			<p>Please sign up to access this page.</p>
			<a id="signup" class="btn btn-primary btn-lg" href="/login#signup">{{_('Sign Up')}}</a>
		</div>
		{% endif %}
	</div>
</section>
{% endblock %}