{% extends "base.html" %}

{% block title %}Project Dashboard - Terra-View{% endblock %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Project Dashboard</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Sound monitoring project overview and assignments</p>
    </div>
    <a href="/projects" class="text-sm text-seismo-orange hover:text-seismo-navy">Back to projects</a>
</div>

<div id="project-dashboard"
     hx-get="/api/projects/{{ project_id }}/dashboard"
     hx-trigger="load, every 30s"
     hx-swap="innerHTML">
    <div class="animate-pulse space-y-4">
        <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
            <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
            <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
        </div>
    </div>
</div>
{% endblock %}