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

{% block content %}
<div>
    <div class="mb-6">
        <h1 class="text-xl font-bold tracking-tight" style="color: var(--text-primary);">Reports</h1>
        <p class="text-sm mt-0.5" style="color: var(--text-secondary);">Performance reports shared with you</p>
    </div>

    <div class="text-center py-16">
        <div class="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-4" style="background: var(--primary-soft);">
            <svg class="w-8 h-8" style="color: var(--primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
        </div>
        <p class="font-semibold text-[0.9375rem]" style="color: var(--text-primary);">Reports coming soon</p>
        <p class="text-sm mt-1 max-w-sm mx-auto" style="color: var(--text-tertiary);">Your team will be able to share performance reports with you here. Check back soon!</p>
    </div>
</div>
{% endblock %}