<form class="search-form" action="{% url directories %}" method="get">
    <div class="first-row" id="form-row">
        <span>Search by: </span>
        <div class="search-category">
            {{ form.search_category}}
            {{ form.search_category.errors }}
        </div>
        <div class="q">
            {{ form.q }}
            {{ form.q.errors }}
        </div>
    </div>

    <div class="category-wrap">
        <select name="category" onchange="this.form.submit();">
        <option value="">All Categories ({{ categories|length }})</option>
        {% for cat in categories %}
            {% if request.GET.category == cat.pk|slugify %}
            <option selected value="{{ cat.pk }}">{{ cat.name }}</option>
            {% else %}
            <option value="{{ cat.pk }}">{{ cat.name }}</option>
            {% endif %}
        {% endfor %}
        </select>

        <select name="sub_category" onchange="this.form.submit();">
        <option value="">All Subcategories ({{ sub_categories|length }})</option>
        {% for subcat in sub_categories %}
            {% if request.GET.sub_category == subcat.pk|slugify %}
            <option selected value="{{ subcat.pk }}">{{ subcat.name }}</option>
            {% else %}
            <option value="{{ subcat.pk }}">{{ subcat.name }}</option>
            {% endif %}
        {% endfor %}
        </select>
    </div>

    <input type="submit" value="Search" />
</form>
