putzliga/app/templates/tasks/calendar.html

{% extends "base.html" %}
{% from "partials/macros.html" import status_badge %}
{% block title %}Kalender · Putzliga{% endblock %}
{% block page_title %}Kalender & Liste{% endblock %}
{% block content %}
  <section class="panel calendar-toolbar-mobile">
    <div class="calendar-toolbar-mobile__header">
      <div>
        <p class="eyebrow">Monatsansicht</p>
        <h2>{{ current_label }}</h2>
      </div>
      <div class="calendar-toolbar-mobile__arrows">
        <a
          class="icon-button calendar-nav-button"
          href="{{ url_for('tasks.calendar_view', year=current_year if current_month > 1 else current_year - 1, month=current_month - 1 if current_month > 1 else 12, view=view) }}"
          aria-label="Vorheriger Monat"
        >
          <span aria-hidden="true">‹</span>
        </a>
        <a
          class="icon-button calendar-nav-button"
          href="{{ url_for('tasks.calendar_view', year=current_year if current_month < 12 else current_year + 1, month=current_month + 1 if current_month < 12 else 1, view=view) }}"
          aria-label="Nächster Monat"
        >
          <span aria-hidden="true">›</span>
        </a>
      </div>
    </div>
    <div class="segmented calendar-toolbar-mobile__switch">
      <a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='calendar') }}" class="{% if view == 'calendar' %}is-active{% endif %}">Kalender</a>
      <a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='list') }}" class="{% if view == 'list' %}is-active{% endif %}">Liste</a>
    </div>
  </section>

  <section class="panel panel--toolbar calendar-toolbar-desktop">
    <div>
      <p class="eyebrow">Monatsansicht</p>
      <h2>{{ current_label }}</h2>
    </div>
    <div class="toolbar-actions">
      <a class="button button--secondary" href="{{ url_for('tasks.calendar_view', year=current_year if current_month > 1 else current_year - 1, month=current_month - 1 if current_month > 1 else 12, view=view) }}">Zurück</a>
      <a class="button button--secondary" href="{{ url_for('tasks.calendar_view', year=current_year if current_month < 12 else current_year + 1, month=current_month + 1 if current_month < 12 else 1, view=view) }}">Weiter</a>
      <div class="segmented">
        <a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='calendar') }}" class="{% if view == 'calendar' %}is-active{% endif %}">Kalender</a>
        <a href="{{ url_for('tasks.calendar_view', year=current_year, month=current_month, view='list') }}" class="{% if view == 'list' %}is-active{% endif %}">Liste</a>
      </div>
    </div>
  </section>

  {% if view == 'calendar' %}
    {% if mobile_day_groups %}
      <section class="panel calendar-mobile-strip">
        <div class="calendar-mobile-strip__scroller">
          {% for group in mobile_day_groups %}
            <a href="#day-{{ group.day }}" class="calendar-mobile-pill {% if loop.first %}is-active{% endif %}">
              <strong>{{ group.day }}.</strong>
              <small>{{ group.tasks|length }} Aufgabe{% if group.tasks|length != 1 %}n{% endif %}</small>
            </a>
          {% endfor %}
        </div>
      </section>
    {% endif %}

    <section class="calendar-mobile-list">
      {% for group in mobile_day_groups %}
        <article class="panel calendar-mobile-day" id="day-{{ group.day }}">
          <div class="calendar-mobile-day__header">
            <strong>{{ group.day }}. {{ current_month|month_name }}</strong>
            <span>{{ group.tasks|length }} Aufgabe{% if group.tasks|length != 1 %}n{% endif %}</span>
          </div>
          <div class="calendar-mobile-day__tasks">
            {% for task in group.tasks %}
              <a href="{{ url_for('tasks.edit', task_id=task.id) }}" class="calendar-task calendar-task--{{ task.status }}">
                <strong class="calendar-task__title">{{ task.title }}</strong>
                <small class="calendar-task__person">
                  {% if task.completed_by_user %}
                    {{ task.completed_by_user.name }}
                  {% elif task.assigned_user %}
                    {{ task.assigned_user.name }}
                  {% else %}
                    Ohne Zuweisung
                  {% endif %}
                </small>
              </a>
            {% endfor %}
          </div>
        </article>
      {% else %}
        <div class="empty-state">In diesem Monat sind noch keine Aufgaben hinterlegt.</div>
      {% endfor %}
    </section>

    <section class="calendar-grid">
      <div class="calendar-grid__weekdays">
        {% for label in ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
          <span>{{ label }}</span>
        {% endfor %}
      </div>
      {% for week in month_calendar %}
        {% for day in week %}
          <article class="calendar-day {% if day == 0 %}calendar-day--empty{% endif %}">
            {% if day != 0 %}
              <strong>{{ day }}</strong>
              <div class="calendar-day__tasks">
                {% for task in tasks_by_day.get(day, []) %}
                  <a href="{{ url_for('tasks.edit', task_id=task.id) }}" class="calendar-task calendar-task--{{ task.status }}">
                    <strong class="calendar-task__title">{{ task.title }}</strong>
                    <small class="calendar-task__person">
                      {% if task.completed_by_user %}
                        {{ task.completed_by_user.name }}
                      {% elif task.assigned_user %}
                        {{ task.assigned_user.name }}
                      {% else %}
                        Ohne Zuweisung
                      {% endif %}
                    </small>
                  </a>
                {% endfor %}
              </div>
            {% endif %}
          </article>
        {% endfor %}
      {% endfor %}
    </section>
  {% else %}
    <section class="stack">
      {% for task in tasks %}
        <article class="panel list-row">
          <div>
            <strong>{{ task.title }}</strong>
            <p class="muted">{{ task.description or 'Ohne Zusatzbeschreibung' }}</p>
          </div>
          <div class="list-row__meta">
            {{ status_badge(task) }}
            <span>{{ task.due_date|date_de }}</span>
            <a href="{{ url_for('tasks.edit', task_id=task.id) }}" class="text-link">Bearbeiten</a>
          </div>
        </article>
      {% else %}
        <div class="empty-state">In diesem Monat sind noch keine Aufgaben hinterlegt.</div>
      {% endfor %}
    </section>
  {% endif %}
{% endblock %}