{% extends "client_portal/portal_base.html" %}
{% block title %}Dashboard - {{ workspace.name }}{% endblock %}

{% block content %}
<div>
    <!-- Welcome -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary); font-family: var(--font-display);">
            Welcome back
        </h1>
        <p class="text-[0.9375rem] mt-1" style="color: var(--text-secondary);">
            Here's what's happening with {{ workspace.name }}
        </p>
    </div>

    <!-- Summary cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <!-- Pending approvals -->
        <a href="{% url 'client_portal:approval_queue' %}"
           class="rounded-xl border p-5 transition-all hover:shadow-lg hover:-translate-y-0.5"
           style="background: var(--surface-0); border-color: var(--border);">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: var(--primary-soft);">
                    <svg class="w-5 h-5" style="color: var(--primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                {% if pending_count > 0 %}
                <span class="w-2.5 h-2.5 rounded-full animate-pulse" style="background: var(--primary);"></span>
                {% endif %}
            </div>
            <p class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">{{ pending_count }}</p>
            <p class="text-[0.8125rem] mt-0.5" style="color: var(--text-secondary);">Posts awaiting your review</p>
        </a>

        <!-- Recently published -->
        <a href="{% url 'client_portal:published' %}"
           class="rounded-xl border p-5 transition-all hover:shadow-lg hover:-translate-y-0.5"
           style="background: var(--surface-0); border-color: var(--border);">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style="background: var(--success-50);">
                <svg class="w-5 h-5" style="color: var(--success-700);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <p class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">{{ recent_published|length }}</p>
            <p class="text-[0.8125rem] mt-0.5" style="color: var(--text-secondary);">Recently published</p>
        </a>

        <!-- My actions -->
        <a href="{% url 'client_portal:activity' %}"
           class="rounded-xl border p-5 transition-all hover:shadow-lg hover:-translate-y-0.5"
           style="background: var(--surface-0); border-color: var(--border);">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style="background: var(--info-50);">
                <svg class="w-5 h-5" style="color: var(--info-700);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/></svg>
            </div>
            <p class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">{{ my_actions|length }}</p>
            <p class="text-[0.8125rem] mt-0.5" style="color: var(--text-secondary);">Recent actions</p>
        </a>
    </div>

    <!-- Quick action -->
    {% if pending_count > 0 %}
    <div class="rounded-xl border p-5" style="background: var(--primary-soft); border-color: var(--primary-muted);">
        <div class="flex items-center justify-between">
            <div>
                <p class="font-semibold text-[0.9375rem]" style="color: var(--brand-800);">You have {{ pending_count }} post{{ pending_count|pluralize }} waiting for review</p>
                <p class="text-[0.8125rem] mt-0.5" style="color: var(--brand-700);">Review and approve content before it's published</p>
            </div>
            <a href="{% url 'client_portal:approval_queue' %}"
               class="px-4 py-2 text-[0.8125rem] font-semibold rounded-full text-white transition-all hover:-translate-y-0.5"
               style="background: var(--primary); box-shadow: var(--shadow-primary);">
                Review Now
            </a>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}