{% 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.video %}
                <video width="100%" controls>
                    <source src="{{post.video.url}}" type="video/mp4">
                </video>
            {% elif post.fecade_url %}
                <div id="videoFecade" class="video-facade position-relative" data-video-html='<iframe width="560" height="315" src="{{post.fecade_url}}" allowfullscreen></iframe>'>
                    <div class="video-facade-preview">
                        <img src="{{post.cover.url}}" alt="Video Facade Video Preview" class="w-100">
                        <div class="bg-overlay">
                            <div class="bg-overlay-content dark">
                                <a href="#" class="overlay-trigger-icon size-lg op-ts op-07 bg-light text-dark" data-hover-animate="op-1" data-hover-animate-out="op-07"><i class="bi-play-fill fs-2 position-relative" style="left:1px"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="video-facade-content"></div>
                </div>
            {% else %}
                <img class="image-feed" src="{{post.media.url}}" alt="">
            {% 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">
                        {% if post.video %}
                            <button class="btn btn-sm mx-3 btn-shappire" onclick="updateFeeds({{post.id}}, 'BlogFormVideo')">{% trans "Edit Content" %}</span> <i class="ri-magic-fill text-light"></i></button>
                        {% elif post.fecade_url %}
                            <button class="btn btn-sm mx-3 btn-shappire" onclick="updateFeeds({{post.id}}, 'BlogFormVideo')">{% trans "Edit Content" %}</span> <i class="ri-magic-fill text-light"></i></button>
                        {% else %}
                            <button class="btn btn-sm mx-3 btn-shappire" onclick="updateFeeds({{post.id}}, 'BlogFormImage')">{% trans "Edit Content" %}</span> <i class="ri-magic-fill text-light"></i></button>
                        {% endif %}       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>