{% extends 'sbas/base.html' %}

{% block content %}
  <h2>Filtered questions</h2>

  <p>Showing questions matching the selected filters.</p>

  <div class="mb-2">
    <form method="get" class="d-inline">
      <input type="hidden" name="reviewed" value="me" />
      {% if filters.category %}<input type="hidden" name="category" value="{{ filters.category }}" />{% endif %}
      {% if filters.status %}<input type="hidden" name="status" value="{{ filters.status }}" />{% endif %}
      <button type="submit" class="btn btn-sm btn-outline-primary">Show only questions I've reviewed</button>
    </form>
    <a href="?" class="btn btn-sm btn-outline-secondary ms-2">Clear filters</a>
  </div>

  <div class="mb-3">
    Active filters:
    {% if filters.category %}
      <span class="badge bg-primary me-1">Category: {{ filters.category }}</span>
    {% else %}
      <span class="badge bg-secondary me-1">Category: Any</span>
    {% endif %}
    {% if filters.status %}
      <span class="badge bg-primary me-1">Status: {{ filters.status }}</span>
    {% else %}
      <span class="badge bg-secondary me-1">Status: Any</span>
    {% endif %}
  </div>

  {% if questions %}
    <ul class="list-group">
      {% for q in questions %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div>
            <a href="{% url app_name|add:':question_detail' q.pk %}">{{ q.title|default:q.stem|truncatechars:80|safe }}</a>
            <div class="small text-muted">ID: {{ q.pk }}</div>
                {% comment %} Show latest review status if available {% endcomment %}
            {% with status_code=q.latest_review_status %}
              {% if status_code %}
                {% with label=status_choices|get_item:status_code %}
                  <div class="mt-1"><span class="badge bg-secondary">Latest review: {{ label }}</span></div>
                {% endwith %}
              {% else %}
                <div class="mt-1"><span class="text-muted small">Latest review: Unreviewed</span></div>
              {% endif %}
            {% endwith %}
          </div>
          <div class="btn-group">
            <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' q.pk %}">View</a>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="alert alert-info">No questions match the selected filters.</div>
  {% endif %}

  <div class="mt-3">
    <a href="{% url app_name|add:':question_review_start' %}" class="btn btn-secondary">Back to filters</a>
  </div>

{% endblock %}