{% extends "templates/base.html" %}
{% block title %} Batch {% endblock %}

{% block head_include %}
<meta name="description" content="Courses" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
{% endblock %}

{% block content %}
<div class="container mt-5">
  {{ widgets.BatchTabs(course=course, membership=membership) }}
  <div class="course-details mt-5">
    {{ widgets.CourseOutline(course=course, batch=batch, show_link=True, show_progress=True) }}
  </div>

  {% if batch %}
  <div class="w-25">
    <h3>Batch Schedule</h3>
    {{ widgets.RenderBatch(course=course, batch=batch) }}
  </div>

  {% if batch.description %}
  <div class="mt-5">
    <h3>Batch Details</h3>
    {{ frappe.utils.md_to_html(batch.description) }}
  </div>
  {% endif %}
  {% endif %}
  {% if course.is_mentor(frappe.session.user) %}
  {% set invite_link = frappe.utils.get_url() + "/courses/" + course.name + "/join?batch=" + batch.name %}
  <div class="">
    <h3> Invite Members </h3>
    <a href="" class="" id="invite-link" data-link="{{ invite_link }}">Get Batch Invitation
      Link</a>
    <small id="copy-message" class="text-muted" style="display: none;">Copied to Clipboard.</small>
  </div>
  {% endif %}

</div>

<script>
  frappe.ready(() => {
    $("#invite-link").click((e) => {
      e.preventDefault();
      var link_element = $("#invite-link");
      var input_element = document.createElement("input");
      input_element.value = link_element.attr("data-link")
      document.body.appendChild(input_element);
      input_element.select();
      document.execCommand("copy");
      input_element.remove();
      $("#copy-message").slideDown(function () {
        setTimeout(function () {
          $("#copy-message").slideUp();
        }, 2000);
      });
    })
  })
</script>
{% endblock %}