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


{% block page_content %}
<div class="common-page-style lms-page-style">
    {{ BatchHeader(batch_info) }}
	<div class="container">
        {{ BatchOverlay(batch_info, courses, students) }}
        <div class="pt-10">
            {{ BatchDetails(batch_info) }}
            {{ CourseList(courses) }}
        </div>
	</div>
    {{ BatchDetailsRaw() }}
</div>
{% endblock %}

{% macro BatchHeader(batch_info) %}
<div class="course-head-container">
    <div class="container">
        <div class="course-card-wide">
            {{ BreadCrumb(batch_info) }}
            {{ BatchHeaderDetails(batch_info, courses, students) }}
        </div>
    </div>
</div>
{% endmacro %}

{% macro BreadCrumb(batch_info) %}
<article class="mb-8">
    <a class="dark-links" href="/batches">
        {{ _("All Batches") }}
    </a>
    <img class="" src="/assets/lms/icons/chevron-right.svg">
    <span class="breadcrumb-destination">
        {{ _("Batch Details") }}
    </span>
</article>
{% endmacro %}

{% macro BatchHeaderDetails(batch_info, courses, students) %}
    <div class="class-details" data-batch="{{ batch_info.name }}">

        <div class="page-title">
            {{ batch_info.title }}
        </div>

        <div class="">
            {{ batch_info.description }}
        </div>

        <div class="mt-8">
            <svg class="icon icon-sm">
                <use href="#icon-calendar"></use>
            </svg>
            <span>
                {{ frappe.utils.format_date(batch_info.start_date, "long") }} -
            </span>
            <span>
                {{ frappe.utils.format_date(batch_info.end_date, "long") }}
            </span>
        </div>

        {% if batch_info.start_time and batch_info.end_time %}
        <div class="mt-1">
            <svg class="icon icon-sm">
                <use href="#icon-clock"></use>
            </svg>
            <span>
                {{ frappe.utils.format_time(batch_info.start_time, "hh:mm a") }} -
            </span>
            <span>
                {{ frappe.utils.format_time(batch_info.end_time, "hh:mm a") }}
            </span>
        </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro BatchOverlay(batch_info, courses, students) %}
<div class="course-overlay-card class-overlay">

    <div class="course-overlay-content">

        {% if batch_info.seat_count %}
            {% if seats_left %}
            <div class="indicator-pill green pull-right">
                {{ _("Seats Available") }}: {{ seats_left }}
            </div>
            {% else %}
            <div class="indicator-pill red pull-right">
                {{ _("No seats left") }}
            </div>
            {% endif %}
        {% endif %}

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

        <div class="vertically-center mt-2">
            <svg class="icon icon-md mr-1">
                <use href="#icon-education"></use>
            </svg>
            {{ courses | length }} {{ _("Courses") }}
        </div>

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

        {% if batch_info.start_time and batch_info.end_time %}
        <div class="mt-2">
            <svg class="icon icon-sm">
                <use href="#icon-clock"></use>
            </svg>
            <span>
                {{ frappe.utils.format_time(batch_info.start_time, "hh:mm a") }} -
            </span>
            <span>
                {{ frappe.utils.format_time(batch_info.end_time, "hh:mm a") }}
            </span>
        </div>
        {% endif %}

        <div class="mt-2">
            {% if is_moderator or is_evaluator %}
            <a class="btn btn-primary wide-button" href="/batches/{{ batch_info.name }}">
                {{ _("Manage Batch") }}
            </a>
            {% elif batch_info.paid_batch %}
            <a class="btn btn-primary wide-button {% if batch_info.seat_count and not seats_left %} hide {% endif %}"
                href="/billing/batch/{{ batch_info.name }}">
                {{ _("Register Now") }}
            </a>
            {% else %}
            <div class="alert alert-info">
                {{ _("To join this batch, please contact the Administrator.") }}
            </div>
            {% endif %}
        </div>
        {% if is_moderator %}
        <div class="mt-2">
            <div class="btn btn-secondary wide-button" id="create-batch">
                {{ _("Edit") }}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endmacro %}


{% macro BatchDetails(batch_info) %}
<div class="batch-details">
   {{ batch_info.batch_details }}
</div>
{% endmacro %}


{% macro CourseList(courses) %}
{% if courses | length or is_moderator %}
<div class="batch-course-list">

    <div class="flex align-center">
        <div class="page-title">
            {{ _("Courses") }}
        </div>
        {% if is_moderator %}
        <button class="btn btn-default btn-sm btn-add-course ml-4">
            {{ _("Add Course") }}
        </button>
        {% endif %}
    </div>

    {% if courses | length %}
	<div class="cards-parent mt-2">
		{% for course in courses %}
		<div class="h-100">
            {% if is_moderator %}
            <div class="card-buttons">
                <button class="btn icon-btn btn-default btn-edit-course"
                    data-name="{{ course.batch_course }}" data-course="{{ course.name }}"
                    {% if course.evaluator %} data-evaluator="{{ course.evaluator }}" {% endif %}>
                    <svg class="icon icon-sm">
                        <use href="#icon-edit"></use>
                    </svg>
                </button>
                <button class="btn icon-btn btn-default btn-remove-course ml-2" data-course="{{ course.name }}">
                    <svg class="icon icon-sm">
                        <use href="#icon-delete"></use>
                    </svg>
                </button>
            </div>
            {% endif %}
			{{ widgets.CourseCard(course=course, read_only=False) }}
		</div>
		{% endfor %}
	</div>
	{% else %}
	<div class="">
		{{ _("No courses") }}
	</div>
	{% endif %}
</div>
{% endif %}
{% endmacro %}


{% macro BatchDetailsRaw() %}
    {% if batch_info.batch_details_raw %}
        <div class="mt-10 pt-10">
            {{ batch_info.batch_details_raw }}
        </div>
    {% endif %}
{% endmacro %}

{%- block script %}
    {{ super() }}
	{% if is_moderator %}
    <script>
        let batch_info = {{ batch_info | json }};
    </script>
    {% endif %}
{% endblock %}