t;?php foreach ($distance_furlongs_options as $furlong): ?>
                                <option value="<?= htmlspecialchars($furlong) ?>"><?= htmlspecialchars($furlong) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="col-12 col-md">
                        <label class="form-label">Runner Count :</label>
                        <input type="number" id="runner_count_from" name="runner_count_from" class="form-control mb-1" placeholder="From" min="0" />
                        <input type="number" id="runner_count_to" name="runner_count_to" class="form-control" placeholder="To" min="0" />
                    </div>

                    <div class="col-12 col-md-auto text-start">
                        <button type="button" id="clearFilters" class="btn btn-primary btn-clear">Clear filters</button>
                    </div>
                </form>

                <div class="table-responsive mt-4">
                    <table class="data-table table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>scheduled_time</th>
                                <th>country</th>
                                <th>race_title</th>
                                <th>race_type</th>
                                <th>class</th>
                                <th>Handicap</th>
                                <th>age_range</th>
                                <th>Distance</th>
                                <th>distance_furlongs</th>
                                <th>prize_pos_1</th>
                                <th>Runner Count</th>
                            </tr>
                        </thead>
                        <tbody id="raceTableBody">
                            <?php foreach ($races as $race): ?>
                            <tr>
                                <td><?= htmlspecialchars($race["scheduled_time"]) ?></td>
                                <td><?= htmlspecialchars($race["country"]) ?></td>
                                <td><?= htmlspecialchars($race["race_title"]) ?></td>
                                <td><?= htmlspecialchars($race["race_type"]) ?></td>
                                <td><?= htmlspecialchars($race["class"]) ?></td>
                                <td><?= htmlspecialchars($race["Handicap"]) ?></td>
                                <td><?= htmlspecialchars($race["age_range"]) ?></td>
                                <td><?= htmlspecialchars($race["Distance"]) ?></td>
                                <td><?= htmlspecialchars($race["distance_furlongs"]) ?></td>
                                <td><?= htmlspecialchars($race["prize_pos_1"]) ?></td>
                                <td><?= htmlspecialchars($race["Runner_Count"]) ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab-pane fade" id="tomorrow" role="tabpanel" aria-labelledby="tomorrow-tab">
                <p>Tomorrow's races data is not implemented in this demo.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Clear filters button functionality
        document.getElementById('clearFilters').addEventListener('click', () => {
            const form = document.getElementById('filterForm');
            form.reset();
        });
        // In a real scenario, you would add JS here to filter the table dynamically based on the selections or reload the data via AJAX.
    </script>
</body>
</html>