{% extends 'base.html' %}
{% load sekizai_tags %}

{% block content %}
    <div class="jumbotron">
      <div class="container">
        <h1>Welcome to Fabric Bolt</h1>
        <p>Foxy Fabric Deployments</p>
        <p><a class="btn btn-primary btn-lg" href="{% url 'projects_project_list' %}">View Projects</a></p>
      </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <h3>Deployment History</h3>
            <div id="chart_div"></div>
        </div>
        <div class="col-md-5">
            <h3>Deployment Status</h3>
            <div id="pie_chart_div"></div>
        </div>
    </div>

    {% addtoblock 'js' %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable({{ chart_data|safe }});

            var options = {
              title: '',
                height:300
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);

            // Create the data table.
            var data2 = new google.visualization.DataTable();
            data2.addColumn('string', 'Topping');
            data2.addColumn('number', 'Slices');
            data2.addRows({{ pie_chart_data|safe }});

            // Set chart options
            var options2 = {'title':'',
                           'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart2 = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
            chart2.draw(data2, options2);

          }
        </script>
    {% endaddtoblock 'js' %}
{% endblock %}