{% extends "base.html" %}
{% block page_title %}Workspaces{% endblock %}
{% block content %}
<div style="max-width: 720px;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <h2 style="
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.015em;
        ">Workspaces</h2>
    </div>

    {% if workspaces %}
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px;">
        {% for workspace in workspaces %}
        <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}"
           class="card-hover-lift"
           style="
            display: block;
            background: var(--surface-0);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 20px;
            text-decoration: none;
            transition: all var(--dur-base) var(--ease-out);
        ">
            <div style="font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">{{ workspace.name }}</div>
            {% if workspace.description %}
            <div style="font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6;">{{ workspace.description|truncatechars:80 }}</div>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div style="
        text-align: center;
        padding: 48px 24px;
        background: var(--surface-0);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        margin-bottom: 24px;
    ">
        <p style="font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 20px;">No workspaces yet. Create your first workspace to get started.</p>
    </div>
    {% endif %}

    <!-- Create workspace form -->
    <div style="
        background: var(--surface-0);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        padding: 24px;
        box-shadow: var(--shadow-xs);
    ">
        <h3 style="font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px;">New workspace</h3>
        <form method="post" action="{% url 'workspaces:create' %}" class="flex flex-col sm:flex-row gap-2.5 sm:items-end">
            {% csrf_token %}
            <div style="flex: 1;">
                <input
                    type="text"
                    name="name"
                    placeholder="Workspace name"
                    required
                    class="form-input-styled"
                >
            </div>
            <button type="submit" class="btn-brand" style="width: auto; white-space: nowrap;">
                Create
            </button>
        </form>
    </div>
</div>
{% endblock %}