{{extend 'admin/instructors.html'}} {{ block tabcontent }}
<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>
<link
  rel="stylesheet"
  type="text/css"
  href="{{=URL('static', 'dashboard.css')}}"
/>
<script src="{{=URL('static', 'dashboard-charts.js')}}"></script>

<div id="dashboard">
  <h1>
    {{=course.course_name}}
    <span class="dash-title-description">Instructor Dashboard</span>
  </h1>
  <h2>Student Report - {{=user.first_name}} {{=user.last_name}}</h2>
  <div class="col-md-7">
    <div class="dash-section" id="book-completion">
      <div class="dash-section-header">Book Completion</div>
      <div class="dash-section-content">
        {{ for chapter in chapters: }}
        <div class="chapter">
          <div class="clickable {{=chapter['status']}}">
            {{=chapter["label"]}}
            <div class="collapse-icon"></div>
          </div>
          <div class="chapter-detail dhide">
            {{ for subchapter in chapter["subchapters"]: }}
            <div class="{{=subchapter['status']}}">
              {{=subchapter["label"]}}
            </div>
            {{ pass }}
          </div>
        </div>
        {{ pass }}
        <script>
          $(".chapter .clickable").click(function () {
            $(this).toggleClass("expanded");
            $(this).parent().children(".chapter-detail").toggleClass("dhide");
          });
        </script>
      </div>
    </div>
    <!--<div class="dash-section">
            <div class="dash-section-header">
                Exercise Completion
            </div>
            <div class="dash-section-content">
                <b>Parsons Problems</b>
                <div>80% Correct</div>
                <b>Multiple Choice</b>
                <div>90%</div>
                <b>Open-Ended</b>
                <div>60%</div>
            </div>
        </div>-->
    <div class="dash-section">
      <div class="dash-section-header">Grades</div>
      <div class="dash-section-content scroll">
        <table width="90%">
          <thead>
            <tr>
              <td>Assignment</td>
              <td>Due Date</td>
              <td>Score</td>
              <td>Percent</td>
              <td>Avg Score</td>
            </tr>
          </thead>
          <tbody>
            {{ for k in sorted(assignments.keys()): }}
            <tr>
              <td>{{=k}}</td>
              <td>{{=assignments[k]["due_date"]}}</td>
              <td>{{=assignments[k]["score"]}}</td>
              <td>{{=assignments[k]["pct"]}}</td>
              <td>{{=assignments[k]["class_average"]}}</td>
            </tr>
            {{ pass }}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="dash-section">
      <div class="dash-section-header">Profile</div>
      <div class="dash-section-content">
        <div>Username: {{=user.username}}</div>
        <div>Email: {{=user.email}}</div>
        <!--<div><a href="">Reset Password &raquo;</a></div>-->
        <!--<div style="float:right;"><a href="email:">Email Student &raquo;</a></div>-->
      </div>
    </div>
    <div class="dash-section">
      <div class="dash-section-header">Recent Activity</div>
      <div class="dash-section-content scroll">
        <table class="nodec">
          {{for row in activity:}}
          <tr>
            <td>{{=row["timestamp"]}}</td>
            <td>{{=row["event"]}}</td>
            <td>{{=row["div_id"]}}</td>
          </tr>
          {{pass}}
        </table>
      </div>
      <form action="/runestone/dashboard/studentreport">
        {{ if request.vars.id: }}
        <input type="hidden" name="id" value="{{=request.vars.id}}" />
        {{ pass }}
        <button type="submit" name="action" value="dlcsv">
          Download History
        </button>
        <button type="submit" name="action" value="dlcode">
          Download All Code
        </button>
      </form>
    </div>
  </div>
</div>

{{ end }}