{% extends 'tom_common/base.html' %}
{% block title %}Calendar{% endblock %}
{% block content %}
  {% include 'tom_calendar/partials/calendar.html' %}
  <!-- Modal -->
  <div class="modal fade" id="cal-modal" tabindex="-1" aria-labelledby="calModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="cal-modal-body">
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block extra_javascript %}
<script>
  document.body.addEventListener("calClose", function () {
    $("#cal-modal").modal("hide");
  });
  document.body.addEventListener("calRefresh", function () {
    const cal = document.getElementById("calendar-partial");
    htmx.ajax("GET", cal.dataset.url, {target: "#calendar-partial", swap: "outerHTML"});
  });
</script>
{% endblock %}