{% extends "study/base.html" %}
{% block title %}Study {{ deck.name }}{% endblock %}
{% block bodyclass %}studying{% endblock %}
{% block content %}
<div id="study" data-deck="{{ deck.pk }}" data-mode="{{ mode }}" data-tag="{{ tag }}"
     data-next="{% url 'api_next' deck.pk %}" data-reveal="{% url 'api_reveal' %}"
     data-answer="{% url 'api_answer' %}" data-bury="{% url 'api_bury' %}" data-csrf="{{ csrf_token }}">
  <div class="study-head">
    <a href="{% url 'deck_edit' deck.pk %}" class="muted">&larr; {{ deck.full_name }}</a>
    {% if mode %}<span class="pill">custom: {{ mode }}{% if tag %} #{{ tag }}{% endif %}</span>{% endif %}
    <div class="counts"><span class="c-new" id="cnt-new">0</span> + <span class="c-learn" id="cnt-learn">0</span> + <span class="c-due" id="cnt-review">0</span></div>
  </div>
  <style id="card-css"></style>
  <article class="cardface" id="cardface" aria-live="polite"><p class="muted">Loading…</p></article>
  <div class="answerbar" id="answerbar">
    <button class="btn primary wide" id="show">Show answer <kbd>Space</kbd></button>
    <div class="grades" id="grades" hidden>
      <button class="grade g1" data-r="1"><span class="ivl" id="ivl-1"></span>Again <kbd>1</kbd></button>
      <button class="grade g2" data-r="2"><span class="ivl" id="ivl-2"></span>Hard <kbd>2</kbd></button>
      <button class="grade g3" data-r="3"><span class="ivl" id="ivl-3"></span>Good <kbd>3</kbd></button>
      <button class="grade g4" data-r="4"><span class="ivl" id="ivl-4"></span>Easy <kbd>4</kbd></button>
    </div>
  </div>
  <p class="study-foot muted"><span id="meta"></span> · <button class="linkish" id="bury">Bury <kbd>-</kbd></button> · <a id="edit" href="#">Edit note <kbd>e</kbd></a></p>
  <div class="done panel" id="done" hidden>
    <h2>Congratulations!</h2>
    <p>You have finished this deck for now.</p>
    <p><a class="btn" href="{% url 'deck_edit' deck.pk %}">Custom study</a> <a class="btn" href="{% url 'home' %}">Back to decks</a></p>
  </div>
</div>
{% endblock %}
{% block scripts %}{% load static %}<script type="module" src="{% static 'study/study.js' %}"></script>{% endblock %}