<div class="container-fluid px-0 mb-5">
    <div class="border-top border-bottom" style="background-color: var(--bs-tertiary-bg);">
        <div class="d-flex justify-content-between">
            <h3 class="p-3 m-0">Activity Logs</h3>
            <button id="calendarToggle" class="btn btn-link text-danger pe-3 btbAction" data-action="click" data-target="calendar toggle" data-bs-toggle="collapse" data-bs-target="#calendar" onclick="this.textContent = ( this.textContent == 'Expand' ) ? 'Collapse' : 'Expand';">Collapse</button>
        </div>
    </div>
    <div id="calendar" class="collapse show">
        <div class="d-flex justify-content-center py-3">
            <span class="text-muted"><small>Click shaded cell to view logs</small></span>
        </div>
        <div class="hstack gap-0 justify-content-center">
            <span class="me-2 text-muted"><small>fewer logs</small></span>
            <div class="bg-danger opacity-25" style="width:25px;height:25px;">
            </div>
            <div class="bg-danger opacity-50" style="width:25px;height:25px;">
            </div>
            <div class="bg-danger opacity-75" style="width:25px;height:25px;">
            </div>
            <div class="bg-danger" style="width:25px;height:25px;">
            </div>
            <span class="ms-2 text-muted"><small>more logs</small></span>
        </div>
        <div class="row">
            <div class="col-12 col-9-sm">
                <div class="p-3 border-bottom" id="calendarEl">
                </div>
            </div>
        </div>
    </div>
</div>