{% extends 'base.html' %}
{% load static %}

{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}
<br><br>
<br>

<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-lg">
        <div class="card-body">
            <!-- عنوان مقاله -->
            <h1 class="text-center text-primary mb-4">{{ post.title }}</h1>
            
            <!-- نویسنده و تاریخ انتشار -->
            <p class="text-muted text-center">
                نویسنده: {{ post.author }} | تاریخ انتشار: 
                <strong>{{ post.published_date|date:"Y/m/d" }}</strong>
            </p>
            <hr>

            <!-- تصویر مقاله -->
            {% if post.poster %}
                <img src="{{ post.poster.url }}" class="img-fluid rounded mx-auto d-block mb-4" alt="{{ post.title }}">
            {% else %}
                <img src="https://via.placeholder.com/800x400" class="img-fluid rounded mx-auto d-block mb-4" alt="Placeholder">
            {% endif %}
            <hr>
<h2 style="color: rgb(104, 104, 104);">محتوا:</h2>
            <!-- محتوای مقاله -->
            <div class="content text-justify">
                {{ post.content|safe }}
            </div>
            <hr>

            <!-- آمار بازدید و لایک -->
            <p class="text-muted">
                <i class="fas fa-eye"></i> <span class="visit-count">{{ post.view_count }}</span> بازدید |
                <i class="fas fa-thumbs-up"></i> <span class="like-count">{{ post.like_count }}</span> لایک
            </p>

            <!-- دکمه لایک -->




        <!-- دکمه بازگشت -->
        <div class="text-center mt-4">
            <a href="{% url 'post-list' %}" class="btn btn-secondary btn-lg">بازگشت به لیست مقالات</a>
        </div>
    </div>
</div>

<script>
async function likePost(postId) {
    try {
        const response = await fetch(`/like/${postId}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCSRFToken(),
            },
        });

        if (response.ok) {
            const data = await response.json();
            const likeCountElement = document.querySelector(".like-count");
            if (likeCountElement) {
                likeCountElement.innerText = data.likes;
            }
        } else {
            console.error('Error:', await response.json());
        }
    } catch (error) {
        console.error('Request failed:', error);
    }
}

function getCSRFToken() {
    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}
</script>

{% endblock %}