{% extends "base.html" %}
{% block title %}المهام الخلفية{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8 flex items-center gap-3">
        <span class="text-gold-400">&#9881;</span> المهام الخلفية
    </h1>

    <div class="glass rounded-2xl overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-black/30">
                <tr>
                    <th class="text-right p-4 text-slate-400 font-mono text-xs uppercase">النوع</th>
                    <th class="text-right p-4 text-slate-400 font-mono text-xs uppercase">الحالة</th>
                    <th class="text-right p-4 text-slate-400 font-mono text-xs uppercase">التقدم</th>
                    <th class="text-right p-4 text-slate-400 font-mono text-xs uppercase">التاريخ</th>
                </tr>
            </thead>
            <tbody>
                {% for task in pagination.items %}
                <tr class="border-t border-white/5">
                    <td class="p-4 text-white">{{ task.task_type }}</td>
                    <td class="p-4">
                        <span class="text-xs px-2 py-1 rounded-full {% if task.status == 'completed' %}bg-emerald-500/20 text-emerald-400{% elif task.status == 'failed' %}bg-red-500/20 text-red-400{% elif task.status == 'running' %}bg-blue-500/20 text-blue-400{% else %}bg-slate-500/20 text-slate-400{% endif %}">{{ task.status }}</span>
                    </td>
                    <td class="p-4">
                        <div class="w-24 bg-black/30 rounded-full h-2">
                            <div class="bg-gold-500 h-2 rounded-full" style="width: {{ task.progress }}%"></div>
                        </div>
                    </td>
                    <td class="p-4 text-slate-400 text-xs">{{ task.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4" class="p-8 text-center text-slate-500">لا توجد مهام بعد</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}