{% 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-body">
                    <center>
                        <h4 class="pb-3">GRAFIKU LICENSA</h4>
                    </center>
                    <div class="row">
                        <div class="col-sm-12">
                          <div class="card shadow-lg border-secondary rounded">
                            <div class="card-body">
                              <div id="container">
                                <figure class="highcharts-figure">
                                  <div id="allEmpLeave_chart"></div>
                                </figure>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                    <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="allLeaveType_chart"></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 %}}
    <!-- Highcharts -->
    <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 'leave_chart/emp.js' %}
        {% include 'leave_chart/type.js' %}
    </script>

    <style>
        @import "https://code.highcharts.com/css/highcharts.css";

.highcharts-pie-series .highcharts-point {
  stroke: #ede;
  stroke-width: 2px;
}

.highcharts-pie-series .highcharts-data-label-connector {
  stroke: silver;
  stroke-dasharray: 2, 2;
  stroke-width: 2px;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 600px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
    </style>

<!-- LEAVE TYPE -->
    <script>
        // Data retrieved from https://gs.statcounter.com/vendor-market-share/mobile/

    </script>




<!-- LEAVE EMPLOTEE -->

    <script>
        
    </script>

{% endblock %}