{% extends 'base.html' %}

{% block content %}
<div class="py-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="h5">Question overview</h2>
    <a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:question_view' %}">All questions</a>
  </div>

  <form method="get" class="row g-2 mb-3">
    <div class="col-auto">
      <label class="form-label small">Status</label>
      <select name="status" class="form-select form-select-sm">
        {% for v, label in status_options %}
          <option value="{{ v }}" {% if selected_status == v %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>

    {# Category and other filters are rendered by the django-filter form inside Advanced filters. #}

    <div class="col-auto">
      <label class="form-label small">Open access</label>
      <select name="open_access" class="form-select form-select-sm">
        <option value="">(Any)</option>
        <option value="1" {% if selected_open_access == '1' %}selected{% endif %}>Yes</option>
        <option value="0" {% if selected_open_access == '0' %}selected{% endif %}>No</option>
      </select>
    </div>

    <div class="w-100"></div>

    <div class="col-12">
      <p>
        <a class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse" href="#advanced-filters" role="button" aria-expanded="false" aria-controls="advanced-filters">Advanced filters</a>
      </p>
      <div class="collapse" id="advanced-filters">
        <div class="card card-body">
          {% if qfilter %}
            <div class="mb-3">
              <h6 class="small">Full filter form</h6>
              {{ qfilter.form.media }}
              {{ qfilter.form.as_p }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-auto align-self-end">
      <button class="btn btn-sm btn-primary">Filter</button>
    </div>
  </form>

  <div class="card">
    <div class="card-body">
      <h6 class="card-title">Counts by category <small class="text-muted">({{ total }} questions)</small></h6>

      {% if counts %}
        <ul class="list-group list-group-flush">
          {% for row in counts %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div><a href="{{ row.link }}">{{ row.cat_name }}</a></div>
              <div class="text-muted">{{ row.count }}</div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="small text-muted">No matching questions.</p>
      {% endif %}

    </div>
  </div>
</div>
{% endblock %}

{% block js %}{% endblock %}