{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% load widget_tweaks %}

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

<h1 class="my-4 text-center text-primary">مقالات</h1>
{% include 'profile/message.html' %}

<div class="container">
    <div class="row">
        {% for post in posts %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card shadow-lg border-0 rounded-lg overflow-hidden hover-effect">
                    {% if post.poster %}
                        <img src="{{ post.poster.url }}" class="card-img-top" alt="{{ post.title }}">
                    {% else %}
                        <img src="https://via.placeholder.com/600x400" class="card-img-top" alt="Placeholder">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title text-dark">{{ post.title }}</h5>
                        <p class="card-text text-muted">{{ post.content|truncatewords:50|safe }}</p>
                        <a href="{% url 'post-detail' post.pk %}" class="btn btn-primary btn-block">بیشتر بخوانید</a>

                        <!-- دکمه‌ها برای لایک و بازدید -->
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <a href="{% url 'like-post' post.pk %}" class="btn-like btn btn-outline-primary">
                                <i class="fas fa-thumbs-up"></i>
                                <span class="like-count">{{ post.like_count }}</span>
                            </a>
                            <p class="text-muted mb-0">
                                <i class="fas fa-eye"></i> <span class="visit-count">{{ post.view_count }}</span> بازدید
                            </p>
                        </div>
                        {% if roles_status.ادمین_اصلی or roles_status.فرماندهی %}

                        <!-- دکمه‌های ویرایش و حذف -->
                            <div class="mt-3 d-flex justify-content-between">
                                <a href="{% url 'edit-post' post.pk %}" class="btn btn-warning btn-sm">ویرایش</a>
                                <a href="{% url 'delete-post' post.pk %}" class="btn btn-danger btn-sm">حذف</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<!-- اضافه کردن لینک FontAwesome برای آیکون لایک -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    /* استایل تصاویر */
.card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, filter 0.3s ease;
}

.card-img-top:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* استایل کارت‌ها */
.card-body {
    padding: 1.5rem;
    background-color: #ffffff;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #212529;
    transition: color 0.3s ease;
}

.card-title:hover {
    color: #007bff;
}

.card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d;
}

/* استایل دکمه‌ها */
.btn-block {
    padding: 12px;
    border-radius: 25px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* استایل دکمه "ایجاد مقاله جدید" */
.btn-lg {
    padding: 15px 35px;
    font-size: 1.2rem;
    border-radius: 30px;
}

/* فاصله‌دهی مناسب بین کارت‌ها */
.row {
    margin-top: 30px;
}

/* بهبود سایه‌ها برای کارت‌ها */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* پس‌زمینه عنوان */
h1 {
    font-size: 2.5rem;
    color: #0069d9;
    font-weight: 700;
    padding: 25px;
    background-color: #f0f8ff;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    transition: transform 0.3s ease-in-out;
}

/* استایل دکمه لایک */
.btn-like {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.btn-like .like-count {
    margin-left: 5px;
}

.btn-like:hover {
    background-color: #007bff;
    color: #fff;
}

/* استایل برای چیدمان دکمه‌ها کنار هم */
.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d-flex .btn-like {
    margin-right: 10px;
}

.d-flex p {
    margin: 0;
}

/* استایل لایک و بازدید */
.visit-count, .like-count {
    font-weight: bold;
}

/* افزایش سایز آیکون‌ها */
.fas {
    font-size: 1.2rem;
}

/* بهبود سایه‌ها برای کارت‌ها */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

</style>
{% endblock %}