{% extends "base.html" %}
{% block title %}Kanban Board — Jadwa AI{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">PROJECT KANBAN</div>
            <h1 class="text-2xl font-bold text-white">لوحة المشاريع</h1>
        </div>
    </div>

    <form method="POST" action="{{ url_for('kanban.add') }}" class="glass p-4 rounded-xl border border-white/10 mb-8 flex flex-wrap gap-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input name="title" required placeholder="عنوان المشروع/المهمة" class="flex-1 min-w-[200px] bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
        <select name="report_id" class="bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            <option value="">— ربط بتقرير —</option>
            {% for r in reports %}<option value="{{ r.id }}">{{ r.project_name }}</option>{% endfor %}
        </select>
        <button type="submit" class="bg-gold-500/20 border border-gold-500/30 text-gold-400 px-5 py-2 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">+ إضافة</button>
    </form>

    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        {% for stage_key, stage_name, stage_class in stages %}
        <div class="min-h-[300px]">
            <div class="flex items-center gap-2 mb-3">
                <span class="px-3 py-1 rounded-full text-xs font-bold border {{ stage_class }}">{{ stage_name }}</span>
                <span class="text-xs text-slate-500">{{ cards|selectattr('stage','equalto',stage_key)|list|length }}</span>
            </div>
            <div class="space-y-2">
                {% for card in cards if card.stage == stage_key %}
                <div class="glass p-3 rounded-xl border border-white/5 hover:border-white/20 transition group">
                    <div class="text-white text-sm font-medium mb-1">{{ card.title }}</div>
                    {% if card.description %}<div class="text-xs text-slate-500 mb-2">{{ card.description[:60] }}</div>{% endif %}
                    {% if card.report %}<div class="text-xs text-gold-500/50 mb-2">{{ card.report.project_name }}</div>{% endif %}
                    <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition">
                        {% for sk, sn, sc in stages if sk != stage_key %}
                        <form method="POST" action="{{ url_for('kanban.move', card_id=card.id) }}" class="inline">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="stage" value="{{ sk }}">
                            <button type="submit" class="text-[10px] px-1.5 py-0.5 rounded border {{ sc }} hover:opacity-80">{{ sn }}</button>
                        </form>
                        {% endfor %}
                        <form method="POST" action="{{ url_for('kanban.delete', card_id=card.id) }}" class="inline ml-auto">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="text-[10px] text-red-400 hover:text-red-300">&#x2715;</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}