{% comment %} Mobile view {% endcomment %}
<button
    class="btn btn-outline-primary d-md-none w-100 mb-4"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#filters-mobile"
    aria-expanded="false"
    aria-controls="collapseExample"
>
    Show filters
    <i class="bi bi-chevron-down"></i>
</button>
<form method="GET" action="{{ parent_url }}" id="filters-mobile" class="form-row mx-0 mb-4 d-md-none collapse">
    <h2 class="h6">Filter by topic and date</h2>
    <div class="col-12 form-group p-0 flex-shrink-1">
        <label class="form-label" for="topic-input">Topic</label>
        <select aria-label="Topic" class="form-control bg-light" name="topic" id="topic-input">
            <option value="">All</option>
            {% for topic in topics %}
                <option
                    value="{{ topic.0 }}"
                    {% if filter_topic.pk == topic.0 %}selected="selected"{% endif %}
                >
                    {{ topic.1 }}
                </option>
            {% endfor %}
        </select>
    </div>

    <div class="col-6 form-group flex-shrink-1 p-0 pe-1">
        <label class="form-label" for="date_from-input" id="date_from-label">Date from</label>
        <div class="input-group">
            <input
                class="form-control"
                placeholder="dd/mm/yyyy"
                name="date_from"
                id="date_from-input"
                type="text"
                autocomplete="off"
                aria-autocomplete="none"
                {% if request.GET.date_from %}value="{{ request.GET.date_from }}"{% endif %}
            />
        </div>
    </div>
    <div class="col-6 form-group flex-shrink-1 p-0">
        <label class="form-label" for="date_to-input" id="date_to-label">Date to</label>
        <div class="input-group me-md-">
            <input
                class="form-control"
                placeholder="dd/mm/yyyy"
                name="date_to"
                id="date_to-input"
                type="text"
                autocomplete="off"
                aria-autocomplete="none"
                {% if request.GET.date_to %}value="{{ request.GET.date_to }}"{% endif %}
            />
        </div>
    </div>
    <button class="col-12 btn btn-outline-primary d-md-none" type="submit">Filter</button>
</form>
{% comment %} Desktop view {% endcomment %}
<h2 class="h6 d-none d-md-block">Filter by topic and date</h2>
<form method="GET" action="{{ parent_url }}" class="form-row mx-0 mb-5 flex-md-nowrap d-none d-md-flex">
    <div class="col-auto form-group p-0 flex-shrink-1">
        <label class="form-label" for="topic-desktop-input">Topic</label>
        <select aria-label="Topic" class="form-control bg-light" name="topic" id="topic-desktop-input">
            <option value="">All</option>
            {% for topic in topics %}
                <option
                    value="{{ topic.0 }}"
                    {% if filter_topic.pk == topic.0 %}selected="selected"{% endif %}
                >
                    {{ topic.1 }}
                </option>
            {% endfor %}
        </select>
    </div>

    <div class="col-auto form-group flex-shrink-1 p-0 px-1">
        <label class="form-label" for="date_from-desktop-input" id="date_from-desktop-label">Date from</label>
        <div class="input-group">
            <input
                class="form-control"
                placeholder="dd/mm/yyyy"
                name="date_from"
                id="date_from-desktop-input"
                type="text"
                autocomplete="off"
                aria-autocomplete="none"
                {% if request.GET.date_from %}value="{{ request.GET.date_from }}"{% endif %}
            />
        </div>
    </div>
    <div class="col-auto form-group flex-shrink-1 p-0">
        <label class="form-label" for="date_to-desktop-input" id="date_to-desktop-label">Date to</label>
        <div class="d-flex">
            <div class="input-group me-md-1">
                <input
                    class="form-control"
                    placeholder="dd/mm/yyyy"
                    name="date_to"
                    id="date_to-desktop-input"
                    type="text"
                    autocomplete="off"
                    aria-autocomplete="none"
                    {% if request.GET.date_to %}value="{{ request.GET.date_to }}"{% endif %}
                />
            </div>
            <div class="d-none d-md-block">
                <button class="btn btn-outline-primary" type="submit">Filter</button>
            </div>
        </div>
    </div>
</form>