<!-- Football fixture picker modal -->
<div class="modal fade" id="footballFixtureModal" tabindex="-1" aria-labelledby="footballFixtureModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="footballFixtureModalLabel">
                    <i class="bi bi-calendar-event"></i> Browse fixtures
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="football-picker-alert" class="alert alert-danger d-none"></div>
                <div class="row g-3 mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Country</label>
                        <select id="fp-country" class="form-select">
                            <option value="">Loading...</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">League</label>
                        <select id="fp-league" class="form-select" disabled>
                            <option value="">Select country first</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date range</label>
                        <select id="fp-range" class="form-select">
                            <option value="today">Today</option>
                            <option value="tomorrow">Tomorrow</option>
                            <option value="week" selected>Next 7 days</option>
                        </select>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <small class="text-muted" id="fp-timezone-hint">Times shown in EAT (Africa/Nairobi)</small>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="fp-load-fixtures" disabled>
                        <i class="bi bi-search"></i> Load fixtures
                    </button>
                </div>
                <div id="fp-loading" class="text-center py-4 d-none">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="text-muted mt-2 mb-0">Fetching fixtures from API-Football...</p>
                </div>
                <div id="fp-fixtures-list" class="list-group" style="max-height: 320px; overflow-y: auto;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="fp-apply-selected" disabled>
                    <i class="bi bi-plus-circle"></i> Add selected
                </button>
            </div>
        </div>
    </div>
</div>
