{% extends "lms/templates/lms_base.html" %}
{% block title %}
	{{  _("All Batches") }}
{% endblock %}

{% block page_content %}
<div class="common-page-style lms-page-style">
	<div class="container">
		{{ Header() }}
		{% if past_batches | length or upcoming_batches | length or private_batches | length %}
		{{ BatchTabs(past_batches, upcoming_batches, private_batches, my_batches) }}
		{% else %}
		{{ EmptyState() }}
		{% endif %}
	</div>
</div>
{% endblock %}

{% macro Header() %}
<header class="edit-header">
	<div class="page-title mb-6"> {{ _("All Batches") }} </div>
	{% if is_moderator %}
	<button class="btn btn-primary btn-sm pull-right" id="create-batch">
		{{ _("New Batch") }}
	</button>
	{% endif %}
</header>
{% endmacro %}

{% macro BatchTabs(past_batches, upcoming_batches, private_batches, my_batches) %}
<article>
	<ul class="nav lms-nav" id="courses-tab">

		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#upcoming">
				{{ _("Upcoming") }}
				<span class="course-list-count">
					{{ upcoming_batches | length }}
				</span>
			</a>
		</li>

		{% if is_moderator %}
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#past">
				{{ _("Archived") }}
				<span class="course-list-count">
					{{ past_batches | length }}
				</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#private">
				{{ _("Private") }}
				<span class="course-list-count">
					{{ private_batches | length }}
				</span>
			</a>
		</li>
		{% endif %}

		{% if frappe.session.user != "Guest" %}
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#my-batch">
				{{ _("Enrolled") }}
				<span class="course-list-count">
					{{ my_batches | length }}
				</span>
			</a>
		</li>
		{% endif %}

	</ul>

	<div class="border-bottom mb-4"></div>

	<div class="tab-content">
		<div class="tab-pane active" id="upcoming" role="tabpanel" aria-labelledby="upcoming">
			{{ BatchCard(upcoming_batches, show_price=True, label="Upcoming") }}
		</div>

		{% if is_moderator %}
		<div class="tab-pane" id="past" role="tabpanel" aria-labelledby="past">
			{{ BatchCard(past_batches, show_price=False, label="Archived") }}
		</div>

		<div class="tab-pane" id="private" role="tabpanel" aria-labelledby="private">
			{{ BatchCard(private_batches, show_price=False, label="Private") }}
		</div>
		{% endif %}

		{% if frappe.session.user != "Guest" %}
		<div class="tab-pane" id="my-batch" role="tabpanel" aria-labelledby="my-batches">
			{{ BatchCard(my_batches, show_price=False, label="Enrolled") }}
		</div>
		{% endif %}

	</div>
</article>
{% endmacro %}

{% macro BatchCard(batches, show_price=False, label="") %}
{% if batches | length %}
<div class="lms-card-parent">
	{% for batch in batches %}

	<div class="common-card-style column-card" style="min-height: 150px;">

		{% if batch.seat_count %}
			{% if batch.seats_left > 0 %}
			<div class="indicator-pill green align-self-start mb-2">
				{{ _("Seats Available") }}: {{ batch.seats_left }}
			</div>
			{% else %}
			<div class="indicator-pill red align-self-start mb-2">
				{{ _("No Seats Left") }}
			</div>
			{% endif %}
		{% endif %}

		<div class="bold-heading">
			{{ batch.title }}
		</div>

		{% if batch.description %}
		<div class="short-introduction">
			{{ batch.description }}
		</div>
		{% endif %}

		{% if show_price and batch.paid_batch %}
		<div class="bold-heading mb-2">
			{{ frappe.utils.fmt_money(batch.amount, 0, batch.currency) }}
		</div>
		{% endif %}

		<div class="mt-auto mb-2">
			<svg class="icon icon-sm">
				<use href="#icon-calendar"></use>
			</svg>
			<span>
				{{ frappe.utils.format_date(batch.start_date, "medium") }} -
			</span>
			<span>
				{{ frappe.utils.format_date(batch.end_date, "medium") }}
			</span>
		</div>

		<div class="mb-2">
			<svg class="icon icon-sm">
				<use href="#icon-clock"></use>
			</svg>
			<span>
				{{ frappe.utils.format_time(batch.start_time, "HH:mm a") }} -
			</span>
			<span>
				{{ frappe.utils.format_time(batch.end_time, "HH:mm a") }}
			</span>
		</div>

		<div class="mb-2">
			<svg class="icon icon-md">
				<use href="#icon-education"></use>
			</svg>
				{{ batch.course_count }} {{ _("Courses") }}
		</div>

		{% if is_student(batch.name) %}
			<a class="stretched-link" href="/batches/{{ batch.name }}"></a>
		{% else %}
			<a class="stretched-link" href="/batches/details/{{ batch.name }}"></a>
		{% endif %}
	</div>
	{% endfor %}
</div>
{% else %}
	<p class="text-muted mt-3">
		{{ _("No {0} batches").format(label|lower) }}
	</p>
{% endif %}
{% endmacro %}

{% macro EmptyState() %}
<div class="empty-state">
	<img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
	<div class="empty-state-text">
		<div class="empty-state-heading">{{ _("No Batches") }}</div>
		<div class="course-meta">{{ _("Please contact the Administrator for more information.") }}</div>
	</div>
</div>
{% endmacro %}

{%- block script %}
    {{ super() }}
    {{ include_script('controls.bundle.js') }}
	{% if is_moderator %}
	<script>
		frappe.boot.user = {
			"can_create": [],
			"can_select": ["LMS Category"],
			"can_read": ["LMS Category"]
		};
		let batch_info = null;
	</script>
	{% endif %}
{% endblock %}