{% extends "base.html" %}
{% block title %}Zuhause | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Zuhause</p>
        <h1>Was aktuell da ist</h1>
        <p class="lead">Sichtbar, ruhig und nach Tageszeiten sortiert. Wenn etwas aufgebraucht ist, wandert es nicht weg, sondern ins Archiv.</p>
    </div>
</section>

{% if grouped %}
    <section class="stack-sections">
        {% for title, items in grouped.items() %}
            <article class="panel">
                <div class="panel-head">
                    <h2>{{ title }}</h2>
                    <span>{{ items|length }} Eintraege</span>
                </div>
                <div class="card-grid">
                    {% for item in items %}
                        <article class="item-card compact">
                            <div class="item-media">
                                {% if item.photo_filename %}
                                    <img src="{{ url_for('uploaded_file', filename=item.photo_filename) }}" alt="{{ item.name }}">
                                {% else %}
                                    <div class="placeholder-tile">{{ item.name[:1] }}</div>
                                {% endif %}
                            </div>
                            <div class="item-body">
                                <h3>{{ item.name }}</h3>
                                <p class="muted">{{ item_kind_labels[item.kind] }}{% if item.category %} · {{ item.category }}{% endif %}</p>
                                {% if item.components %}
                                    <p class="muted">Mit: {{ item.components|join(', ') }}</p>
                                {% endif %}
                            </div>
                            <div class="item-actions">
                                <form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
                                    {{ csrf_input() }}
                                    <button class="ghost-button" type="submit">Verbraucht / nicht mehr da</button>
                                </form>
                                <form method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
                                    {{ csrf_input() }}
                                    <button type="submit">Erneut einkaufen</button>
                                </form>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </article>
        {% endfor %}
    </section>
{% else %}
    <section class="panel empty-panel">
        <h2>Noch nichts unter Zuhause</h2>
        <p>Ein Einkaufseintrag wird nach dem Abhaken automatisch hier sichtbar.</p>
    </section>
{% endif %}
{% endblock %}