{% extends "base.html" %}
{% block title %}{{ item_kind_labels[kind] }} | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">{{ item_kind_labels[kind] }}</p>
        <h1>{{ item_kind_labels[kind] }}</h1>
        <p class="lead">Schnell gepflegte Eintraege mit Foto, Tageszeiten und einem ruhigen Status zwischen Idee, Zuhause und Archiv.</p>
    </div>
    <a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neu anlegen</a>
</section>

{% if items %}
    <section class="card-grid">
        {% for item in items %}
            <article class="item-card">
                <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">
                    <div class="item-topline">
                        <h2>{{ item.name }}</h2>
                        <span class="status-pill status-{{ item.availability_state }}">{{ availability_labels[item.availability_state] }}</span>
                    </div>
                    <p class="muted">
                        {% if item.category %}{{ item.category }}{% else %}ohne Kategorie{% endif %}
                        ·
                        {{ item_kind_labels[item.kind] }}
                    </p>
                    {% if item.dayparts %}
                        <div class="chip-row">
                            {% for daypart in item.dayparts %}
                                <span class="chip">{{ daypart }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                    {% if item.components %}
                        <p class="muted">Mit: {{ item.components|join(', ') }}</p>
                    {% endif %}
                    {% if item.note %}
                        <p>{{ item.note }}</p>
                    {% endif %}
                </div>
                <div class="item-actions">
                    <a class="ghost-button" href="{{ url_for('main.item_edit', item_id=item.id) }}">Bearbeiten</a>
                    <form method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
                        {{ csrf_input() }}
                        <button type="submit">Auf Einkaufsliste</button>
                    </form>
                    {% if item.availability_state != 'home' %}
                        <form method="post" action="{{ url_for('main.item_set_home', item_id=item.id) }}">
                            {{ csrf_input() }}
                            <button class="secondary" type="submit">Als Zuhause markieren</button>
                        </form>
                    {% endif %}
                    {% if item.availability_state != 'archived' %}
                        <form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
                            {{ csrf_input() }}
                            <button class="ghost-button" type="submit">Ins Archiv</button>
                        </form>
                    {% endif %}
                </div>
            </article>
        {% endfor %}
    </section>
{% else %}
    <section class="panel empty-panel">
        <h2>Noch keine Eintraege</h2>
        <p>Der schnellste Start ist ein erstes vertrautes Lebensmittel oder eine einfache Mahlzeitenidee.</p>
        <a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Ersten Eintrag anlegen</a>
    </section>
{% endif %}
{% endblock %}