<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between context-main-bg context-main">
        <h3 class="card-title mb-0">
            <i class="fa fa-fw fa-comment"></i> Comments
        </h3>
        <span class="badge bg-primary">{count}</span>
    </div>
    <div class="card-body context-second-bg">
        <ul class="list-group list-group-flush">
            {LOOP}
            <li class="list-group-item context-main-bg context-main mb-2">
                <div class="d-flex align-items-start">
                    <div class="me-3">
                        <img src="{ROOT_URL}{avatar}" class="rounded-circle" alt="User Avatar" style="width: 50px; height: 50px;">
                    </div>
                    <div>
                        <div class="mb-1">
                            <small class="text-muted">
                                By: <a href="{ROOT_URL}home/profile/{author}" class="text-decoration-none">{authorName}</a> on {DTC date}{created}{/DTC}
                            </small>
                        </div>
                        <div class="comment-text">
                            {content}
                        </div>
                        {commentControl}
                    </div>
                </div>
            </li>
            {/LOOP} 
            {ALT}
            <li class="list-group-item context-main-bg mb-2">
                <div class="text-center">
                    <p class="mb-0">Be the first to comment.</p>
                </div>
            </li>
            {/ALT}
        </ul>
    </div>
</div>