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

<br /><br /><br /><br />

<div class="container mt-5">
    <h1 class="text-center mb-4 ">📜 تاریخچه پیام‌ها و کارها</h1>

    <!-- بخش پیام‌ها -->
    <div class="mt-5">
        <h3 class=" mb-3"> پیام‌ها:</h3>
        <div class="table-responsive animate__animated animate__delay-0.1s animate__fadeIn">
            <table class="table custom-table">
                <thead>
                    <tr>
                        <th><i class="fas fa-envelope"></i> عنوان</th>
                        <th><i class="fas fa-comment-dots"></i> پیام</th>
                        <th><i class="fas fa-calendar-alt"></i> تاریخ</th>
                        
                    </tr>
                </thead>
                <tbody>
                    {% for notification in notifications %}
                        <td><i class="fas fa-envelope"></i> {{ notification.title }}</td>
                        <td><i class="fas fa-comment"></i> {{ notification.message }}</td>
                        <td><i class="fas fa-calendar-alt"></i> {{ notification.created_at_shamsi }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- بخش کارهای آینده -->
    <div class="mt-5">
        <h3 class=" mb-3">کارهای آینده:</h3>
        <div class="table-responsive animate__animated animate__delay-0.1s animate__fadeIn" >
            <table class="table custom-table">
                <thead>
                    <tr>
                        <th><i class="fas fa-tasks"></i> عنوان</th>
                        <th><i class="fas fa-info-circle"></i> توضیحات</th>
                        <th><i class="fas fa-flag"></i> وضعیت</th>
                        <th><i class="fas fa-calendar-alt"></i> تاریخ</th>
                    </tr>
                </thead>
                <tbody>
                    {% for futurework in futureworks %}
                    <tr
                        class="">
                        <td><i class="fas fa-tasks"></i> {{ futurework.title }}</td>
                        <td><i class="fas fa-info"></i> {{ futurework.description }}</td>
                        <td><i class="fas fa-flag"></i>
                            {% if futurework.is_read %}
                            خوانده شده
                            {% else %}
                            خوانده نشده
                            {% endif %}
                        </td>
                        <td><i class="fas fa-calendar-alt"></i> {{ futurework.created_at_shamsi }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    /* سفارشی‌سازی جداول */
    .custom-table {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background-color: #f9f9f9;
    }

    .custom-table thead {
        background-color: #000000;
        color: white;
        text-align: center;
        font-weight: bold;
    }

    .custom-table th,
    .custom-table td {
        padding: 15px;
        text-align: center;
        vertical-align: middle;
    }

    .custom-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    /* نشان‌ها (Badge) */
    .badge {
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 12px;
    }

    /* عناوین بخش‌ها */
    .text-primary {
        font-size: 1.5rem;
        border-bottom: 2px solid #007bff;
        display: inline-block;
        padding-bottom: 5px;
    }

    /* افکت‌ها برای آیکون‌ها */
    .table th i,
    .table td i {
        margin-right: 5px;
        color: #007bff;
    }
</style>
{% endblock %}