{% load i18n %}
{% load tz %}
{% load stelatags %}
{% load humanize %}
{% for post in newposts %}
    <div class="card-feed mt-3 mx-auto fade-in">
        <div class="row justify-content-between">
            <div class="col-lg-5">
                <div class="row mb-2">
                    <div class="col-3 col-md-1 col-lg-3">
                        <img class="profile-cover" src="{{instagram.image}}" alt="">
                    </div>
                    <div class="col-9 col-md-8 col-lg-9">
                        <p class="oxanium fw-bold mt-2">{{instagram.title}}</p>
                    </div>
                </div>
            </div>  
            <div class="col-lg-7">
                {% if post.schedule %}
                <p class="oxanium fw-bold text-center">{% trans "Post date:" %} {{ post.schedule|timezone:usertz|date:"d/m/Y" }} {% trans "at" %} {{ post.schedule|timezone:usertz|date:"h:i A" }}</p>
                {% endif %}
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 mb-2">
                {% if post.mediatype == 'CAROUSEL'  %}
                    <div class="swiper ig-carousel-swepper">
                        <div class="swiper-wrapper">
                            {% for obj in post.igitem.all %}
                                <div class="swiper-slide">
                                    <img class="image-feed" src="{{obj.media.url}}" alt="" onclick="popUpImg(event)">
                                </div>
                            {% endfor %}
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <p class="footer-img">{% trans "Click to expand image" %}</p>
                    <script>
                        new Swiper(".ig-carousel-swepper", {
                            slidesPerView: 1,
                            spaceBetween: 30,
                            loop: false,
                            pagination: {
                            el: ".swiper-pagination",
                            clickable: true,
                            },
                            navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                            },
                        });
                    </script>
                {% else %}
                    {% for obj in post.igitem.all %}
                        {% if forloop.counter == 1 %}
                            {% if obj.mp4 %}
                                <i class="fa fa-play play-btn"></i>
                                <video id="videoPlayer{{obj.id}}" class="video-feed" data-id="{{ forloop.counter }}" onclick="popUpVideo(event)">
                                    <source src="{{obj.media.url}}" type="video/mp4">
                                </video>
                            {% else %}
                                <img class="image-feed" src="{{obj.media.url}}" alt="" onclick="popUpImg(event)">
                                <p class="footer-img">{% trans "Click to expand image" %}</p>
                            {% endif %} 
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
            <div class="col-lg-7">
                {% if post.mediatype == "POST" %}
                    <h3 class="fs-5 m-0 p-0 oxanium">{% trans "Media type" %}: {% trans "POST" %}</h3>
                {% elif post.mediatype == "CAROUSEL"  %}
                    <h3 class="fs-5 m-0 p-0 oxanium">{% trans "Media type" %}: {% trans "CAROUSEL" %}</h3>
                {% elif post.mediatype == "REELS"  %}
                    <h3 class="fs-5 m-0 p-0 oxanium">{% trans "Media type" %}: {% trans "REELS" %}</h3>
                {% elif post.mediatype == "STORIES"  %}
                    <h3 class="fs-5 m-0 p-0 oxanium">{% trans "Media type" %}: {% trans "STORIES" %}</h3>
                {% endif %}
                <div class="caption-cage">
                    {{post.caption|safe}}
                </div>
                <div class="d-flex justify-content-end">
                
                </div>
            </div>
        </div>
    </div>
{% endfor %}