{% load i18n %}
{% load tz %}
<div class="card rounded box-shadow card-post mb-3">
    <div class="row p-3">
        <div class="col-xl-4 col-lg-5 col-md-12">
            {% if post.mp4 %}
                <i class="fa fa-play play-btn"></i>
                <video id="videoPlayer{{post.id}}" class="video-feed" data-id="{{ forloop.counter }}" onclick="popUpVideo(event)">
                    <source src="{{post.media.url}}" type="video/mp4">
                </video>
            {% else %}
                <img class="image-feed" src="{{post.media.url}}" alt="" onclick="popUpImg(event)">
                <small class="footer-img">{% trans "Click to expand image" %}</small>
            {% endif %}
            <div class="row justify-content-center">
                {% if post.status == "Publish" %}
                    <small class="text-success text-center">{% trans "Publish" %}</small>
                {% else %}
                    <small class="text-danger text-center">{% trans "Draft" %}</small>
                {% endif %}
            </div> 
        </div>
        <div class="col-xl-8 col-lg-7 col-md-12 vh-30-content">
            <h1 class="oxanium fs-6">{{post.title}}</h1>
            {{post.content|safe}}
            <small class="d-block">{% trans "Pub Date" %}</small>
            {% if post.is_schedule %}
                <small>{{ post.schedule|timezone:usertz|date:"d/m/Y" }} {% trans "at" %} {{ post.schedule|timezone:usertz|date:"h:i A" }}</small>
            {% else %}
                <small>{{ post.created|timezone:usertz|date:"d/m/Y" }} {% trans "at" %} {{ post.created|timezone:usertz|date:"h:i A" }}</small>
            {% endif %}
            <div class="vh-30-footer">
                <div class="row">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-sm mx-3 btn-shappire" onclick="updateFeed({{post.id}})">{% trans "Edit Content" %}</span> <i class="ri-magic-fill text-light"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>