{% extends "base.html" %}
{% from "projects/_macros.html" import task_row %}
{% block title %}Projekte & Aufgaben · Projekt-Hub{% endblock %}
{% block content %}

  <div class="page-head">
    <h1>Projekte <span>&amp;</span> Aufgaben</h1>
    <div class="today">{{ today_label }}</div>
  </div>

  {# ── Statistik-Leiste ── #}
  <div class="stats">
    <div class="stat"><strong>{{ stats.open }}</strong>Offen</div>
    <div class="stat"><strong>{{ stats.done }}</strong>Erledigt</div>
    <div class="stat"><strong style="color:var(--overdue)">{{ stats.overdue }}</strong>Überfällig</div>
    <div class="stat"><strong>{{ stats.projects }}</strong>Projekte</div>
  </div>

  {# ── Druckbare PDF-Liste ── #}
  <div class="sync-bar">
    <span class="sync-label">Drucken</span>
    <a class="btn-sync export" href="{{ url_for('projects.export_pdf') }}" target="_blank"
       rel="noopener">PDF / Druckliste</a>
    <span class="sync-hint">Projektbasierte To-Do-Liste als PDF zum Ausdrucken</span>
  </div>

  {# ── Aufgabe hinzufügen ── #}
  <form class="add-form" method="post" action="{{ url_for('projects.create_task') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="row">
      <input type="text" name="text" placeholder="Neue Aufgabe …" autocomplete="off"
             autofocus required>
    </div>
    <div class="row">
      <select name="project_id">
        <option value="">— kein Projekt —</option>
        {% for p in projects %}
          <option value="{{ p.id }}">{{ p.name }}</option>
        {% endfor %}
      </select>
      <input type="date" name="due_date">
      <button class="btn-add" type="submit">+ Hinzufügen</button>
    </div>
  </form>

  {# ── Projekt anlegen ── #}
  <form class="project-mgmt" method="post" action="{{ url_for('projects.create_project') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <span style="font-size:.78rem;color:var(--muted)">Projekt:</span>
    <input type="text" name="name" placeholder="Name …" autocomplete="off" required>
    <button class="btn-small" type="submit">+ Projekt anlegen</button>
  </form>

  {# ── Ansicht: Nach Projekt ── #}
  <div class="section">
    <div class="section-header clickable js-collapse" data-target="projects-body">
      <span class="section-title">Nach Projekt</span>
      <span class="section-count">{{ proj_open_total }} offen</span>
      <button class="collapse-btn" type="button">▲</button>
    </div>

    <div id="projects-body">
      {% for view in project_views %}
        {% set p = view.project %}
        <div class="project-card">
          <div class="project-card-header js-collapse" data-target="proj-body-{{ p.id }}">
            <span class="project-dot" style="background:{{ p.color }}"></span>
            <span class="project-name">{{ p.name }}</span>
            <span class="project-meta">{{ view.open }} offen · {{ view.total }} gesamt</span>
            <form method="post" action="{{ url_for('projects.delete_project', project_id=p.id) }}"
                  data-confirm="Projekt löschen? Aufgaben bleiben erhalten."
                  onclick="event.stopPropagation()">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button class="project-delete" type="submit" title="Projekt löschen">✕</button>
            </form>
          </div>
          <div class="task-list" id="proj-body-{{ p.id }}">
            {% for t in view.tasks %}
              {{ task_row(t, false, projects_by_id) }}
            {% else %}
              <div class="empty-hint">Keine Aufgaben — oben hinzufügen.</div>
            {% endfor %}
          </div>
        </div>
      {% else %}
        <div class="empty-hint">Noch keine Projekte — oben anlegen.</div>
      {% endfor %}
    </div>
  </div>

  <hr class="divider">

  {# ── Ansicht: Alle Aufgaben (gefiltert) ── #}
  <div class="section">
    <div class="section-header">
      <span class="section-title">Alle Aufgaben</span>
      <span class="section-count">{{ all_tasks|length }}</span>
    </div>

    <div class="filter-bar">
      <span class="filter-label">Zeigen:</span>
      {% set filters = [('all', 'Alle'), ('open', 'Offen'), ('overdue', 'Überfällig'),
                        ('soon', 'Diese Woche'), ('done', 'Erledigt')] %}
      {% for key, label in filters %}
        <a class="filter-btn {{ 'active' if active_filter == key }}"
           href="{{ url_for('projects.index', filter=key) }}#alle">{{ label }}</a>
      {% endfor %}
    </div>

    <div class="project-card" id="alle">
      <div class="task-list all-tasks-list">
        {% for t in all_tasks %}
          {{ task_row(t, true, projects_by_id) }}
        {% else %}
          <div class="empty-hint">Keine Aufgaben in dieser Ansicht.</div>
        {% endfor %}
      </div>
    </div>
  </div>

{% endblock %}