<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <h3 class="text-themecolor">Dashboard</h3>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">My School > Studentss Portal > Academic performance</li>
        </ol>
    </div>
    <div class="col-md-7 col-4 align-self-center">
        <!--a href="https://themewagon.com/themes/bootstrap-4-responsive-admin-template/" class="btn waves-effect waves-light btn-danger pull-right hidden-sm-down"></a-->
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row">
    <!-- Column -->
    <div class="col-sm-12 col-lg-12">
        <div class="mb-2">
            <nav class="nav nav-pills flex-column flex-sm-row">
              <a class="flex-sm-fill text-sm-center nav-link active" href="#">Form 1</a>
              <a class="flex-sm-fill text-sm-center nav-link" href="#">Form 2</a>
              <a class="flex-sm-fill text-sm-center nav-link" href="#">Form 3</a>
              <a class="flex-sm-fill text-sm-center nav-link" href="#">Form 4</a>
            </nav>
        </div>
        <div class="card-deck">
            <div class="card">
                <div class="card-header">
                    Performance Graph
                </div>
                <div class="card-body">
                    <div>
                        
                    </div>
                    <canvas id="myChart" style="max-height: 70vh"></canvas>
                </div>
                <div class="card-footer">
                    
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card">
            <div class="card-header bg-light text-center">First Term</div>
            <div class="card-body p-2">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Subject Name</th>
                            <th>Final Grade</th>
                            <th>Letter Grade/Points</th>
                            <th>Comments</th>
                        </tr> 
                    </thead>
                    <tbody>
                        <tr>
                            <td>Biology</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Physical Science</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <p class="text-right">
                    <button class="btn btn-outline-danger"><span class="fas fa-file-pdf"></span></button>
                </p>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card">
            <div class="card-header bg-light text-center">Second Term</div>
            <div class="card-body">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Subject Name</th>
                            <th>Final Grade</th>
                            <th>Letter Grade/Points</th>
                            <th>Comments</th>
                        </tr> 
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <p class="text-right">
                    <button class="btn btn-outline-danger"><span class="fas fa-file-pdf"></span></button>
                </p>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card">
            <div class="card-header bg-light text-center">Third Term</div>
            <div class="card-body">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Subject Name</th>
                            <th>Final Grade</th>
                            <th>Letter Grade/Points</th>
                            <th>Comments</th>
                        </tr> 
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <p class="text-right">
                    <button class="btn btn-outline-danger"><span class="fas fa-file-pdf"></span></button>
                </p>
            </div>
        </div>
    </div>
</div>     

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Term 1', 'Term 2', 'Term 2'],
        datasets: [{
            label: 'Avarage',
            data: [80, 95 , 75],
            
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

