{% set onboarding_status = is_onboarding_complete() %}

{% if has_course_moderator_role() and not onboarding_status.is_onboarded %}
<div class="onboarding-parent">
	<div class="container">
		<div class="onboarding-skip">{{ _("Skip") }}</div>
		<div class="page-title">
			{{ _("Get Started") }}
		</div>
		<div class="onboarding-subtitle">
			{{ _("Lets start setting up your content on the LMS so that you can reclaim time and focus on growth.") }}
		</div>
		<div class="onboarding-steps">
			<a class="onboarding-steps-link" href="/courses/new-course/edit">
				<svg class="icon icon-md mr-2">
					<use href="{% if onboarding_status.course_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
					</use>
				</svg>
				{{ _("Create a Course") }}
			</a>
			<a class="onboarding-steps-link" {% if onboarding_status.course_created %}  href="/courses/{{ onboarding_status.first_course }}/outline" {% else %} disabled {% endif %}>
				<svg class="icon icon-md mr-2">
					<use href="{% if onboarding_status.chapter_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
					</use>
				</svg>
				{{ _("Add a Chapter") }}
			</a>
			<a class="onboarding-steps-link" {% if onboarding_status.chapter_created %} href="/courses/{{ onboarding_status.first_course }}/learn/1.1/edit" {% endif %}>
				<svg class="icon icon-md mr-2">
					<use href="{% if onboarding_status.lesson_created %} #icon-green-check-circled {% else %} #icon-disabled-check {% endif %}">
					</use>
				</svg>
				{{ _("Add a Lesson") }}
			</a>
		</div>

	</div>
</div>
{% endif %}

<script>
	frappe.ready(() => {

		$(".onboarding-skip").click((e) => {
			skip_onboarding(e);
		});

	});

	const skip_onboarding = (e) => {
		frappe.call({
			method: "frappe.client.set_value",
			args: {
				doctype: "LMS Settings",
				name: "LMS Settings",
				fieldname: "is_onboarding_complete",
				value: 1,
			},
			freeze: true,
			callback: function (data) {
				window.location.reload();
			}
		});
	}
</script>