{% extends "base.html" %}
{% block title %}Dashboard — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Dashboard</h1>
    <p class="subtitle">Manage your local computer vision datasets</p>
  </div>
  <div style="display:flex;gap:.5rem;flex-wrap:wrap">
    {% if projects %}
    <button type="button" class="btn btn-ghost" id="toggle-select-projects">Select</button>
    {% endif %}
    <a href="/projects/new#import" class="btn btn-ghost">Import</a>
    <a href="/projects/new" class="btn btn-primary">+ New Project</a>
  </div>
</div>

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-value">{{ stats.project_count }}</div>
    <div class="stat-label">Projects</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ stats.total_images }}</div>
    <div class="stat-label">Images</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ stats.annotated_images }}</div>
    <div class="stat-label">Annotated</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{{ stats.total_annotations }}</div>
    <div class="stat-label">Labels</div>
  </div>
</div>

<section class="section">
  <div class="section-toolbar">
    <h2 style="margin:0">Your Projects</h2>
  </div>

  {% if projects %}
  <div class="project-grid" id="project-grid">
    {% for p in projects %}
    <div class="project-card selectable" data-id="{{ p.id }}">
      <button type="button" class="oo-check project-check-btn" data-id="{{ p.id }}" aria-label="Select {{ p.name }}" aria-pressed="false"></button>
      <a href="/projects/{{ p.id }}" class="project-card-link">
        <div class="project-type">{{ p.project_type.value | replace('_', ' ') | title }}</div>
        <h3>{{ p.name }}</h3>
        <p>{{ p.description or 'No description' }}</p>
        <div class="project-meta">
          <span>{{ p.image_count }} images</span>
          <span>{{ p.annotated_count }} annotated</span>
          <span>{{ p.class_count }} classes</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: {{ (p.annotated_count / p.image_count * 100) if p.image_count else 0 }}%"></div>
        </div>
      </a>
      <div class="card-actions">
        <a href="/projects/{{ p.id }}" class="btn btn-secondary btn-sm">Open</a>
        <button type="button" class="btn btn-ghost btn-sm delete-one-project" data-id="{{ p.id }}" data-name="{{ p.name }}">Delete</button>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📂</div>
    <h3>No projects yet</h3>
    <p>Create a new project or import a folder/zip dataset.</p>
    <div style="display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap">
      <a href="/projects/new" class="btn btn-primary">Create Project</a>
      <a href="/projects/new#import" class="btn btn-ghost">Import Project</a>
    </div>
  </div>
  {% endif %}
</section>

<div class="bulk-bar" id="project-bulk-bar" hidden>
  <div class="bulk-bar-inner">
    <div class="bulk-bar-left">
      <span class="bulk-count" id="project-selected-count">0 selected</span>
      <button type="button" class="btn btn-ghost btn-sm" id="select-all-projects">Select all</button>
      <button type="button" class="btn btn-ghost btn-sm" id="clear-project-selection">Clear</button>
    </div>
    <div class="bulk-bar-right">
      <button type="button" class="btn btn-danger btn-sm" id="delete-selected-projects">Delete</button>
      <button type="button" class="btn btn-secondary btn-sm" id="done-select-projects">Done</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}