{% extends 'base.html' %}
{% block content %}
    <form action="/questions" method="get" id="search_q_form">
        <div id="question-search-field" class="row mb-5 mt-5">
            <div class="col-12 p-0">
                <div class="form-group border rounded p-3 bg-secondary">
                    <div class="input-group">
                        {# {% csrf_token %} #}
                        <input type="text" name="term" class="form-control p-2 bg-light" placeholder="Search for ..." value="{{ request.GET.term }}" />
                        <span class="input-group-text">
                            <i class="fa fa-search" onclick="document.getElementById('search_q_form').submit();"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div id="question-list" class="mt-2">
        {% if items %}
            <div class="row text-capitalize text-light bg-secondary border rounded p-2">
                <div class="col-1">#</div>
                <div class="col-3">Name</div>
                <div class="col-3">Question</div>
                <div class="col-1">Files</div>
                <div class="col-1">Labels</div>
            </div>
            {% for q in items %}
                <div class="row p-2">
                    <div class="col-1">{{ q.id }}</div>
                    <div class="col-3">{{ q.name }}</div>
                    <div class="col-3">{{ q.question }}</div>
                    <div class="col-1">{{ q.medias.all | length }}</div>
                    <div class="col-3">
                        {% for l in q.labels.all %}
                            {{ l.name }}
                            {% if not forloop.last %},{% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
{% endblock %}