{% extends "study/base.html" %}
{% block title %}Browse{% endblock %}
{% block content %}
<h1>Card browser</h1>
<form method="get" class="searchbar">
  <input name="q" value="{{ query }}" placeholder="deck:Spanish tag:verbs is:due prop:ivl>30" autofocus>
  <button class="btn primary">Search</button>
</form>
<p class="muted small">Try:
  {% for ex in examples %}<a class="chip" href="?q={{ ex|urlencode }}">{{ ex }}</a>{% endfor %}
  · full syntax in <code>docs/search-syntax.md</code>
</p>
{% if error %}<div class="flash flash-error">{{ error }}</div>{% endif %}
<form method="post">{% csrf_token %}
  <input type="hidden" name="q" value="{{ query }}">
  <div class="toolbar">
    <span>{{ total }} card{{ total|pluralize }}{% if total > states|length %} (showing {{ states|length }}){% endif %}</span>
    <select name="action"><option value="suspend">Suspend</option><option value="unsuspend">Unsuspend</option><option value="unbury">Unbury</option><option value="forget">Reset to new</option></select>
    <button class="btn">Apply to selected</button>
  </div>
  <table class="grid">
    <thead><tr><th><input type="checkbox" onclick="document.querySelectorAll('.sel').forEach(c=>c.checked=this.checked)"></th><th>Sort field</th><th>Card</th><th>Deck</th><th>State</th><th class="num">Ivl</th><th>Due</th><th class="num">S</th><th class="num">D</th><th class="num">Lapses</th><th>Tags</th></tr></thead>
    <tbody>
    {% for s in states %}
      <tr class="{% if s.suspended %}suspended{% endif %}">
        <td><input type="checkbox" class="sel" name="state" value="{{ s.pk }}"></td>
        <td>{% if s.card.deck.owner_id == user.id %}<a href="{% url 'note_edit' s.card.note_id %}">{{ s.card.note|truncatechars:60 }}</a>{% else %}{{ s.card.note|truncatechars:60 }}{% endif %}</td>
        <td>{% if s.card.note.note_type.is_cloze %}c{{ s.card.ord|add:1 }}{% else %}#{{ s.card.ord|add:1 }}{% endif %}</td>
        <td>{{ s.card.deck.full_name }}</td>
        <td><span class="st st-{{ s.state }}">{{ s.get_state_display }}</span></td>
        <td class="num">{% if s.state == 2 %}{{ s.scheduled_days }}d{% endif %}</td>
        <td>{% if s.state %}{{ s.due|date:"Y-m-d" }}{% endif %}</td>
        <td class="num">{{ s.stability|floatformat:1 }}</td>
        <td class="num">{{ s.difficulty|floatformat:1 }}</td>
        <td class="num">{{ s.lapses }}</td>
        <td class="tags">{% for t in s.card.note.tag_list %}<span class="tag">{{ t }}</span>{% endfor %}</td>
      </tr>
    {% empty %}<tr><td colspan="11" class="muted">No cards match.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</form>
{% endblock %}