<div class="container-fluid px-0 mb-5">
    <div class="border-top" style="background-color: var(--bs-tertiary-bg);">
        <div class="d-flex justify-content-between align-items-center p-3">
            <h3 class="m-0">Forecast</h3>
            <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check forecast-btn btbAction" name="forecast-btn" id="forecast-btn-8d" autocomplete="off" data-container="forecast-8d" data-action="click" data-target="8 day forecast button" checked>
                <label class="btn btn-outline-danger" for="forecast-btn-8d">8 Day</label>

                <input type="radio" class="btn-check forecast-btn btbAction" name="forecast-btn" id="forecast-btn-48h" autocomplete="off" data-container="forecast-48h" data-action="click" data-target="48 hour forecast button">
                <label class="btn btn-outline-danger" for="forecast-btn-48h">48 Hour</label>
            </div>
        </div>
    </div>
    <div id="forecast">
        <div class="d-flex justify-content-center align-items-center m-5">
            <div class="spinner-border text-danger" role="status">
            </div>
            <span class="ms-2">Loading forecast...</span>
        </div>
    </div>
</div>