{% extends "base.html" %}
{% block title %}{{ course.title or "Cold Call" }}{% endblock %}
{% block body %}
<h1>{{ course.title or course.lti_context_id }}</h1>
<p>Hi {{ user.name }}{% if user.pronouns %} ({{ user.pronouns }}){% endif %}.</p>
<p class="muted">Your name and pronouns here are drawn from Canvas. If
  they are not right, update them in your Canvas account settings and
  they will be picked up here automatically.</p>

{% if report_available %}
<p><a href="{{ url_for('views.my_grade_report') }}"><strong>Your
  participation grade report</strong></a></p>
{% endif %}

<h2>Your standing</h2>
<p>
  You have answered <strong>{{ answered }}</strong>
  question{{ "s" if answered != 1 }}.
  {% if missing %}
    You were called but absent (without opting out)
    <strong>{{ missing }}</strong> time{{ "s" if missing != 1 }}.
  {% endif %}
  You have opted out of <strong>{{ optouts|length }}</strong>
  class{{ "es" if optouts|length != 1 }}.
</p>

<h2>How you compare</h2>
{% set d = distribution %}
{% set fewer = d.bins | selectattr("calls", "lt", d.my_count) | sum(attribute="students") %}
{% set more = d.bins | selectattr("calls", "gt", d.my_count) | sum(attribute="students") %}
{% set same = d.bins | selectattr("calls", "eq", d.my_count) | sum(attribute="students") - 1 %}
<p>
  {{ fewer }} classmate{{ "s have" if fewer != 1 else " has" }} answered
  fewer questions than you, {{ same }} the same number, and
  {{ more }} more. The class median is {{ d.median }}.
</p>
<div class="hist" role="img"
     aria-label="Histogram of questions answered across the class; your bar is highlighted.">
  {% for bin in d.bins %}
  <div class="bin">
    <div class="bar-n muted">{{ bin.students or "" }}</div>
    <div class="bar {{ 'me' if bin.calls == d.my_count }}"
         style="height: {{ (bin.students / d.max_students * 100) | round }}%"></div>
    <div class="bar-x">{{ bin.calls }}</div>
  </div>
  {% endfor %}
</div>
<p class="muted">Students by number of questions answered; your bar is
  the highlighted one.</p>

<h2>Opting out</h2>
{% if optouts %}
<table>
  <tr><th>Date</th><th></th></tr>
  {% for o, withdrawable in optouts %}
  <tr>
    <td>{{ o.date.isoformat() }}</td>
    <td>
      {% if withdrawable %}
      <form method="post"
            action="{{ url_for('views.optout_delete', optout_id=o.id) }}">
        <button type="submit">Withdraw</button>
      </form>
      {% else %}
      <span class="muted">locked</span>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</table>
<p class="muted">Opt-outs can be withdrawn until the class begins.</p>
{% else %}
<p class="muted">You have not opted out of any classes.</p>
{% endif %}

<form method="post" action="{{ url_for('views.optout_create') }}">
  {% if upcoming_days %}
    <label>Class date:
      <select name="date">
        {% for day in upcoming_days %}
        <option value="{{ day.isoformat() }}">{{ day.strftime("%a %b %-d, %Y") }}</option>
        {% endfor %}
      </select>
    </label>
  {% else %}
    <label>Date: <input type="date" name="date" min="{{ today.isoformat() }}"></label>
  {% endif %}
  <button type="submit">Opt out</button>
</form>

{% if my_calls %}
<h2>Your calls</h2>
<table>
  <tr><th>Date</th><th>Outcome</th></tr>
  {% for c in my_calls %}
  <tr>
    <td>{{ c.session_date.isoformat() }}</td>
    <td>
      {% if c.status == "missing" %}
        missing
      {% elif course.show_assessments and c.assessment %}
        {{ c.assessment }}
      {% else %}
        answered
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</table>
{% endif %}
{% endblock %}