{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'cont-dash' %}">PAINEL KONTRATU</a></li>
			<li class="breadcrumb-item active">{{ legend|upper }}</li>
		</ul>
	</div>
</div>
<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-body">
                    <center>
                        <h4 class="pb-3">GRAFIKU KONTRATO</h4>
                    </center>
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="contcatChart_data"></div>
                                    </figure>
                                </div>
                            </div>
                        </div><!--end col-->
                        <div class="col-sm-7">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="contposChart_data"></div>
                                    </figure>
                                    
                                </div>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="card shadow-lg border-secondary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="contcatTypeChart_data"></div>
                                    </figure>
                                </div>
                            </div>
                        </div><!--end col-->
                        <div class="col-md-7">
                            <div class="card shadow-lg pt-1 border-primary rounded">
                                <div class="card-body">
                                    <figure class="highcharts-figure">
                                        <div id="setEmpDivision"></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>
        {% include 'employee_chart/myoption.js' %}
        {% include 'contract_chart/cont_cat2.js' %}
        {% include 'contract_chart/cont_pos2.js' %}
        {% include 'contract_chart/cont_type.js' %}
        {% include 'employee_chart/emp_unit.js' %}
    </script>
{% endblock %}