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


{% block page_content %}
<div class="common-page-style lms-page-style">
	<div class="container">
		{{ BreadCrumb(class_info) }}
		<div class="">
			{{ ClassDetails(class_info) }}
			{{ ClassSections(class_info, class_courses, class_students, published_courses) }}
		</div>
	</div>
</div>
{% endblock %}


<!-- BreadCrumb -->
{% macro BreadCrumb(class_info) %}
<div class="breadcrumb">
    <a class="dark-links" href="/classes">{{ _("All Classes") }}</a>
    <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
    <span class="breadcrumb-destination">{{ class_info.title }}</span>
</div>
{% endmacro %}


<!-- Class Details -->
{% macro ClassDetails(class_info) %}
<div class="class-details" data-class="{{ class_info.name }}">

	<div class="page-title">
		{{ class_info.title }}
	</div>
	<div class="mt-1">
		<svg class="icon icon-sm">
			<use href="#icon-calendar"></use>
		</svg>
		<span>
			{{ frappe.utils.format_date(class_info.start_date, "long") }} -
		</span>
		<span>
			{{ frappe.utils.format_date(class_info.end_date, "long") }}
		</span>
	</div>
	{% if class_info.description %}
	<div class="mt-1">
		{{ class_info.description }}
	</div>
	{% endif %}

	{% if class_info.custom_component %}
		{{ class_info.custom_component }}
	{% endif %}
</div>
{% endmacro %}


<!-- Class Sections -->
{% macro ClassSections(class_info, class_courses, class_students, published_courses) %}
<div class="mt-4">

	{% if is_moderator %}
	<button class="btn btn-default btn-sm pull-right" id="create-class">
		{{ _("Edit") }}
	</button>
	{% endif %}

	<ul class="nav lms-nav" id="classes-tab">
		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#courses">
				{{ _("Courses") }}
				<span class="course-list-count">
					{{ class_courses | length }}
				</span>
			</a>
		</li>

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

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

		{% if class_students | length and (is_moderator or is_student) %}
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#live-class">
				{{ _("Live Class") }}
				<span class="course-list-count">
					{{ live_classes | length }}
				</span>
			</a>
		</li>
		{% endif %}

	</ul>

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

	<div class="tab-content">
		<div class="tab-pane active" id="courses" role="tabpanel" aria-labelledby="courses">
			{{ CoursesSection(class_info, class_courses, published_courses) }}
		</div>

		<div class="tab-pane" id="students" role="tabpanel" aria-labelledby="students">
			{{ StudentsSection(class_info, class_students) }}
		</div>

		{% if is_moderator %}
		<div class="tab-pane" id="assessments" role="tabpanel" aria-labelledby="assessments">
			{{ AssessmentsSection(class_info) }}
		</div>
		{% endif %}

		{% if class_students | length and (is_moderator or is_student) %}
		<div class="tab-pane" id="live-class" role="tabpanel" aria-labelledby="live-class">
			{{ LiveClassSection(class_info, live_classes) }}
		</div>
		{% endif %}

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


{% macro CoursesSection(class_info, class_courses, published_courses) %}
<article>
	<header class="mb-5">
		<div class="edit-header">
			<div class="bold-heading">
				{{ _("Courses") }}
			</div>
			{% if is_moderator %}
			<button class="btn btn-default btn-sm btn-add-course">
				{{ _("Add Courses") }}
			</button>
			{% endif %}
		</div>
	</header>

	{% if class_courses | length %}
	<div>
		{% for course in class_courses %}
		<div class="list-row level">
			<a class="clickable" href="/courses/{{ course.course }}">
				{{ course.title }}
			</a>
			{% if is_moderator %}
			<div type="button" class="btn-remove-course" data-course="{{ course.course }}">
				<svg class="icon icon-sm">
					<use href="#icon-delete"></use>
				</svg>
			</div>
			{% endif %}
		</div>
		{% endfor %}
	</div>
	{% else %}
	<div class="">
		{{ _("No courses") }}
	</div>
	{% endif %}


</article>
{% endmacro %}


{% macro StudentsSection(class_info, class_students) %}
<article>
	<header>
		<div class="edit-header mb-5">
			<div class="bold-heading">
				{{ _("Students") }}
			</div>
			{% if is_moderator %}
			<button class="btn btn-default btn-sm btn-add-student">
				{{ _("Add Students") }}
			</button>
			{% endif %}
		</div>
	</header>

	{% if class_students | length %}
	<div>
		{% for student in class_students %}
		{% set last_active = frappe.db.get_value("User", student.student, "last_active") %}
		{% set allow_progress = is_moderator or student.student == frappe.session.user %}

		<div class="list-row level">
			<div>
				<a {% if allow_progress %} class="clickable" href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
					{{ student.student_name }}
				</a>
			</div>
			{% if is_moderator %}
			<div type="button" class="btn-remove-student" data-student="{{ student.student }}">
				<svg class="icon icon-sm">
					<use href="#icon-delete"></use>
				</svg>
			</div>
			{% endif %}
		</div>

		{% endfor %}
	</div>
	{% else %}
	<p class="text-muted mt-3"> {{ _("No Students") }} </p>
	{% endif %}
</article>
{% endmacro %}


{% macro AssessmentsSection(class_info) %}
<article>
	<header class="edit-header mb-5">
		<div class="bold-heading">
			{{ _("Assessments") }}
		</div>
		{% if is_moderator %}
		<button class="btn btn-default btn-sm" id="open-assessment-modal">
			{{ _("Manage Assessments") }}
		</button>
		{% endif %}
	</header>
	{{ CreateAssessment() }}
	{{ AssessmentList(assessments) }}
</article>
{% endmacro %}


{% macro CreateAssessment() %}
{% if is_moderator %}
<div class="modal fade assessment-modal" id="assessment-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title">{{ _("Manage Assessments") }}</div>
			</div>

			<div class="modal-body">
				<div class="mb-5">
					<div class="field-label">
						{{ _("Create New") }}
					</div>
					<p class="field-description">
						{{ _("To create a new assignment or quiz for this class, click on the buttons below. Once you have created the new assignment or quiz you can come back and add it from here.") }}
					</p>
					<div class="flex">
						<a class="btn btn-default btn-sm" href="/assignments/new-assignment">
							{{ _("Create Assignment") }}
						</a>
						<a class="btn btn-default btn-sm ml-2" href="/quizzes/new-quiz">
							{{ _("Create Quiz") }}
						</a>
					</div>
				</div>

				<form class="" id="assessment-form">
					<div class="field-label mb-2">
						{{ _("Select Assessments") }}
					</div>
					<p class="field-description">
						{{ _("Select the assessments you wish to include for this class. Your selections will be automatically saved upon clicking. If you decide to remove an item from the list, simply uncheck it.") }}
					</p>
					<div class="flex justify-content-between">
						{% if all_assignments | length %}
							<div>
								<div class="field-label mb-2">
									{{ _("Assignments") }}
								</div>
								{% for assignment in all_assignments %}
									<div>
										<label class="vertically-center">
											<input type="checkbox" class="assessment-item" {% if assignment.checked %} checked {% endif %} value="{{ assignment.name }}" data-type="LMS Assignment" data-name="{{ assignment.name }}">
											{{ assignment.title }}
										</label>
									</div>
								{% endfor %}
							</div>
						{% endif %}
						{% if all_quizzes | length %}
							<div>
								<div class="field-label mb-2">
									{{ _("Quizzes") }}
								</div>
								{% for quiz in all_quizzes %}
									<div>
										<label class="vertically-center">
											<input type="checkbox" class="assessment-item" {% if quiz.checked %} checked {% endif %} value="{{ quiz.name }}" data-type="LMS Quiz" data-name="{{ quiz.name }}">
											{{ quiz.title }}
										</label>
									</div>
								{% endfor %}
							</div>
						{% endif %}
					</div>

				</form>

			</div>

			<div class="modal-footer">
				<button class="btn btn-primary btn-sm btn-assessment-close" data-dismiss="modal" aria-label="Close">
					{{ _("Done") }}
				</button>
			</div>
		</div>
	</div>
</div>
{% endif %}
{% endmacro %}

{% macro AssessmentList(assessments) %}
{% if assessments | length %}
	<div>
		<div class="list-row level level-left small">
			<div class="w-25">
				{{ _("Title") }}
			</div>
			<div class="">
				{{ _("Type") }}
			</div>
		</div>
		{% for assessment in assessments %}
		<div class="list-row level level-left">
			<div class="w-25">
				<a class="clickable" href="{{ assessment.edit_url }}">
					{{ assessment.title }}
				</a>
			</div>
			<div class="">
				{{ assessment.assessment_type.split("LMS ")[1] }}
			</div>
		</div>
		{% endfor %}
	</div>
	{% else %}
	<p class="text-muted mt-3"> {{ _("No Assessments") }} </p>
	{% endif %}
{% endmacro %}


{% macro LiveClassSection(class_info, live_classes) %}
<article>
	<header class="edit-header">
		<div class="bold-heading">
			{{ _("Live Class") }}
		</div>
		{% if is_moderator %}
		<button class="btn btn-default btn-sm" id="open-class-modal">
			{{ _("Create a Live Class") }}
		</button>
		{% endif %}
	</header>
	{{ CreateLiveClass(class_info) }}
	{{ LiveClassList(class_info, live_classes) }}
</div>
{% endmacro %}


{% macro CreateLiveClass(class_info) %}

{% if is_moderator %}
<div class="modal fade live-class-modal" id="live-class-modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title">{{ _("Live Class Details") }}</div>
			</div>


			<div class="modal-body">
				<form class="live-class-form" id="live-class-form"></form>
			</div>


			<div class="modal-footer">
				<button class="btn btn-secondary btn-sm mr-2" data-dismiss="modal" aria-label="Close">
					{{ _("Discard") }}
				</button>

				<button class="btn btn-primary btn-sm" id="create-live-class">
					{{ _("Submit") }}
				</button>
			</div>
		</div>
	</div>
</div>
{% endif %}

{% endmacro %}


{% macro LiveClassList(class_info, live_classes) %}
<div class="lms-card-parent mt-5">
	{% if live_classes | length %}
	{% for class in live_classes %}
	<div class="lms-card">

		<div class="mb-0">
			<div class="dropdown pull-right">
				<svg class="icon icon-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<use href="#icon-dot-horizontal"></use>
				</svg>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					{% if class.owner == frappe.session.user %}
					<li>
						<a class="dropdown-item small" href="{{ class.start_url }}"> {{ _("Start") }} </a>
					</li>
					{% endif %}
					{% if is_student %}
					<li>
						<a class="dropdown-item small" href="{{ class.join_url }}"> {{ _("Join") }} </a>
					</li>
					{% endif %}

				</ul>
			</div>
			<div class="lms-card-title mb-4">
				{{ class.title }}
			</div>
		</div>
		<div>
			<svg class="icon icon-sm">
				<use href="#icon-calendar"></use>
			</svg>
			{{ frappe.utils.format_date(class.date, "full") }}
		</div>
		<div>
			<svg class="icon icon-sm">
				<use href="#icon-clock"></use>
			</svg>
			{{ frappe.utils.format_time(class.time, "hh:mm a") }}
		</div>

		<div class="mt-4">
			{{ class.description }}
		</div>

	</div>
	{% endfor %}
	{% else %}
	<p class=""> {{ _("No Live Classes") }} </p>
	{% endif %}
</div>
{% endmacro %}

{%- block script %}
	{{ super() }}
	{% if is_moderator %}
	<script>
		frappe.boot.user = {
			"can_create": [],
			"can_select": ["User", "LMS Category"],
			"can_read": ["User", "LMS Category"]
		};

		frappe.router = {
			slug (name) {
				return name.toLowerCase().replace(/ /g, "-");
			}
		}
		let class_info = {{ class_info | json }};
	</script>
	{% endif %}

	{{ include_script('controls.bundle.js') }}
{% endblock %}