{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg pt-1 border-primary rounded">
				<div class="card-header border-primary">
                    <center>
                        <h2>{{ legend|upper }}
                            <i class="fa fa-arrow-right"></i>
                            <a class="btn btn-sm btn-info mb-1" href="{% url 'train-hr-plan-list' %}">Lista Treinamento <i class="fa fa-users-rays"></i></a>
                            <a class="btn btn-sm btn-success mb-1" href="{% url 'hr-scho-list' %}">Lista Bolso Estudo <i class="fa fa-graduation-cap"></i></a>
                        </h2>
                    </center>
                </div>
				<div class="card-body">
                    <div class="row mt-2">
                        <div class="col-sm-6">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="tyear_data"></div>
                                    </figure>
                                </div>
                            </div>
                        </div><!--end col-->
                        <div class="col-sm-6">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="tunit_data"></div>
                                    </figure>
                                </div>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                    <hr class="border-primary"/>
                    <div class="row">                        
                        <div class="col-sm-12">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="tdep_data"></div>
                                    </figure>
                                </div>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div> <!--end container-->
{% endblock %}
{% block scripts %}}
    <!-- Charts-->
    <script src="{% static 'main/js/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'main/js/highcharts/sankey.js' %}"></script>
    <script src="{% static 'main/js/highcharts/organization.js' %}"></script>
    <script src="{% static 'main/js/highcharts/data.js' %}"></script>
    <script src="{% static 'main/js/highcharts/export-data.js' %}"></script>
    <script src="{% static 'main/js/highcharts/exporting.js' %}"></script>
    <script src="{% static 'main/js/highcharts/accessibility.js' %}"></script>
    <script src="{% static 'main/js/highcharts/3d.js' %}"></script>
    <script src="{% static 'main/js/highcharts/cylinder.js' %}"></script>
    <script>
        {% include 'training_chart/myoption.js' %}
        {% include 'training_chart/train_year.js' %}
        {% include 'training_chart/train_dep.js' %}
        {% include 'training_chart/train_unit.js' %}
    </script>
{% endblock %}