{% extends "layout/basic.html" %}
{% import "components/ui/v1.html" as ui_v1 %}
{% block content %}
<div class="bplearning-page ui-page ui-page--padded ui-page--compact-type ui-stack">
  {% call ui_v1.page_header(_('做题总览'), extra_class='bplearning-page__header') %}
    <a class="button rounded bplearning-page__action" href="{{ url('user_detail', uid=handler.user._id) }}">{{ _('个人中心') }}</a>
  {% endcall %}

  {% call ui_v1.panel(body_class='bplearning-page__filters') %}
    <form class="ui-stack" method="get" action="{{ url('home_learning') }}" aria-label="{{ _('做题记录筛选') }}" data-bplearning-filter>
      <nav class="ui-cluster ui-print-hidden" aria-label="{{ _('快捷日期') }}">
        {% for preset in learning.presets %}<a class="button rounded bplearning-page__action" href="{{ preset.url }}">{{ preset.label }}</a>{% endfor %}
      </nav>
      <div class="ui-grid bplearning-page__filter-fields">
        <label class="ui-field"><span class="ui-field__label">{{ _('开始日期') }}</span>
          <input class="textbox ui-field__control bplearning-page__control" type="date" name="start" value="{{ learning.filters.start }}" required aria-describedby="bplearning-date-error">
        </label>
        <label class="ui-field"><span class="ui-field__label">{{ _('结束日期') }}</span>
          <input class="textbox ui-field__control bplearning-page__control" type="date" name="end" value="{{ learning.filters.end }}" required aria-describedby="bplearning-date-error">
        </label>
        <label class="ui-field"><span class="ui-field__label">{{ _('时间依据') }}</span>
          <select class="select ui-field__control bplearning-page__control" name="basis">
            <option value="submit"{% if learning.filters.basis == 'submit' %} selected{% endif %}>{{ _('期间有提交的题目') }}</option>
            <option value="accepted"{% if learning.filters.basis == 'accepted' %} selected{% endif %}>{{ _('期间首次通过的题目') }}</option>
            <option value="opened"{% if learning.filters.basis == 'opened' %} selected{% endif %}>{{ _('期间首次打开的题目') }}</option>
          </select>
        </label>
        <label class="ui-field ui-print-hidden"><span class="ui-field__label">{{ _('通过状态') }}</span>
          <select class="select ui-field__control bplearning-page__control" name="status">
            <option value="all"{% if learning.filters.status == 'all' %} selected{% endif %}>{{ _('全部状态') }}</option>
            <option value="accepted"{% if learning.filters.status == 'accepted' %} selected{% endif %}>{{ _('已通过') }}</option>
            <option value="pending"{% if learning.filters.status == 'pending' %} selected{% endif %}>{{ _('尚未通过') }}</option>
          </select>
        </label>
        <label class="ui-field ui-print-hidden"><span class="ui-field__label">{{ _('首次 AC') }}</span>
          <select class="select ui-field__control bplearning-page__control" name="scene">
            <option value="all"{% if learning.filters.scene == 'all' %} selected{% endif %}>{{ _('全部场景') }}</option>
            <option value="practice"{% if learning.filters.scene == 'practice' %} selected{% endif %}>{{ _('日常练习') }}</option>
            <option value="contest"{% if learning.filters.scene == 'contest' %} selected{% endif %}>{{ _('正式比赛') }}</option>
            <option value="virtual"{% if learning.filters.scene == 'virtual' %} selected{% endif %}>{{ _('虚拟参赛') }}</option>
            <option value="homework"{% if learning.filters.scene == 'homework' %} selected{% endif %}>{{ _('作业') }}</option>
            <option value="solution"{% if learning.filters.scene == 'solution' %} selected{% endif %}>{{ _('看题解后补题') }}</option>
          </select>
        </label>
        <button class="primary rounded button bplearning-page__action bplearning-page__apply ui-print-hidden" type="submit">{{ _('查看记录') }}</button>
      </div>
      <p class="ui-field__error" id="bplearning-date-error" role="alert" hidden>{{ _('开始日期不能晚于结束日期。') }}</p>
    </form>
  {% endcall %}

  <section class="ui-grid bplearning-page__stats" aria-label="{{ _('筛选结果统计') }}">
    {{ ui_v1.stat(learning.totals.attempted, _('期间尝试'), extra_class='bplearning-page__stat') }}
    {{ ui_v1.stat(learning.totals.accepted, _('首次通过'), extra_class='bplearning-page__stat') }}
    {{ ui_v1.stat(learning.totals.reviewed, _('再次通过'), extra_class='bplearning-page__stat') }}
  </section>

  <section class="ui-panel" aria-labelledby="bplearning-records-heading">
    <header class="ui-panel__header ui-toolbar ui-toolbar--flush bplearning-page__records-header">
      <h2 class="ui-panel__title" id="bplearning-records-heading">{{ _('逐题记录') }} <span class="ui-muted">{{ learning.total }} {{ _('题') }}</span></h2>
    </header>
    {% if learning.rows|length %}
    <div class="ui-table-wrap bplearning-page__table-wrap" tabindex="0" role="region" aria-label="{{ _('逐题学习明细') }}">
      <table class="bplearning-page__table" aria-label="{{ _('题号、难度、题目、二级标签与首次 AC') }}">
        <thead><tr>
          <th class="bplearning-page__heading bplearning-page__heading--pid" scope="col">{{ _('题号') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--difficulty" scope="col">{{ _('难度') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--problem" scope="col">{{ _('题目') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--tags" scope="col">{{ _('标签') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--opened" scope="col">{{ _('首次打开') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--accepted" scope="col">{{ _('首次 AC') }}</th>
          <th class="bplearning-page__heading bplearning-page__heading--actions" scope="col">{{ _('操作') }}</th>
        </tr></thead>
        <tbody>
          {% for row in learning.rows %}
          <tr class="bplearning-page__record" data-bplearning-key="{{ row.key }}">
            <td class="bplearning-page__cell" data-label="{{ _('题号') }}">
              <span class="bplearning-page__pid bplearning-page__ellipsis" title="{{ row.pid }}">{{ row.pid }}</span>
            </td>
            <td class="bplearning-page__cell bplearning-page__difficulty" data-label="{{ _('难度') }}">{{ ui_v1.category_label(row.difficultyLabel, row.difficulty or 0) }}</td>
            <td class="bplearning-page__cell" data-label="{{ _('题目') }}"><a class="bplearning-page__problem-link bplearning-page__ellipsis" href="{{ row.url }}" title="{{ row.title }}">{{ row.title }}</a></td>
            <td class="bplearning-page__cell" data-label="{{ _('标签') }}"><span class="bplearning-page__ellipsis ui-muted" title="{{ row.tags|join(' · ') }}">{{ row.tags|join(' · ') or '—' }}</span></td>
            <td class="bplearning-page__cell" data-label="{{ _('首次打开') }}">{% if row.firstOpened %}<time datetime="{{ row.firstOpened|replace(' ', 'T') }}+08:00" title="{{ row.firstOpened }}">{{ row.firstOpened.slice(0, 10) }}</time>{% else %}<span class="ui-muted">{{ _('未记录') }}</span>{% endif %}</td>
            <td class="bplearning-page__cell" data-label="{{ _('首次 AC') }}">{{ ui_v1.badge(row.completionLabel, row.completionTone) }}</td>
            <td class="bplearning-page__cell" data-label="{{ _('操作') }}"><button class="button rounded bplearning-page__action bplearning-page__timeline-button" type="button" data-bplearning-timeline="{{ row.key }}" aria-label="{{ _('学习时间线') }} · {{ row.title }}" aria-haspopup="dialog">{{ _('时间线') }}</button></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<div class="ui-panel__body">{{ ui_v1.empty_state(_('这段时间没有符合条件的记录')) }}</div>{% endif %}
    {% if learning.pageCount > 1 %}
    <footer class="ui-panel__footer ui-print-hidden"><nav class="ui-cluster" aria-label="{{ _('记录分页') }}">
      {% if learning.prevUrl %}<a class="button rounded bplearning-page__action" rel="prev" href="{{ learning.prevUrl }}">{{ _('上一页') }}</a>{% endif %}
      <span>{{ _('第') }} {{ learning.page }} / {{ learning.pageCount }} {{ _('页') }}</span>
      {% if learning.nextUrl %}<a class="button rounded bplearning-page__action" rel="next" href="{{ learning.nextUrl }}">{{ _('下一页') }}</a>{% endif %}
    </nav></footer>
    {% endif %}
  </section>

  <dialog class="ui-panel ui-glass bplearning-page__dialog" aria-labelledby="bplearning-dialog-title" aria-modal="true" data-bplearning-dialog><div data-bplearning-dialog-content></div></dialog>
  {% for row in learning.rows %}
  <template data-bplearning-record="{{ row.key }}">
    <header class="ui-panel__header bplearning-page__dialog-header">
      <h2 class="ui-panel__title bplearning-page__dialog-title" id="bplearning-dialog-title">{{ row.pid }} · {{ row.title }}</h2>
      <button class="button rounded bplearning-page__action" type="button" data-bplearning-close autofocus>{{ _('关闭') }}</button>
    </header>
    <div class="ui-panel__body ui-stack bplearning-page__dialog-body">
      <div class="ui-meta">{{ ui_v1.category_label(row.difficultyLabel, row.difficulty or 0) }}<span>{{ row.completionLabel }}</span>{% if row.sceneDetail %}<span>{{ row.sceneDetail }}</span>{% endif %}<span>{{ row.submissionCount }} {{ _('次提交') }}</span></div>
      {% if row.tags|length %}<div class="ui-cluster ui-cluster--xs">{% for tag in row.tags %}{{ ui_v1.badge(tag, extra_class='bplearning-page__tag') }}{% endfor %}</div>{% endif %}
      <div class="ui-cluster"><a class="button rounded bplearning-page__action" href="{{ row.url }}">{{ _('打开题目') }}</a>{% if learning.guideUrl %}<a class="button rounded bplearning-page__action" href="{{ learning.guideUrl }}">{{ _('使用指南') }}</a>{% endif %}</div>
      <label class="ui-field"><span class="ui-field__label">{{ _('学习时间线') }}</span><select class="select ui-field__control bplearning-page__control" data-bplearning-event-filter>
        <option value="all">{{ _('全部事件') }}</option><option value="submit">{{ _('提交与通过') }}</option><option value="opened">{{ _('题目阅读') }}</option><option value="solution">{{ _('题解阅读') }}</option>
      </select></label>
      <ol class="ui-item-list ui-item-list--compact">
        {% for event in row.events %}<li class="ui-item-list__item bplearning-page__event" data-bplearning-event="{{ event.kind }}"><div class="ui-item-list__content"><h3 class="ui-item-list__title">{% if event.url %}<a href="{{ event.url }}">{{ event.label }}</a>{% else %}{{ event.label }}{% endif %}</h3></div><div class="ui-item-list__aside ui-muted"><time datetime="{{ event.time|replace(' ', 'T') }}+08:00">{{ event.time }}</time></div></li>{% else %}<li class="ui-item-list__item"><span class="ui-muted">{{ _('暂无可展示的时间线记录。') }}</span></li>{% endfor %}
      </ol>
      <p class="ui-muted" data-bplearning-event-empty hidden>{{ _('暂无此类事件') }}</p>
    </div>
  </template>
  {% endfor %}
</div>
{% endblock %}