<!DOCTYPE html>
<html lang="en" class="theme-light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks — Dealspace</title>
  <link rel="stylesheet" href="../static/themes.css">
  <style>
    /* Page-specific layout */
    .page-layout {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .main-content {
      flex: 1;
      padding: var(--space-lg);
    }
    
    .inbox-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-lg);
    }
    
    .inbox-title {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--color-text-primary);
      margin: 0;
    }
    
    .view-select {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--color-text-primary);
      background: var(--color-input-bg);
      border: 1px solid var(--color-input-border);
      border-radius: var(--radius-md);
    }
    
    .task-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
    
    /* Global nav area */
    .global-nav {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      margin-left: auto;
    }
    
    .inbox-link {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-header-text);
      background: var(--color-accent);
      border-radius: var(--radius-md);
      text-decoration: none;
    }
    
    .user-menu {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    
    .avatar {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--color-bg-tertiary);
    }
    
    .user-name {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-header-text);
    }
    
    /* Theme switcher (demo only) */
    .theme-switcher {
      position: fixed;
      bottom: var(--space-lg);
      right: var(--space-lg);
      display: flex;
      gap: var(--space-sm);
      padding: var(--space-sm);
      background: var(--color-card-bg);
      border: 1px solid var(--color-card-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }
    
    .theme-switcher button {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-md);
      background: var(--color-bg-secondary);
      color: var(--color-text-primary);
      cursor: pointer;
    }
    
    .theme-switcher button:hover {
      background: var(--color-bg-tertiary);
    }
  </style>
</head>
<body>
  <div class="page-layout">
    <!-- Global Header -->
    <header class="global-header">
      <div class="logo">Dealspace</div>
      
      <!-- Project selector (hidden for single-project workers) -->
      <select class="project-select" aria-label="Select project">
        <option selected>Project Alpha — TargetCo Acquisition</option>
        <option>Project Beta — MergeCo Deal</option>
        <option>Project Gamma — TechStartup Buyout</option>
      </select>
      
      <nav class="global-nav">
        <a href="/inbox" class="inbox-link" aria-current="page">
          Inbox
          <span class="badge">3</span>
        </a>
        <div class="user-menu">
          <div class="avatar" role="img" aria-label="User avatar"></div>
          <span class="user-name">S. Johnson</span>
        </div>
      </nav>
    </header>
    
    <!-- Main Content -->
    <main class="main-content container">
      <div class="inbox-header">
        <h1 class="inbox-title">My Tasks</h1>
        <select class="view-select" aria-label="Filter tasks">
          <option selected>All Tasks</option>
          <option>Overdue</option>
          <option>Due Today</option>
          <option>Waiting</option>
        </select>
      </div>
      
      <div class="task-list" role="list">
        <!-- Task 1: High priority, overdue -->
        <a href="/p/alpha/r/fin-042" class="task-card" role="listitem">
          <div class="task-card-header">
            <span class="task-card-priority high" aria-label="High priority"></span>
            <span class="task-card-ref">FIN-042</span>
            <span class="task-card-title">Audited financials FY2024</span>
            <span class="task-card-due overdue">
              <span aria-hidden="true">⚠️</span> Overdue: Mar 15
            </span>
          </div>
          <div class="task-card-meta">
            Project Alpha • Finance • From: J. Smith (IB)
          </div>
          <div class="task-card-preview">
            "Please provide audited financial statements including P&L, balance sheet, and cash flow..."
          </div>
        </a>
        
        <!-- Task 2: Normal priority, due today -->
        <a href="/p/alpha/r/leg-018" class="task-card" role="listitem">
          <div class="task-card-header">
            <span class="task-card-priority normal" aria-label="Normal priority"></span>
            <span class="task-card-ref">LEG-018</span>
            <span class="task-card-title">Board meeting minutes 2025</span>
            <span class="task-card-due today">Due: Today</span>
          </div>
          <div class="task-card-meta">
            Project Alpha • Legal • From: M. Chen (CFO)
          </div>
          <div class="task-card-preview">
            "Board approval documentation needed for the acquisition committee review..."
          </div>
        </a>
        
        <!-- Task 3: Low priority, future -->
        <a href="/p/beta/r/it-007" class="task-card" role="listitem">
          <div class="task-card-header">
            <span class="task-card-priority low" aria-label="Low priority"></span>
            <span class="task-card-ref">IT-007</span>
            <span class="task-card-title">Network architecture diagram</span>
            <span class="task-card-due">Due: Mar 22</span>
          </div>
          <div class="task-card-meta">
            Project Beta • IT • From: L. Park (IB)
          </div>
          <div class="task-card-preview">
            "Provide a current network topology diagram showing all production systems..."
          </div>
        </a>
        
        <!-- Task 4: Normal priority, future -->
        <a href="/p/alpha/r/hr-003" class="task-card" role="listitem">
          <div class="task-card-header">
            <span class="task-card-priority normal" aria-label="Normal priority"></span>
            <span class="task-card-ref">HR-003</span>
            <span class="task-card-title">Employee headcount by department</span>
            <span class="task-card-due">Due: Mar 25</span>
          </div>
          <div class="task-card-meta">
            Project Alpha • HR • From: A. Williams (IB)
          </div>
          <div class="task-card-preview">
            "Breakdown of full-time and contract employees by department, including salary bands..."
          </div>
        </a>
        
        <!-- Task 5: High priority, future -->
        <a href="/p/alpha/r/fin-045" class="task-card" role="listitem">
          <div class="task-card-header">
            <span class="task-card-priority high" aria-label="High priority"></span>
            <span class="task-card-ref">FIN-045</span>
            <span class="task-card-title">Revenue recognition policy</span>
            <span class="task-card-due">Due: Mar 18</span>
          </div>
          <div class="task-card-meta">
            Project Alpha • Finance • From: J. Smith (IB)
          </div>
          <div class="task-card-preview">
            "Document your revenue recognition policy and any changes in the past 3 years..."
          </div>
        </a>
      </div>
    </main>
  </div>
  
  <!-- Theme Switcher (demo/testing only) -->
  <div class="theme-switcher" aria-label="Theme switcher">
    <button onclick="document.documentElement.className='theme-light'">Light</button>
    <button onclick="document.documentElement.className='theme-dark'">Dark</button>
    <button onclick="document.documentElement.className='theme-contrast'">Contrast</button>
  </div>
  
  <!-- Empty State (hidden - shown when no tasks) -->
  <!--
  <div class="empty-state">
    <div class="empty-state-icon">✓</div>
    <h2 class="empty-state-title">You're all caught up</h2>
    <p class="empty-state-text">No tasks need your attention right now.</p>
  </div>
  -->
</body>
</html>
