{% extends "base.html" %}
{% block title %}Wochenansicht | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Wochenansicht</p>
        <h1>Ein ruhiger Blick auf die nächsten sieben Tage</h1>
        <p class="lead">Du kannst bestehende Einträge zwischen Tagen und Tageszeiten verschieben, Vorlagen anwenden und gleichzeitig sehen, was erst später für den Einkauf relevant wird.</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="two-column">
    <article class="panel">
        <div class="panel-head">
            <h2>Wochenvorlagen</h2>
            <a href="{{ url_for('main.week_template_create', source_week=week_start.isoformat()) }}">Als Vorlage speichern</a>
        </div>
        {% if week_templates %}
            <div class="stack-sections">
                {% for template in week_templates %}
                    <form method="post" action="{{ url_for('main.week_template_apply', template_id=template.id) }}" class="inline-form template-apply-form">
                        {{ csrf_input() }}
                        <input type="hidden" name="target_week" value="{{ week_start.isoformat() }}">
                        <div class="template-card">
                            <strong>{{ template.name }}</strong>
                            <small>{{ template.visibility_label }} · {{ template.owner_label }}</small>
                        </div>
                        <button type="submit">Vorlage anwenden</button>
                    </form>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Wenn eine Woche sich bewährt hat, kannst du sie hier später als Wochenvorlage wiederverwenden.</p>
        {% endif %}
    </article>

    {% if week_hints %}
        <article class="panel">
            <div class="panel-head">
                <h2>Für diese Woche</h2>
            </div>
            <div class="hint-list">
                {% for hint in week_hints %}
                    <p class="hint-chip">{{ hint }}</p>
                {% endfor %}
            </div>
        </article>
    {% endif %}
</section>

{% if upcoming_entries %}
    <section class="panel">
        <div class="panel-head">
            <h2>Kommt später zum Einkauf dazu</h2>
            <small>{{ household_settings.shopping_prep_days }} Tag{% if household_settings.shopping_prep_days != 1 %}e{% endif %} Vorlauf</small>
        </div>
        <div class="chip-row">
            {% for entry in upcoming_entries %}
                <span class="chip">{{ entry.item_name }} · ab {{ entry.activation_label }}</span>
            {% endfor %}
        </div>
    </section>
{% endif %}

<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' if entry.can_edit else 'false' }}" data-entry-id="{{ entry.id }}" data-move-url="{{ url_for('main.planner_move', entry_id=entry.id) }}">
                                        <strong>{{ entry.item_name }}</strong>
                                        <small>{{ entry.visibility_label }} · {{ entry.for_label }}</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 %}