{% extends "base.html" %}
{% block title %}مساحات العمل{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#128101;</span> مساحات العمل المشتركة
        </h1>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">إنشاء مساحة عمل جديدة</h2>
            <form method="POST" action="{{ url_for('workspaces.create') }}" class="flex gap-3">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="text" name="name" required placeholder="اسم المساحة" class="flex-1 bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600">
                <button type="submit" class="bg-gold-500 text-black font-bold px-6 py-3 rounded-xl">إنشاء</button>
            </form>
        </div>
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">الانضمام لمساحة عمل</h2>
            <form method="POST" action="{{ url_for('workspaces.join') }}" class="flex gap-3">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="text" name="code" required placeholder="كود الدعوة" class="flex-1 bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 font-mono">
                <button type="submit" class="bg-white/10 text-white font-bold px-6 py-3 rounded-xl border border-white/10">انضمام</button>
            </form>
        </div>
    </div>

    <h2 class="text-xl font-bold text-white mb-4">مساحاتك</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for ws in owned %}
        <a href="{{ url_for('workspaces.view', ws_id=ws.id) }}" class="glass p-5 rounded-xl glass-hover transition">
            <div class="text-white font-semibold mb-1">{{ ws.name }}</div>
            <div class="flex items-center justify-between">
                <span class="text-xs text-slate-500">{{ ws.members|length }} members</span>
                <span class="text-xs bg-gold-500/20 text-gold-400 px-2 py-0.5 rounded-full">Owner</span>
            </div>
            <div class="text-xs text-slate-600 font-mono mt-2">Code: {{ ws.invite_code }}</div>
        </a>
        {% endfor %}
        {% for ws in joined %}
        <a href="{{ url_for('workspaces.view', ws_id=ws.id) }}" class="glass p-5 rounded-xl glass-hover transition">
            <div class="text-white font-semibold mb-1">{{ ws.name }}</div>
            <div class="flex items-center justify-between">
                <span class="text-xs text-slate-500">{{ ws.members|length }} members</span>
                <span class="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded-full">Member</span>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}