{% extends "base.html" %}
{% block title %}{{ t('ex4') }} · {{ t('l3_att_h1') }} · MockIRS{% endblock %}
{% block content %}
<h1>{{ t('ex4') }} · {{ t('l3_att_h1') }}（{{ sess.session_id }} · {{ sess.topic }}）</h1>
<p class="goal"><b>{{ t('goal') }}:</b> {{ t('l3_att_goal') }}</p>
<form method="get" class="search-form">
  <label class="calendar-label">{{ t('search_date') }}
    <input type="hidden" name="q" value="{{ q }}" id="selected-date">
    <button
      class="date-picker-trigger"
      id="date-picker-trigger"
      type="button"
      aria-haspopup="dialog"
      aria-expanded="false"
      aria-controls="session-calendar"
      data-current-date="{{ sess.date }}"
    >
      <span id="selected-date-text">{{ q or '選擇日期' }}</span>
      <span aria-hidden="true">▾</span>
    </button>
  </label>
  <button type="submit">{{ t('search') }}</button>
</form>

<div
  id="session-calendar"
  class="session-calendar"
  role="dialog"
  aria-label="選擇有點名資料的日期"
  hidden
  data-dates='{{ available_dates | tojson }}'
></div>
<p class="calendar-help"><span class="available-date-dot" aria-hidden="true"></span> 發亮的日期有點名資料，可以點選。</p>

{% if rows is none %}
  <p class="hint">{{ t('l3_not_shown') }}</p>
{% elif rows %}
<table id="attendance" class="data">
  <thead><tr><th>{{ t('col_id') }}</th><th>{{ t('col_name') }}</th><th>{{ t('col_status') }}</th></tr></thead>
  <tbody>
    {% for r in rows %}
    <tr><td>{{ r.student_id }}</td><td>{{ r.name }}</td><td>{{ r.status_label }}</td></tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
  <p class="hint">{{ t('no_data') }}</p>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='l3_calendar.js') }}"></script>
{% endblock %}