{% extends "base.html" %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div style="display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px);">
    <div style="text-align: center; max-width: 480px; padding: 0 24px;">
        <!-- Icon -->
        <div style="
            width: 64px; height: 64px; margin: 0 auto 24px;
            background: var(--primary-soft);
            border: 1.5px solid var(--primary-muted);
            border-radius: var(--radius-xl);
            display: flex; align-items: center; justify-content: center;
        ">
            <svg width="28" height="28" fill="none" stroke="var(--primary)" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
            </svg>
        </div>

        <!-- Heading -->
        <h2 style="
            font-family: var(--font-display);
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.015em;
            margin-bottom: 8px;
        ">No workspaces yet</h2>

        <p style="
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 32px;
        ">Create a workspace to start scheduling posts, managing content, and collaborating with your team.</p>

        <!-- Create workspace form -->
        <form method="post" action="{% url 'workspaces:create' %}" style="
            background: var(--surface-0);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            text-align: left;
        ">
            {% csrf_token %}
            <label style="
                display: block;
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--text-primary);
                margin-bottom: 6px;
            ">Workspace name</label>
            <input
                type="text"
                name="name"
                placeholder="e.g. My Brand, Client Name"
                required
                class="form-input-styled"
                style="margin-bottom: 16px;"
            >
            <button type="submit" class="btn-brand">
                Create Workspace
            </button>
        </form>
    </div>
</div>
{% endblock %}