{% layout 'layout' %}
{% block title %}Gantt Chart{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>Advanced Forms</li>
<li class="active"><a href="form-gantt.html">Gantt Chart</a></li>
{% endblock %}

{% block styles %}
{{ "plugins/jquery-gantt/css/style.css" | asset_url | stylesheet_tag }}       <!-- jQuery.Gantt -->
{% endblock %}

{% block scripts %}
{{ "plugins/jquery-gantt/js/jquery.fn.gantt.min.js" | asset_url | script_tag }}     	<!-- jQuery.Gantt -->

<script>
$("#gantt-placeholder").gantt({
	source: [{
		name: "Sprint 0",
		desc: "Analysis",
		values: [{
			from: "/Date(1320192000000)/",
			to: "/Date(1322401600000)/",
			label: "Requirement Gathering",
			customClass: "ganttRed"
		}]
	},{
		name: " ",
		desc: "Scoping",
		values: [{
			from: "/Date(1322611200000)/",
			to: "/Date(1323302400000)/",
			label: "Scoping",
			customClass: "ganttRed"
		}]
	},{
		name: "Sprint 1",
		desc: "Development",
		values: [{
			from: "/Date(1323802400000)/",
			to: "/Date(1325685200000)/",
			label: "Development",
			customClass: "ganttGreen"
		}]
	},{
		name: " ",
		desc: "Showcasing",
		values: [{
			from: "/Date(1325685200000)/",
			to: "/Date(1325695200000)/",
			label: "Showcasing",
			customClass: "ganttBlue"
		}]
	},{
		name: "Sprint 2",
		desc: "Development",
		values: [{
			from: "/Date(1326785200000)/",
			to: "/Date(1325785200000)/",
			label: "Development",
			customClass: "ganttGreen"
		}]
	},{
		name: " ",
		desc: "Showcasing",
		values: [{
			from: "/Date(1328785200000)/",
			to: "/Date(1328905200000)/",
			label: "Showcasing",
			customClass: "ganttBlue"
		}]
	},{
		name: "Release Stage",
		desc: "Training",
		values: [{
			from: "/Date(1330011200000)/",
			to: "/Date(1336611200000)/",
			label: "Training",
			customClass: "ganttOrange"
		}]
	},{
		name: " ",
		desc: "Deployment",
		values: [{
			from: "/Date(1336611200000)/",
			to: "/Date(1338711200000)/",
			label: "Deployment",
			customClass: "ganttOrange"
		}]
	},{
		name: " ",
		desc: "Warranty Period",
		values: [{
			from: "/Date(1336611200000)/",
			to: "/Date(1349711200000)/",
			label: "Warranty Period",
			customClass: "ganttOrange"
		}]
	}],
	scale: "weeks",
	minScale: "weeks",
	maxScale: "months",
	itemsPerPage: 10,
	onItemClick: function(data) {
		bootbox.alert("Item clicked - show some details");
	},
	onAddClick: function(dt, rowId) {
		bootbox.alert("Empty space clicked - add an item!");
	},
	onRender: function() {
		console.log("Gantt Chart rendered");
	}
});
</script>
{% endblock %}

{% block content %}
<div class="panel panel-default">
	<div class="panel-heading">
		<h2>Gantt Chart</h2>
	</div>
	<div class="panel-body panel-no-padding">
		<div id="gantt-placeholder"></div>
	</div>
</div>
{% endblock %}