<!--
  PocketPaw Dashboard - Crew View (Control Room)

  Created: 2026-02-05
  Updated: 2026-02-05 - Componentized into sub-templates using Jinja2 includes

  Linear-inspired project management dashboard for multi-agent orchestration.
  Provides real-time visibility into what agents are doing.

  Sub-components:
  - missions/stats-bar.html: Stats + running task banner
  - missions/task-list.html: Task filters + compact table
  - missions/agents-sidebar.html: Agents list + activity feed
  - missions/sheets/task-detail.html: Full-height task detail slide panel
  - missions/sheets/agent-activity.html: Agent activity stream panel
  - missions/modals/create-task.html: New task modal
  - missions/modals/create-agent.html: New agent modal
-->

<!-- Missions View -->
<div class="flex-1 flex flex-col pt-20 overflow-hidden" x-show="view === 'missions'" x-cloak>

    <!-- Loading State -->
    <div x-show="missionControl.loading" class="flex-1 flex items-center justify-center">
        <div class="flex flex-col items-center gap-4 text-white/50">
            <div class="w-8 h-8 border-2 border-accent/30 border-t-accent rounded-full animate-spin"></div>
            <span class="text-sm">Loading Crew...</span>
        </div>
    </div>

    <!-- Main Content -->
    <div x-show="!missionControl.loading" class="flex-1 flex flex-col overflow-hidden">

        {% include "components/missions/stats-bar.html" %}

        <!-- Two Column Layout -->
        <div class="flex-1 flex overflow-hidden">
            {% include "components/missions/task-list.html" %}
            {% include "components/missions/agents-sidebar.html" %}
        </div>
    </div>

    <!-- Sheets (Slide-out Panels) -->
    {% include "components/missions/sheets/task-detail.html" %}
    {% include "components/missions/sheets/agent-activity.html" %}

    <!-- Modals -->
    {% include "components/missions/modals/create-task.html" %}
    {% include "components/missions/modals/create-agent.html" %}
</div>

<style>
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    .animate-shimmer {
        animation: shimmer 2s ease-in-out infinite;
    }
</style>
