<form method="get" class="row g-3 mb-4">

    <!-- Date Filter -->
    <div class="col-md-3">
        <label class="form-label">Date Range</label>
        <select name="range" class="form-select">
            <option value="today">Today</option>
            <option value="week">This Week</option>
            <option value="month" selected>This Month</option>
            <option value="year">This Year</option>
            <option value="custom">Custom</option>
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">Start Date</label>
        <input type="date" name="start_date" class="form-control">
    </div>

    <div class="col-md-3">
        <label class="form-label">End Date</label>
        <input type="date" name="end_date" class="form-control">
    </div>

    <!-- Building Filter -->
    <div class="col-md-3">
        <label class="form-label">Building</label>
        <select name="building" class="form-select">
            <option value="">All Buildings</option>
            {% for b in buildings %}
                <option value="{{ b.id }}">{{ b.name }}</option>
            {% endfor %}
        </select>
    </div>

    <!-- Unit Filter -->
    <div class="col-md-3">
        <label class="form-label">Unit</label>
        <select name="unit" class="form-select">
            <option value="">All Units</option>
            {% for u in units %}
                <option value="{{ u.id }}">{{ u.name }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="col-md-3 d-flex align-items-end">
        <button class="btn btn-primary w-100">
            <i class="bi bi-funnel"></i> Apply Filters
        </button>
    </div>

</form>