{{extend 'layout.html'}}
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/svg.jquery.js"></script>
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/pygal-tooltips.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id="dashboard">
    <h1>{{=course_name}} <span class="dash-title-description">Spring 2016 Instructor Dashboard</style></h1>
    <div class="col-md-6">
        <h2>Chapter 4 - Names for Strings</h2>
        <div class="dash-section">
            <div class="dash-section-header">
                Overall Progression
            </div>
            <div class="dash-section-content">
                <div id="chart-overall-activity"></div>
                <div class="dash-section-right">
                    <a href="dashboard-progress">View Individual Student Progression</a>
                </div>

            </div>
        </div>
        <div class="dash-section">
            <div class="dash-section-header">
                Exercise Analytics
            </div>
            <div class="dash-section-content">
                <div id="chart-overall-activity"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h2>Recent Activity</h2>
        <div id="studentchart">
            <div id="tooltip" class="hidden">
                <p><span id="value">100</span>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="{{=URL('static', 'dashboard-charts.js')}}"></script>

<style src="{{=URL('static', 'dashboard.css')}}"></style>