<!-- Filters -->
<div class="scopes">
    <div class="d-flex justify-content-between w-100"> 
        <div class="filters-dropdown-btn w-100">
            <a style="text-decoration: none;" class="btn btn-link text-start btn-light-gray p-3 fw-bold w-100" 
                data-bs-toggle="collapse" href="#dictionaryFilterCollapse"
                aria-expanded="false" aria-controls="dictionaryFilterCollapse">
                <i class="fas fa-filter me-1"></i> Filters
            </a>
        </div>
    </div>

    <hr>
    
    <div class="collapse mt-0" id="dictionaryFilterCollapse">
        <div class="row g-3 mb-3 dictionary-scopes">
            <!-- Word Filter -->
            <div class="col-lg-3 col-md-6">
                <label for="word" class="form-label fw-medium">Word:</label>
                <input type="text" name="word" id="word" class="form-control"
                    placeholder="Enter word" autocomplete="off">
            </div>

            <!-- Word Type Filter -->
            <div class="col-lg-3 col-md-6">
                <label for="type" class="form-label fw-medium">Type:</label>
                <select class="form-select searchSelect" name="type" id="type">
                    <option value="">Select type</option>
                    <option value="noun">Noun</option>
                    <option value="verb">Verb</option>
                    <option value="adjective">Adjective</option>
                </select>
            </div>

            <!-- Category Filter -->
            <div class="col-lg-3 col-md-6">
                <label for="category" class="form-label fw-medium">Category:</label>
                <select class="form-select searchSelect" name="category" id="category">
                    <option value="">Select category</option>
                    <option value="technology">Technology</option>
                    <option value="science">Science</option>
                    <option value="business">Business</option>
                </select>
            </div>

            <!-- Status Filter -->
            <div class="col-lg-3 col-md-6">
                <label for="status" class="form-label fw-medium">Status:</label>
                <select class="form-select searchSelect" name="status" id="status">
                    <option value="">Select status</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                    <option value="archived">Archived</option>
                </select>
            </div>

            <!-- Created Date Range -->
            <div class="col-lg-3 col-md-6">
                <label for="fromDate" class="form-label fw-medium">Created At (From):</label>
                <input type="date" class="form-control created_at" id="fromDate"
                    autocomplete="off" placeholder="Select from date">
            </div>

            <div class="col-lg-3 col-md-6">
                <label for="toDate" class="form-label fw-medium">Created At (To):</label>
                <input type="date" class="form-control created_at" id="toDate"
                    autocomplete="off" placeholder="Select to date">
            </div>

            <!-- Action Buttons for Filters -->
            <div class="col-12 mt-3">
                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="clearDictionaryFilters">
                        <i class="fas fa-times me-1"></i> Clear Filters
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="applyDictionaryFilters">
                        <i class="fas fa-filter me-1"></i> Apply Filters
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>