{% extends "base.html" %}
{% block title %}Wochenansicht | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Wochenansicht</p>
        <h1>Ein sanfter Blick auf die nächsten sieben Tage</h1>
        <p class="lead">Du kannst bestehende Einträge zwischen Tagen und Tageszeiten verschieben. Wenn etwas noch nicht zuhause ist, landet es dabei automatisch auf der Einkaufsliste.</p>
    </div>
    <div class="week-nav">
        <a class="ghost-button" href="{{ url_for('main.planner', week=prev_week.isoformat()) }}">Vorige Woche</a>
        <span>{{ week_start.strftime('%d.%m.%Y') }} bis {{ week_end.strftime('%d.%m.%Y') }}</span>
        <a class="ghost-button" href="{{ url_for('main.planner', week=next_week.isoformat()) }}">Nächste Woche</a>
    </div>
</section>

<section class="week-overview-grid week-board" data-csrf-token="{{ csrf_token_value }}">
    {% for card in week_cards %}
        <article class="week-card">
            <div class="week-card-head">
                <div>
                    <p class="eyebrow">{{ weekday_name(card.date) }}</p>
                    <h2>{{ card.date.strftime('%d.%m.%Y') }}</h2>
                </div>
                {% if card.date == today %}
                    <span class="status-pill status-home">heute</span>
                {% endif %}
            </div>

            {% if card.filled_dayparts %}
                <p class="week-card-count">{{ card.planned_count }} Einträge</p>
                <div class="chip-row">
                    {% for slot in card.filled_dayparts %}
                        <span class="chip">{{ slot.name }} · {{ slot.count }}</span>
                    {% endfor %}
                </div>
                <p class="muted">{{ card.preview_items | join(', ') }}</p>
            {% else %}
                <p class="empty-state">Noch offen. Du kannst den Tag ganz leicht nach und nach füllen.</p>
            {% endif %}

            <div class="week-slot-stack">
                {% for slot in card.slots %}
                    <div class="week-slot drop-slot" data-target-date="{{ card.date.isoformat() }}" data-target-daypart-id="{{ slot.daypart.id }}">
                        <div class="week-slot-head">
                            <strong>{{ slot.daypart.name }}</strong>
                            <span>{{ slot.entries|length }}</span>
                        </div>
                        {% if slot.entries %}
                            <div class="week-entry-stack">
                                {% for entry in slot.entries %}
                                    <article class="plan-chip draggable-plan-entry" draggable="true" data-entry-id="{{ entry.id }}" data-move-url="{{ url_for('main.planner_move', entry_id=entry.id) }}">
                                        <strong>{{ entry.item_name }}</strong>
                                        <small>{{ item_kind_labels[entry.item_kind] }}</small>
                                    </article>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="week-slot-empty">Hierher ziehen</p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            <div class="week-card-actions">
                <a class="button" href="{{ url_for('main.planner_day', date=card.date.isoformat()) }}">Tagesplan öffnen</a>
            </div>
        </article>
    {% endfor %}
</section>
{% endblock %}