{% macro hero(title, description, has_access, back) %}
	<div class='container pb-5'>
		<div class="mb-3">
			<a href="{{ back.url }}" class="text-muted">
				Back to {{ back.name }}
			</a>
		</div>
		<h1>{{ title }}</h1>
		<p class='lead' style="max-width: 100%;">{{ description or ''}}</p>
		<p class="mt-4">
			{% if frappe.session.user == 'Guest' %}
			<a id="signup" class="btn btn-primary btn-lg" href="/login#signup">Sign Up</a>
			{% elif not has_access %}
			<button id="enroll" class="btn btn-primary btn-lg" onclick="enroll()" disabled>Enroll</button>
			{% endif %}
		</p>
	</div>

{% block script %}
<script type="text/javascript">
	frappe.ready(() => {
		btn = document.getElementById('enroll');
		if (btn) btn.disabled = false;
	})

	function enroll() {
		let params = frappe.utils.get_query_params()

		let btn = document.getElementById('enroll');
		btn.disbaled = true;
		btn.innerText = 'Enrolling...'

		let opts = {
			method: 'erpnext.education.utils.enroll_in_program',
			args: {
				program_name: params.program
			}
		}

		frappe.call(opts).then(res => {
			let success_dialog = new frappe.ui.Dialog({
				title: __('Success'),
				secondary_action: function() {
					window.location.reload()
				}
			})
			success_dialog.set_message('You have successfully enrolled for the program ');
			success_dialog.$message.show()
			success_dialog.show();
			btn.disbaled = false;
		})
	}
</script>
{% endblock %}
{% endmacro %}