<!DOCTYPE html>
<html lang="en">
  <head>
    {% block head %}
      {% block meta %}
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <link rel="shortcut icon" href="#" />
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      {% endblock meta %}

      <title>CSULA Medtronic Project! | {% block title %}{% endblock %}</title>

      {% block stylesheets %}
        <!-- Bootstrap -->
        <link href="{{ url_for('static', filename='vendors/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="{{ url_for('static', filename='vendors/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
        <!-- NProgress -->
        <link href="{{ url_for('static', filename='vendors/nprogress/nprogress.css') }}" rel="stylesheet">
        <!-- bootstrap-daterangepicker -->
        <link href="{{ url_for('static', filename='vendors/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
        <!-- iCheck -->
        <link href="{{ url_for('static', filename='vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
        <!-- bootstrap-progressbar -->
        <link href="{{ url_for('static', filename='vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}" rel="stylesheet">
        <!-- JQVMap -->
        <link href="{{ url_for('static', filename='vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet"/>
      {% endblock stylesheets %}
      <!-- Custom Theme Style -->
      <link href="{{ url_for('static', filename='build/css/custom.css') }}" rel="stylesheet">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

<!-- 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

 -->
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>



<!--     <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script> -->
    {% endblock head %}
  </head>

  <body class="{% block body_class %}nav-md {% endblock body_class %}">
    {% block body %}
      <div class="container body">
        <div class="main_container">

          {% block sidebar %}
            <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
              {% include "site_template/sidebar.html" %}
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "site_template/top_navigation.html" %}
            </div>
          {% endblock top_navigation %}

          {% block content %}
            <!-- {{ content }} -->
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "site_template/footer.html" %}
            </footer>
          {% endblock footer %}
        </div>
      </div>

      {% block javascripts %}
        <!-- jQuery -->
        <script src="{{ url_for('static', filename='vendors/jquery/dist/jquery.min.js') }}"></script>
        <!-- Bootstrap -->
        <script src="{{ url_for('static', filename='vendors/bootstrap/dist/js/bootstrap.min.js') }}"></script>
        <!-- FastClick -->
        <script src="{{ url_for('static', filename='vendors/fastclick/lib/fastclick.js') }}"></script>
        <!-- NProgress -->
        <script src="{{ url_for('static', filename='vendors/nprogress/nprogress.js') }}"></script>
        <!-- bootstrap-progressbar -->
        <script src="{{ url_for('static', filename='vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
        <!-- iCheck -->
        <script src="{{ url_for('static', filename='vendors/iCheck/icheck.min.js') }}"></script>
        <!-- bootstrap-daterangepicker -->
        <script src="{{ url_for('static', filename='vendors/moment/min/moment.min.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
        <!-- bootstrap-wysiwyg -->
        <script src="{{ url_for('static', filename='vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/jquery.hotkeys/jquery.hotkeys.js') }}"></script>
        <script src="{{ url_for('static', filename='vendors/google-code-prettify/src/prettify.js') }}"></script>
        <!-- jQuery Tags Input -->
        <script src="{{ url_for('static', filename='vendors/jquery.tagsinput/src/jquery.tagsinput.js') }}"></script>
        <!-- Switchery -->
        <script src="{{ url_for('static', filename='vendors/switchery/dist/switchery.min.js') }}"></script>
        <!-- Select2 -->
        <script src="{{ url_for('static', filename='vendors/select2/dist/js/select2.full.min.js') }}"></script>
        <!-- Autosize -->
        <script src="{{ url_for('static', filename='vendors/autosize/dist/autosize.min.js') }}"></script>
        <!-- jQuery autocomplete -->
        <script src="{{ url_for('static', filename='vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js') }}"></script>
        <!-- starrr -->
        <script src="{{ url_for('static', filename='vendors/starrr/dist/starrr.js') }}"></script>



    <script>
      // bar chart data
      var barData = {
        labels : [
          {% for item in labels %}
            "{{ item }}",
          {% endfor %}
        ],
        datasets : [{
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          bezierCurve : false,
          data : [
      {% for item in values %}
              {{ item }},
            {% endfor %}]
          }
  ]
      }
      Chart.defaults.global.animationSteps = 50;
      Chart.defaults.global.tooltipYPadding = 16;
      Chart.defaults.global.tooltipCornerRadius = 0;
      Chart.defaults.global.tooltipTitleFontStyle = "normal";
      Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
      Chart.defaults.global.animationEasing = "easeOutBounce";
      Chart.defaults.global.responsive = false;
      Chart.defaults.global.scaleLineColor = "black";
      Chart.defaults.global.scaleFontSize = 16;
      // get bar chart canvas
      var mychart = document.getElementById("chart").getContext("2d");
      steps = 10
      max = {{ max }}
      // draw bar chart
      var LineChartDemo = new Chart(mychart).Line(barData, {
        scaleOverride: true,
        scaleSteps: steps,
        scaleStepWidth: Math.ceil(max / steps),
        scaleStartValue: 0,
        scaleShowVerticalLines: true,
        scaleShowGridLines : true,
        barShowStroke : true,
        scaleShowLabels: true,
        bezierCurve: false,
      });
    </script>



      {% endblock %}
      <!-- Custom Theme Scripts -->
      <script src="{{ url_for('static', filename='build/js/custom.js') }}"></script>
      <script>

      // var getData = $.get('/data2')

      // getData.done(function(results){
      //   var data = data: {
      //     labels: results.labels,
      //     datasets: [{
      //         data: results.values
      //     }]
      // };



      var marksCanvas = document.getElementById("marksChart");

      var marksData = {
        labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
        datasets: [{
          label: "Student A",
          backgroundColor: "rgba(200,0,0,0.2)",
          data: [65, 75, 70, 80, 60, 80]
        }, {
          label: "Student B",
          backgroundColor: "rgba(0,0,200,0.2)",
          data: [54, 65, 60, 70, 70, 75]
        }]
      };

      var radarChart = new Chart(marksCanvas, {
        type: 'radar',
        data: marksData
      });


    var options = {
      width: 800,
      height: 600
    };

        // var myRadarChart = new Chart(ctx, {
        //     type: 'radar',
        //     data: data,
        //     options: options
        // });
    </script>



                <script type=text/javascript>
                      $(function() {
                        $('#calculate').bind('click', function() {
                          $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
                            a: $('input[name="a"]').val(),
                            b: $('input[name="b"]').val()
                          }, function(data) {
                            $("#result").text(data.result);
                          });
                          return false;
                        });
                      });
                    </script>



    {% endblock body %}
  </body>
</html>
