{{ if i.condition == player.feed_condition }}
    {{ if i.sponsored }}
        <div class="carousel-item" data-doc-id="{{i.doc_id}}">
            <div id="carousel_content_{{i.doc_id}}" class="w-100 bg-white">
                <div class="tweet d-flex align-items-start p-2">
                    <!-- Profile picture -->
                    <div class="profile-pic me-2">
                        <img src="{{i.user_image}}" class="rounded-circle" style="width: 48px; height: 48px; object-fit: cover;"
                             alt="Profile picture of {{i.username}}."
                             data-bs-toggle="tooltip"
                             data-bs-placement="bottom"
                             data-bs-html="true"
                             data-bs-custom-class="custom-tooltip"
                             title="<div class='text-start text-secondary'><b class='text-dark'>{{i.username}}</b><br>
                             @{{i.handle}}<br><br>
                             {{i.user_description}} <br><br><b class='text-dark'>{{i.user_followers}}</b> Followers</div>">
                    </div>

                    <!-- Tweet content -->
                    <div class="tweet-content promoted-content w-100" id="tweet_{{i.doc_id}}">
                        <!-- Tweet header -->
                        <div class="d-flex justify-content-between"
                             style="cursor: pointer;"
                             data-bs-toggle="tooltip"
                             data-bs-placement="bottom"
                             data-bs-html="true"
                             data-bs-custom-class="custom-tooltip"
                             title="<div class='text-start text-secondary'><b class='text-dark'>{{i.username}}</b><br>
                             @{{i.handle}}<br><br>
                             {{i.user_description}} <br><br><b class='text-dark'>{{i.user_followers}}</b> Followers</div>">
                            <div>
                                <small><strong>{{i.username}}</strong></small>
                                <small class="text-muted">@{{i.handle}}</small>
                                <small class="text-muted">&middot;</small>
                                <small class="text-muted">Sponsored</small>
                            </div>
                        </div>

                        <!-- Tweet Body -->
                        <div class="spons-post">
                            <p class="my-1" id="tweet_text_{{i.doc_id}}">{{i.text}}</p>
                            {{ if i.pic_available == True }}
                                <a href="{{i.target}}" target="_blank" style="text-decoration: none; cursor: pointer;">
                                    <img src="{{i.media}}" class="img-fluid rounded-4 mt-2" alt="{{i.alt_text}}">
                                </a>
                            {{ endif }}
                        </div>

                        <!-- Tweet actions -->
                        <div class="d-flex justify-content-between mt-2">
                            <div class="reply-button col" data-bs-toggle="modal" data-bs-target="#replyModal_{{i.doc_id}}" id="reply_button_{{i.doc_id}}">
                                <span class="bi bi-chat text-secondary reply-icon" id="reply_icon_{{i.doc_id}}" style="cursor: pointer">️</span>
                                <span class="reply-count text-secondary" id="reply_count_{{i.doc_id}}">{{i.replies}}</span>
                            </div>
                            <div class="repost-button col">
                                <span class="bi bi-arrow-repeat text-secondary repost-icon" style="cursor: pointer">️</span>
                                <span class="repost-count text-secondary">{{i.reposts}}</span>
                            </div>
                            <div class="like-button col" id="like_button_{{i.doc_id}}">
                                <span class="bi bi-heart text-secondary like-icon" style="cursor: pointer">️</span>
                                <span class="like-count text-secondary">{{i.likes}}</span>
                            </div>
                            <div class="share-button col">
                                <span class="bi bi-upload text-secondary share-icon" style="cursor: pointer">️</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{ else }}
        <div class="carousel-item" data-doc-id="{{i.doc_id}}">
            <div id="carousel_content_{{i.doc_id}}" class="w-100 bg-white">
                <div class="tweet d-flex align-items-start p-2">
                    <!-- Profile picture -->
                    <div class="profile-pic me-2">
                        <img src="{{i.user_image}}" class="rounded-circle" style="width: 48px; height: 48px; object-fit: cover;"
                             alt="Profile picture of {{i.username}}."
                             data-bs-toggle="tooltip"
                             data-bs-placement="bottom"
                             data-bs-html="true"
                             data-bs-custom-class="custom-tooltip"
                             title="<div class='text-start text-secondary'><b class='text-dark'>{{i.username}}</b><br>
                             @{{i.handle}}<br><br>
                             {{i.user_description}} <br><br><b class='text-dark'>{{i.user_followers}}</b> Followers</div>">
                    </div>

                    <!-- Tweet content -->
                    <div class="tweet-content w-100" id="tweet_{{i.doc_id}}">
                        <!-- Tweet header -->
                        <div class="d-flex justify-content-between"
                             style="cursor: pointer;"
                             data-bs-toggle="tooltip"
                             data-bs-placement="bottom"
                             data-bs-html="true"
                             data-bs-custom-class="custom-tooltip"
                             title="<div class='text-start text-secondary'><b class='text-dark'>{{i.username}}</b><br>
                             @{{i.handle}}<br><br>
                             {{i.user_description}} <br><br><b class='text-dark'>{{i.user_followers}}</b> Followers</div>">
                            <div>
                                <small><strong>{{i.username}}</strong></small>
                                <small class="text-muted">@{{i.handle}}</small>
                                <small class="text-muted">&middot;</small>
                                <small class="text-muted">{{i.date}}</small>
                            </div>
                        </div>

                        <!-- Tweet text -->
                        <p class="my-1" id="tweet_text_{{i.doc_id}}">{{i.text}}</p>

                        <!-- Tweet image if available -->
                        {{ if i.pic_available == True }}
                            <img src="{{i.media}}" class="img-fluid rounded-4 mt-2" alt="{{i.alt_text}}">
                        {{ endif }}

                        <!-- Tweet actions -->
                        <div class="d-flex justify-content-between mt-2">
                            <div class="reply-button col" data-bs-toggle="modal" data-bs-target="#replyModal_{{i.doc_id}}" id="reply_button_{{i.doc_id}}">
                                <span class="bi bi-chat text-secondary reply-icon" id="reply_icon_{{i.doc_id}}" style="cursor: pointer">️</span>
                                <span class="reply-count text-secondary" id="reply_count_{{i.doc_id}}">{{i.replies}}</span>
                            </div>
                            <div class="repost-button col">
                                <span class="bi bi-arrow-repeat text-secondary repost-icon" style="cursor: pointer">️</span>
                                <span class="repost-count text-secondary">{{i.reposts}}</span>
                            </div>
                            <div class="like-button col" id="like_button_{{i.doc_id}}">
                                <span class="bi bi-heart text-secondary like-icon" style="cursor: pointer">️</span>
                                <span class="like-count text-secondary">{{i.likes}}</span>
                            </div>
                            <div class="share-button col">
                                <span class="bi bi-upload text-secondary share-icon" style="cursor: pointer">️</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{ endif }}
{{ endif }}