{% load sekizai_tags static i18n %}

<div class="toc card">
	<h5 class="card-header">{% trans "Table of Contents" %}</h5>
	<div class="list-group" id="toc">
	</div>
</div>

{% addtoblock "js" %}
	<script type="text/javascript" charset="utf-8" src="{% static 'tableofcontents/jquery.tableofcontents.min.js' %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
	<script type="text/javascript" charset="utf-8">
	$( document ).ready(function() {
	    $("#toc").tableOfContents(
		$('.content-col'),			// Scoped to content block
		{
			startLevel: 2,
			depth: 1,
			topLinks: false,
			levelClass: "list-group-item",
		}
		);
	        function ChangeDiv(width){
	            if (width < 992) {
	                $('.toc:first').parent('div.contentblock').detach().insertBefore('.content-col div.contentblock:first');
	            } else {
	                $('.sidebar-col').prepend($('.toc:first').parent('div.contentblock'));
	            }
	        }

	        var onLoadWidth = $(window).width();
	        ChangeDiv(onLoadWidth);
	    
	        $(window).resize(function () {
	            var resizeWidth = $(window).width();
	            ChangeDiv(resizeWidth);
	        });
	    });
	</script>
{% endaddtoblock %}
