{% 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>

	{% if class_info.description %}
	<div class="mb-4">
		{{ class_info.description }}
	</div>
	{% endif %}

	<div class="vertically-center">
		<div class="">
			<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>

		<span class="seperator"></span>

		<div class="">
			<svg class="icon icon-md">
				<use href="#icon-education"></use>
			</svg>
				{{ class_courses | length }} {{ _("Courses") }}
		</div>

		<span class="seperator"></span>

		<div class="">
			<svg class="icon icon-md">
				<use href="#icon-users"></use>
			</svg>
				{{ class_students | length }} {{ _("Students") }}
		</div>
	</div>


	{% 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 class="cards-parent">
		{% for course in class_courses %}
		{{ widgets.CourseCard(course=course, read_only=False) }}
		{% 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 class="form-grid">
		<div class="grid-heading-row">
			<div class="grid-row">
				<div class="data-row row">
					<div class="col grid-static-col">
						{{ _("Full Name") }}
					</div>
					<div class="col grid-static-col col-xs-2 text-right">
						{{ _("Courses Completed") }}
					</div>
					<div class="col grid-static-col col-xs-2 text-right">
						{{ _("Assessments Completed") }}
					</div>
					<div class="col grid-static-col col-xs-2 text-right">
						{{ _("Assessments Graded") }}
					</div>
					<div class="col grid-static-col">
						{{ _("Last Active") }}
					</div>
					{% if is_moderator %}
					<div class="col grid-static-col col-xs-1">
						<svg class="icon  icon-sm" style="filter: opacity(0.5)">
							<use class="" href="#icon-setting-gear"></use>
						</svg>
					</div>
					{% endif %}
				</div>
			</div>
		</div>
		{% for student in class_students %}
		{% set allow_progress = is_moderator or student.student == frappe.session.user %}
		<div class="grid-row">
			<div class="data-row row">
				<a class="col grid-static-col {% if allow_progress %} clickable {% endif %}" {% if allow_progress %} href="/classes/{{ class_info.name }}/students/{{ student.username }}" {% endif %}>
					{{ student.student_name }}
				</a>
				<div class="col grid-static-col col-xs-2 text-right">
					{{ student.courses_completed }}
				</div>
				<div class="col grid-static-col col-xs-2 text-right">
					{{ student.assessments_completed }}
				</div>
				<div class="col grid-static-col col-xs-2 text-right">
					{{ student.assessments_graded }}
				</div>
				<div class="col grid-static-col">
					{{ frappe.utils.format_datetime(student.last_active, "medium") }}
				</div>
				{% if is_moderator %}
				<div type="button" class="col grid-static-col col-xs-1 btn-remove-student" data-student="{{ student.student }}">
					<svg class="icon icon-sm">
						<use href="#icon-delete"></use>
					</svg>
				</div>
				{% endif %}
			</div>

			<!-- <div class="progress w-25">
				<div class="progress-bar" role="progressbar" aria-valuenow="{{ student.course_completion }}"
				aria-valuemin="0" aria-valuemax="100" style="width:{{ student.course_completion }}%">
				<span class="sr-only"> {{ student.course_completion }} {{ _("Complete") }} </span>
				</div>
			</div> -->


		</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>
	<!-- {{ ManageAssessments() }} -->
	{{ AssessmentList(assessments) }}
</article>
{% endmacro %}


{% macro ManageAssessments() %}
{% 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="">
						{% if all_assignments | length %}
							<div>
								<div class="clickable flex align-center field-label mb-2" data-toggle="collapse" data-target="#assignments-list">
									{{ _("Assignments") }}
									<svg class="icon icon-sm ml-2">
										<use class="mb-1" href="#icon-down"></use>
									</svg>
								</div>
								<div id="assignments-list" class="collapse">
									{% 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>
								<hr>
							</div>
						{% endif %}
						{% if all_quizzes | length %}
							<div>
								<div class="clickable flex align-center field-label mb-2" data-toggle="collapse" data-target="#quiz-list">
									<div>
										{{ _("Quizzes") }}
									</div>
									<svg class="icon icon-sm ml-2">
										<use class="mb-1" href="#icon-down"></use>
									</svg>
								</div>
								<div id="quiz-list" class="collapse">
									{% 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>
							</div>
						{% endif %}
					</div>

				</form>

			</div>

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

{% macro AssessmentList(assessments) %}
{% if assessments | length %}
	<div class="form-grid">
		<div class="grid-heading-row">
			<div class="grid-row">
				<div class="row data-row">
					<div class="col grid-static-col">
						{{ _("Title") }}
					</div>
					<div class="col grid-static-col">
						{{ _("Type") }}
					</div>
				</div>
			</div>
		</div>

		<div class="grid-body">
			<div class="rows">
				{% for assessment in assessments %}
					<div class="grid-row">
						<div class="row data-row">
							<a class="col grid-static-col clickable" href="{{ assessment.edit_url }}">
								{{ assessment.title }}
							</a>
							<div class="col grid-static-col">
								{{ assessment.assessment_type.split("LMS ")[1] }}
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</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="common-card-style column-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="bold-heading 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", "LMS Assignment", "LMS Quiz"],
			"can_read": ["User", "LMS Category", "LMS Assignment", "LMS Quiz"]
		};

		frappe.boot.single_types = []

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

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