<form id="searchForm" class="search" action="{% url 'orgapy:projects' %}" method="get">
    <div class="col">
        <div class="search">
            <div class="search-bar">
                <input class="search-input" autocomplete="off" type="search" name="query" placeholder="Search projects" tabindex="1" value="{% if attrs.query %}{{ attrs.query }}{% endif %}" />
                <i class="search-icon ri-close-line"></i>
                <button class="search-button" tabindex="-1"><i class="ri-search-line"></i></button>
            </div>
            <ul class="search-suggestions menu"></ul>
        </div>
        <div class="row small">
            <div class="actionbar">
                <label for="selectSearchStatus">Filter</label>
                <select id="selectSearchStatus" name="status" style="border-right: none">
                    <option {% if attrs.status == 'any' %}selected{% endif %} value="any">Any status</option>
                    <option {% if attrs.status == 'AC' %}selected{% endif %} value="AC">Active</option>
                    <option {% if attrs.status == 'IN' %}selected{% endif %} value="IN">Inactive</option>
                    <option {% if attrs.status == 'AR' %}selected{% endif %} value="AR">Archived</option>
                    <option {% if attrs.status == 'FU' %}selected{% endif %} value="FU">Future</option>
                </select>
            </div>
            <div class="actionbar">
                <label for="selectSearchSort">Sort by</label>
                <select id="selectSearchSort" name="sort">
                    <option {% if attrs.sort == 'modification' %}selected{% endif %} value="modification">Modification</option>
                    <option {% if attrs.sort == 'creation' %}selected{% endif %} value="creation">Creation</option>
                    <option {% if attrs.sort == 'archived' %}selected{% endif %} value="archived">Archived</option>
                </select>
            </div>
            <div id="documentSearch" class="search">
                <div class="search-bar">
                    <input type="hidden" name="document" value="{{ attrs.document }}" />
                    <input type="text" placeholder="Document" class="search-input" autocomplete="off" />
                    <span class="search-current">
                        <span class="search-current-label"></span>
                        <button class="search-current-button"><i class="ri-close-line"></i></button>
                    </span>
                </div>
                <ul class="search-suggestions menu"></ul>
            </div>
        </div>
    </div>
</form>
<script>
const SUGGESTIONS_URLS = "{% url 'orgapy:suggestions' %}";
bindSearch(searchForm, SUGGESTIONS_URLS, {t: "project"});
bindDocumentInput(documentSearch, SUGGESTIONS_URLS, "{% url 'orgapy:documents' %}");
</script>