<div class="container-lg">
    <div class="row">
        <div class="col-md-7 col-lg-8 px-2">
            <div class="d-flex justify-content-between">
                <div class="d-block">
                    <!-- <select id="pp" name="pp" class="form-select form-select-sm">
                        <option value="6">6 per pg</option>
                        <option value="12">12 per pg</option>
                        <option value="18">18 per pg</option>
                        <option value="24">24 per pg</option>
                    </select> -->
                </div>
                <?php include 'template/pagination.php'; ?>
            </div>
            <?php
                $cc = 0;
                foreach ( $comments as &$comment ) { 
                    $dt = new DateTime($comment['createdAt'], new DateTimeZone('UTC'));
                    $dt->setTimezone(new DateTimeZone('America/New_York'));
                    $datetime = $dt->format('Y-m-d H:i:s');
                    $time     = $dt->format('g:i a');
                    $likeText = ( $comment['count'] == 1 )
                        ? $comment['count'].' Like'
                        : $comment['count'].' Likes'
                    ;

                    if ( strlen($comment['status']) > 0 ) {
                        include 'template/task.php';
                    } else {
                        include 'template/comment.php';
                    }                    

                    $cc++;
                }
            ?>
            <div class="d-flex justify-content-end">
                <?php include 'template/pagination.php'; ?>
            </div>
        </div>
        <div class="col-md-5 col-lg-4 px-4 mt-4 mt-lg-0 d-none d-md-block">
            <div id="calendarEl" class="socialCalendar"></div>
            <hr class="my-5">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <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 id="forecast" class="overflow-y-scroll overflow-x-hidden pe-2" style="height:600px;">
                <div class="spinner-border text-danger m-5" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <hr class="my-5">
            <h3>Tasks</h3>
            <div id="task" class="overflow-y-scroll overflow-x-hidden pe-2" style="height:600px;">
                <?php include 'template/tasks-social.php'; ?>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid mt-5 p-0">
    <?php include 'template/team.php' ?>
</div>