{% if related_modules_records|length > 0 %}
    <div class="col s12 m12 mt30">
	          	  <h5>{{'LBL_RELATED'|trans|raw}}</h5>
		</div>
<div class="col s12 m12">
  <ul class="collapsible-block popout relatedtab" data-collapsible="expandable">	
  	{% for relatedmodulename,relatedmodule in related_modules_records %}
  	<li>
	<div class="collapsible-header" >
				<i class="material-icons left more" >chevron_right</i>
				<i class="material-icons left less" style="display: none">expand_more</i>
				<span>{{"LBL_RELATED_MULTIPLE"|trans|raw}} {{relatedmodulename|trans|raw}}</span>
				<div class="myc-divider"></div>
				</div>
				<div class="collapsible-body">
		

		{% if relatedmodule["records"]|length > 0 %}
		<div class="col s12 m12">
  	<div class="card material-table myc-responsive-card">
      
      <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>
    </div>
    
    
    {% 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.base_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 btn-{{themebasiccolor}}" onclick="gotoPage(\'{{app.config.base_url}}/{{app.config.enabled_modules[modulename].route}}/'+task.crmid+'\')" >View Details</a>'
	        +'</div>';
	    }
	});

</script>

{% endblock %}


    {% else %}
    <div class="col s12"><h5><small>{{"LBL_NO_DATA"|trans|raw}} </small></h5></div>
    
    <div class="clearfix"></div>
		
    {% endif %}
    
    		
				{% if relatedmodulename=="Documents" and upload_document_enabled is defined and upload_document_enabled and app.upload_enabled %} 
				<br>
		<div class="center-align mb30">
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" href="#uploadmodal"><i class="material-icons large left">file_upload</i>{{"Upload Document"|trans}}</a>
		</div>
		
	{% endif %}
    
    
    </div>
    <div class="clearfix"></div>
  	</li>
  	{% endfor %}
	</ul>

		</div>
		
	{% endif %}