{% extends "layout.html" %}

{% block content %}

<script>

  var active = document.querySelector("#home");
  active.classList.add("active");

</script>

<h1>Your Dashboard</h1>

<div class = "insights">
  <!-----------CARD START----------------------->
  <div class = "student-satisfaction">
    <span class="material-icons-round">sentiment_satisfied</span>
    <div class="center">
      <div class="left">
        <h3>Student Satisfaction</h3>
        <h1>83%</h1>
      </div>
      <div class = "completion">
        <svg>
          <circle cx='38' cy ='38' r= '36' class = "track"></circle>
          <circle cx='38' cy ='38' r= '36' class = "progress1"></circle>
        </svg>
        <div class = "num">
          <p>83%</p>
        </div>
      </div>
    </div>
    <small class="text-muted"> Of your students are satisifed with their learning! </small>
  </div>
  <!----------------------CARD BREAK------------------->
  <div class = "student-grades">
    <span class="material-icons-round">grade</span>
    <div class="center">
      <div class="left">
        <h3>Student Grades</h3>
        <h1>70%</h1>
      </div>
      <div class = "completion">
        <svg>
          <circle cx='38' cy ='38' r= '36' class = "track"></circle>
          <circle cx='38' cy ='38' r= '36' class="progress2"></circle>
        </svg>
        <div class = "num">
          <p>70%</p>
        </div>
      </div>
    </div>
    <small class="text-muted"> Of your students are achieving their target grades! </small>
  </div>
  <!----------------------CARD BREAK------------------->

</div>
<!---------------TABLE------------------>
<div class="assessment-submission">
  <h2>Assessment Submissions</h2>
  <table>
    <thead>
      <tr>
        <th> Student Name </th>
        <th> Student ID </th>
        <th> Assessment Title </th>
        <th> Status </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Alice Anderson </td>
        <td> 001 </td>
        <td> Assessment 1 </td>
        <td class="secondary"> Submitted </td>
        <td class="tertiary"> <a href="#"> View </a> </td>
      </tr>
      <tr>
        <td> Bobby Brighton </td>
        <td> 002 </td>
        <td> Assessment 1 </td>
        <td class="secondary"> Submitted </td>
        <td class="tertiary"> <a href="#"> View </a> </td>
      </tr>
      <tr>
        <td> Charlie Cooper </td>
        <td> 003 </td>
        <td> Assessment 1 </td>
        <td class="secondary"> Pending </td>
        <td class="tertiary"> </td>
      </tr>
      <tr>
        <td> Daniel Davidson </td>
        <td> 004 </td>
        <td> Assessment 1 </td>
        <td class="secondary"> Submitted </td>
        <td class="tertiary"> <a href="#"> View </a> </td>
      </tr>
      <tr>
        <td> Emily Edwards </td>
        <td> 005 </td>
        <td> Assessment 1 </td>
        <td class="secondary"> Submitted </td>
        <td class="tertiary"> <a href="#"> View </a> </td>
      </tr>
    </tbody>
  </table>
  <a href="#">Show All</a>
</div>

{% endblock content %}