{% load sekizai_tags static i18n tz %}
{% get_current_timezone as TIME_ZONE %}

<div id="calendarbox">&nbsp;</div>
<!-- Modal -->

<div aria-labelledby="eventDetails" class="modal fade my-5" id="eventContent" role="dialog" tabindex="-1" title="{% trans 'Event Details' %}">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-label="{% trans 'Close' %}" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
				<h3 class="modal-title" id="eventTitle">&nbsp;</h3>
			</div>

			<div class="modal-body">
				<dl>
					<dt>{% trans "Start" %}:</dt>
					<dd id="startTime">&nbsp;</dd>
					<dt>{% trans "End" %}:</dt>
					<dd id="endTime">&nbsp;</dd>
				</dl>
				<div id="eventInfo">&nbsp;</div>
			</div>
			<div class="modal-footer"><a class="btn btn-secondary" href="" id="eventLink" target="_blank" type="button">{% trans "Read More" %}</a><button class="btn btn-secondary" data-dismiss="modal" id="closeLink" type="button">{% trans "Close" %}</button></div>
		</div>
	</div>
</div>

{% addtoblock "css" %}
	<link rel='stylesheet' href='{% static 'fullcalendar/fullcalendar.min.css' %}' />
{% endaddtoblock %}
{% addtoblock "css" %}
	<style media="screen" type="text/css">
	.fc-day-grid-event > .fc-content {
	    white-space: normal;
	}

	/* basic positioning */
	.legend { list-style: none; padding: 25px 0;}
	.legend li { float: left; margin-right: 20px; }
	.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px 10px 2px 2px; }
	</style>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src='{% static 'jquery-ui/jquery-ui.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src='{% static 'moment/moment.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script src='{% static 'fullcalendar/fullcalendar.min.js' %}'></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script type="text/javascript">
	$(document).ready(function() {

	    // page is now ready, initialize the calendar...

	    $('#calendarbox').fullCalendar({
	        // put your options and callbacks here
	        events: "{% url 'jsonCalendarFeed' %}",
	        timezone: "{{ TIME_ZONE }}",
	        height: "auto",
	        eventTextColor: '#ffffff',
	        eventColor: '#477087',
	        aspectRatio: 1,
	        eventRender: function (event, element) {
	            element.attr('href', 'javascript:void(0);');
	            element.click(function() {
	                $("#startTime").html(moment(event.start).format('MMM Do h:mm A'));
	                $("#endTime").html(moment(event.end).format('MMM Do h:mm A'));
	                $("#eventTitle").html(event.title);
	                $("#eventInfo").html(event.description);
	                $("#eventLink").attr('href', event.url);
	                $("#eventContent").modal();
	            });
	        },
	    });
	    $("#closeLink").click(function() {
	        $("#eventContent").hide();
	    });
	});
	</script>
{% endaddtoblock %}
