{% extends 'themes/'~layout_dir~'/layout.html' %}
{% block body %}

<style>
	.gantt .bar-progress{
		fill: {{app.colors_map[themebasiccolor]}};
	}
	.handle-group{
		display: none;
	}
</style>

<div class="row">
	{% include 'themes/default/modules/PortalModule/module.actions.html' %}
</div>

<div class="row">

	<div class="col s12 center-align">
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gantt.change_view_mode('Day')">Day View</a>
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gantt.change_view_mode('Week')">Week View</a>
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-small" href="javascript:gantt.change_view_mode('Month')">Month View</a>
	</div>
	
  <div id="admin" class="col s12">
	<br>
	
	
      <div class="myc-responsive-container" style="min-height: 100%">	      
	  	<svg id="gantt" height="500" style="background-color: #ffffff; border-top: 3px solid {{app.colors_map[themebasiccolor]}};"></svg>
	  </div>
	
	
  </div>
  
  {% if create_enabled is defined and create_enabled %} 
		<div class="col s12 right-align">
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" href="{{app.request.requestUri}}create"><i class="material-icons large left">add</i>{{"Create New"|trans}}</a>
		</div>
	{% endif %}
</div>

{% endblock %}
{% block footerscripts %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="{{app.config.app_url}}/app/themes/default/resources/frappe-gantt.min.js"></script>

<script>
	
	
	
	var tasks = {{gantt_records|json_encode()|raw}};
	var gantt = new Gantt("#gantt", tasks, {
	    // can be a function that returns html
	    // or a simple html string
	    custom_popup_html: function(task) {
	      // the task object will contain the updated
	      // dates and progress value
	      const end_date = task._end.format('MMM D');
	      return '<div class="details-container">'
	        +'<h5>'+task.name+'</h5>'
	        +'<p>Expected to finish by '+end_date+'</p>'
	        +'<p>'+task.progress+'% completed!</p>'
	        +'<a class="btn btn-small {{themebasiccolor}}" onclick="gotoPage(\'{{app.config.base_url}}/{{current_route}}/'+task.crmid+'\')" >View Details</a>'
	        +'</div>';
	    }
	});

</script>

{% endblock %}