{% extends "base.html" %}
{% block title %}{{ workspace.name }}{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-serif font-bold text-white">{{ workspace.name }}</h1>
            <p class="text-slate-500 text-sm mt-1 font-mono">Invite Code: {{ workspace.invite_code }}</p>
        </div>
        <a href="{{ url_for('workspaces.index') }}" class="text-slate-400 hover:text-white text-sm">&#8592; العودة</a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <div class="lg:col-span-1">
            <div class="glass p-5 rounded-2xl">
                <h2 class="text-lg font-bold text-white mb-4">الأعضاء ({{ workspace.members|length }})</h2>
                <div class="space-y-3">
                    {% for m in workspace.members %}
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-white text-sm">{{ m.user.name }}</div>
                            <div class="text-xs text-slate-500">{{ m.role }}</div>
                        </div>
                        {% if workspace.owner_id == current_user.id and m.user_id != current_user.id %}
                        <form method="POST" action="{{ url_for('workspaces.remove_member', ws_id=workspace.id, user_id=m.user_id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="text-red-400 hover:text-red-300 text-xs">Remove</button>
                        </form>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="lg:col-span-3">
            <h2 class="text-lg font-bold text-white mb-4">تقارير الفريق</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {% for report in reports %}
                <div class="glass p-4 rounded-xl glass-hover">
                    <div class="text-white font-semibold text-sm mb-1">{{ report.project_name }}</div>
                    <div class="flex items-center justify-between mt-2">
                        <span class="text-xs text-slate-500">{{ report.user.name }}</span>
                        <span class="text-xs px-2 py-0.5 rounded-full {% if report.verdict == 'GO' %}bg-emerald-500/20 text-emerald-400{% elif report.verdict == 'NO-GO' %}bg-red-500/20 text-red-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ report.verdict or 'N/A' }}</span>
                    </div>
                    <div class="text-xs text-slate-600 mt-1">{{ report.created_at.strftime('%Y-%m-%d') }}</div>
                </div>
                {% else %}
                <div class="text-slate-500 py-8 col-span-2 text-center">لا توجد تقارير بعد</div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}