                    <!-- BEGIN: Inbox Filter -->
                        <div class="intro-y flex flex-col-reverse sm:flex-row items-center">
                            <div class="w-full sm:w-auto relative mr-auto mt-3 sm:mt-0">
                                <i class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700" data-feather="search"></i> 
                                <input type="text" class="input w-full sm:w-64 box px-10 text-gray-700 placeholder-theme-13" placeholder="Filter">
                                <div class="inbox-filter dropdown absolute inset-y-0 mr-3 right-0 flex items-center">
                                    <i class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700" data-feather="chevron-down"></i> 
                                    <div class="inbox-filter__dropdown-box dropdown-box mt-10 absolute top-0 left-0 z-20">
                                        <div class="dropdown-box__content box p-5">
                                            <div class="grid grid-cols-12 gap-4 row-gap-3">
                                                <div class="col-span-6">
                                                    <div class="text-xs">Requested o</div>
                                                    <select id="" class="input w-full border mt-2 flex-1">
                                                        
                                                        <option value="Today">Today</option>
                                                        <option value="Last 7 days">Last 7 days</option>
                                                        <option value="For all time">For all time</option>
                                                        <option value="date_range1">from date to date</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-6">
                                                    <div class="text-xs">Posted on</div>
                                                    <select data-placeholder="Select Posted on"  id="" class="input w-full border mt-2 flex-1">
                                                        
                                                        <option value="Today">Today</option>
                                                        <option value="Last 7 days">Last 7 days</option>
                                                        <option value="For all time">For all time</option>
                                                        <option value="date_range">from date to date</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-6">
                                                        <div class="text-xs">Applied on</div>
                                                        <select id="applied-select" class="input w-full border mt-2 flex-1">
                                                            <option value="Today">Today</option>
                                                            <option value="Last 7 days">Last 7 days</option>
                                                            <option value="For all time">For all time</option>
                                                            <option value="date_applied">from date to date</option>
                                                        </select>

                                                        <!-- обёртка для диапазона дат (по умолчанию скрыта) -->
                                                        <div id="date-range-wrapper" class="p-5 grid grid-cols-12 gap-4 row-gap-3 mt-4" style="display: none;">
                                                            <div class="col-span-12 sm:col-span-6">
                                                                <label>From</label>
                                                                <input id="date-from" class="datepicker input w-full border mt-2">
                                                            </div>
                                                            <div class="col-span-12 sm:col-span-6">
                                                                <label>To</label>
                                                                <input id="date-to" class="datepicker input w-full border mt-2">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <script>
                                                        const select = document.getElementById('applied-select');
                                                        const dateRangeWrapper = document.getElementById('date-range-wrapper');
                                                        const dateFrom = document.getElementById('date-from');
                                                        const dateTo = document.getElementById('date-to');

                                                        select.addEventListener('change', function () {
                                                            if (this.value === 'date_applied') {
                                                                dateRangeWrapper.style.display = 'grid';
                                                            } else {
                                                                dateRangeWrapper.style.display = 'none';
                                                                dateFrom.value = '';
                                                                dateTo.value = '';
                                                            }
                                                        });

                                                        // Если хочешь — можно сохранить даты как data-атрибут или передать их куда нужно
                                                        dateFrom.addEventListener('change', function () {
                                                            select.setAttribute('data-date-from', this.value);
                                                        });

                                                        dateTo.addEventListener('change', function () {
                                                            select.setAttribute('data-date-to', this.value);
                                                        });
                                                    </script>
                                               
                                                <div class="col-span-6">
                                                     
                                                    <div class="mt-3">
                                                        <label>Clients</label>
                                                        <div class="mt-2">
                                                            <select data-placeholder="Select Clients" id="clients-multiselect" class="select2 w-full" multiple="multiple">
                                                                {% set seen_ids = [] %}
                                                                {% for job in jobs %}
                                                                    {% if job.client.id not in seen_ids %}
                                                                        <option value="{{ job.client.id }}">{{ job.client.user_nicename }}</option>
                                                                        {% set _ = seen_ids.append(job.client.id) %}
                                                                    {% endif %}
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    
                                                    </div>
                                                    
                                                
                                                <div class="col-span-6">
                                                <div class="mt-3">
                                                    <label>Assignee</label>
                                                    <div class="mt-2">
                                                        <select data-placeholder="Select Assignee" class="select2 w-full" multiple="multiple" name="assignee">
                                                            <option value="">— Not selected —</option>
                                                            {% for user in users %}
                                                                <option value="{{ user.id }}" 
                                                                    {% if user.id in assigned_users_ids %}selected{% endif %}>
                                                                    {{ user.username }}
                                                                </option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                                <div class="col-span-6">
                                                   
                                                    <div class="mt-3">
                                                        <label>Status</label>
                                                        <div class="mt-2">
                                                            <select data-placeholder="Select Status" class="select2 w-full" multiple>
                                                                <option value="Scheduled" >Scheduled</option>
                                                                <option value="Requested">Requested</option>
                                                                <option value="In-Progress">In-Progress</option>
                                                                <option value="Applied">Applied</option>
                                                                <option value="Issues Applying">Issues Applying</option>
                                                                <option value="Cancelled">Cancelled</option>

                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-span-12 flex items-center mt-3">
                                                    
                                                    <button class="button w-32 justify-center block bg-theme-1 text-white ml-2">Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full sm:w-auto flex">
                                
                                <div class="dropdown relative">
                                
                                        
                                </div>
                            </div>
                        </div>
                        <!-- END: Inbox Filter -->