{% extends "base.html" %}
{% block title %}Workspaces — Memlord{% endblock %}
{% block content %}

<div x-data="workspacesPage()" x-init="init()">

    <div class="page-header">
        <h1 class="page-title">Workspaces</h1>
        <a href="/ui/workspaces/new" class="btn btn-primary btn-sm">+ New workspace</a>
    </div>

    <div x-show="loading" style="text-align:center;padding:3rem;color:var(--text-4)">Loading…</div>

    <template x-for="ws in workspaces" :key="ws.id">
        <div class="card">
            <div class="card-header">
                <a :href="'/ui/workspaces/' + ws.id" style="flex:1;min-width:0;color:inherit;text-decoration:none;">
                    <div style="font-weight:600;font-size:.9375rem" x-text="ws.is_personal ? 'Personal' : ws.name"></div>
                </a>
                <span class="badge badge-type" x-text="ws.role"></span>
            </div>
            <div class="card-meta">
                <template x-if="ws.is_personal">
                    <span style="font-size:.8125rem;color:var(--text-3)">Your private memory space</span>
                </template>
                <template x-if="!ws.is_personal && ws.description">
                    <span style="font-size:.8125rem;color:var(--text-3)" x-text="ws.description"></span>
                </template>
                <template x-if="!ws.is_personal">
                    <span style="font-size:.75rem;color:var(--text-4)" x-text="ws.member_count + ' member' + (ws.member_count !== 1 ? 's' : '')"></span>
                </template>
            </div>
        </div>
    </template>

    <div x-show="!loading && workspaces.length === 0" class="empty-state">
        <div class="empty-state-icon">🏢</div>
        <div class="empty-state-title">No workspaces yet</div>
        <div class="empty-state-desc">Create a workspace or join one via an invite link.</div>
    </div>

</div>

<script>
function workspacesPage() {
    return {
        workspaces: [],
        loading: true,

        async init() {
            const r = await fetch('/api/workspaces');
            const data = await r.json();
            this.workspaces = data.sort((a, b) => b.is_personal - a.is_personal);
            this.loading = false;
        },
    };
}
</script>

{% endblock %}