{% extends "base.html" %}
{% from "partials/macros.html" import task_card, nav_icon %}
{% block title %}Meine Aufgaben · Putzliga{% endblock %}
{% block page_title %}Meine Aufgaben{% endblock %}
{% block content %}
  <section class="hero-grid">
    <article class="hero-card">
      <p class="eyebrow">Heute im Fokus</p>
      <h2>{{ current_user.name }}, deine Liga für den Haushalt läuft.</h2>
      <p>Erledige offene Aufgaben, sammle Punkte und halte deinen Monatslauf stabil.</p>
      <div class="progress-card">
        <div class="progress-card__top">
          <span>Erledigungsquote</span>
          <strong>{{ completion_ratio }}%</strong>
        </div>
        <div class="progress"><span style="width: {{ completion_ratio }}%"></span></div>
      </div>
    </article>
    <article class="panel highlight-panel">
      <p class="eyebrow">Schnellzugriff</p>
      <a class="button button--wide" href="{{ url_for('tasks.create') }}">
        {{ nav_icon('plus') }}
        <span>Neue Aufgabe anlegen</span>
      </a>
      <a class="button button--secondary button--wide" href="{{ url_for('scoreboard.index') }}">
        {{ nav_icon('trophy') }}
        <span>Zum aktuellen Highscore</span>
      </a>
    </article>
  </section>

  <section class="stack">
    <div class="section-heading">
      <h2>Überfällig</h2>
      <span class="section-heading__count">{{ sections.overdue|length }}</span>
    </div>
    <div class="task-grid">
      {% for task in sections.overdue %}
        {{ task_card(task, current_user) }}
      {% else %}
        <div class="empty-state">Nichts überfällig. Genau so darf es bleiben.</div>
      {% endfor %}
    </div>
  </section>

  <section class="stack">
    <div class="section-heading">
      <h2>Bald fällig</h2>
      <span class="section-heading__count">{{ sections.soon|length }}</span>
    </div>
    <div class="task-grid">
      {% for task in sections.soon %}
        {{ task_card(task, current_user) }}
      {% else %}
        <div class="empty-state">Gerade nichts, was in den nächsten Tagen drängt.</div>
      {% endfor %}
    </div>
  </section>

  <section class="stack">
    <div class="section-heading">
      <h2>Offen</h2>
      <span class="section-heading__count">{{ sections.open|length }}</span>
    </div>
    <div class="task-grid">
      {% for task in sections.open %}
        {{ task_card(task, current_user) }}
      {% else %}
        <div class="empty-state">Alles leer. Zeit für eine kleine Siegerrunde.</div>
      {% endfor %}
    </div>
  </section>

  <section class="stack">
    <div class="section-heading">
      <h2>Erledigt</h2>
      <span class="section-heading__count">{{ sections.completed|length }}</span>
    </div>
    <div class="task-grid">
      {% for task in sections.completed %}
        {{ task_card(task, current_user, compact=true) }}
      {% else %}
        <div class="empty-state">Noch keine erledigten Aufgaben in deiner Liste.</div>
      {% endfor %}
    </div>
  </section>
{% endblock %}