{% 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>
        {% if kind == 'food' %}
            <p class="lead">Hier stehen alle aktiven Lebensmittel, egal ob sie gerade zuhause sind oder im Moment fehlen. Archiviertes bleibt bewusst außen vor.</p>
        {% else %}
            <p class="lead">Gemeinsame und persönliche Ideen bleiben hier ruhig sortiert, mit einem klaren Blick darauf, für wen etwas gedacht ist.</p>
        {% endif %}
    </div>
    <div class="hero-actions">
        {% if kind == 'food' %}
            <a class="ghost-button" href="{{ url_for('main.item_quick_add') }}">Schnell anlegen</a>
        {% endif %}
        <a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neu anlegen</a>
    </div>
</section>

<section class="panel compact-form-panel">
    <form method="get" class="filter-form">
        <label class="wide">
            Suche
            <input type="text" name="q" value="{{ query }}" placeholder="Nach Namen suchen">
        </label>
        <label>
            Status
            <select name="state">
                {% for value, label in state_options %}
                    <option value="{{ value }}" {% if selected_state == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </label>
        <label>
            Sichtbarkeit
            <select name="visibility">
                {% for value, label in visibility_options %}
                    <option value="{{ value }}" {% if selected_visibility == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </label>
        <label>
            Tageszeit
            <select name="daypart_id">
                <option value="">Alle Tageszeiten</option>
                {% for daypart in dayparts %}
                    <option value="{{ daypart.id }}" {% if selected_daypart_id == daypart.id %}selected{% endif %}>{{ daypart.name }}</option>
                {% endfor %}
            </select>
        </label>
        <div class="filter-actions">
            <button type="submit">Filtern</button>
            <a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurücksetzen</a>
        </div>
    </form>
</section>

{% if items %}
    <section class="card-grid">
        {% for item in items %}
            {% if item.kind == 'food' %}
                {% set item_icon_class = {
                    'protein': 'icon-component-protein',
                    'carb': 'icon-component-carb',
                    'veg': 'icon-component-veg',
                    'fruit': 'icon-component-fruit',
                    'dairy': 'icon-component-dairy',
                    'nuts': 'icon-component-nuts',
                    'seeds': 'icon-component-seeds',
                    'neutral': 'icon-component-neutral',
                }.get(item.primary_builder_key or item.base_type, 'icon-component-neutral') %}
                <article class="item-card item-card-food{% if not item.is_home %} item-card-food-muted{% endif %}">
                    {% if item.can_edit %}
                        <a class="item-card-cover-link" href="{{ url_for('main.item_edit', item_id=item.id) }}">
                            <span class="sr-only">{{ item.name }} bearbeiten</span>
                        </a>
                        <form
                            class="item-card-archive-form"
                            method="post"
                            action="{{ url_for('main.item_archive', item_id=item.id) }}"
                            onsubmit="return confirm('Willst du dieses Lebensmittel wirklich archivieren?');"
                        >
                            {{ csrf_input() }}
                            <button class="item-card-archive-button" type="submit" aria-label="{{ item.name }} archivieren">×</button>
                        </form>
                    {% endif %}

                    <div class="item-media item-media-food">
                        {% if item.photo_filename %}
                            <img
                                src="{{ image_url(item.photo_filename, 'md') }}"
                                srcset="{{ image_srcset(item.photo_filename) }}"
                                sizes="{{ image_sizes('grid') }}"
                                alt="{{ item.name }}"
                                loading="lazy">
                        {% else %}
                            <div class="placeholder-icon-tile">
                                <span class="ui-icon {{ item_icon_class }}"></span>
                            </div>
                        {% endif %}
                    </div>

                    <div class="item-body item-body-food">
                        <h2>{{ item.name }}</h2>
                    </div>

                    <div class="item-card-hover-meta" aria-hidden="true">
                        <div class="chip-row">
                            <span class="chip">{{ item.for_label }}</span>
                            <span class="chip">{{ item.visibility_label }}</span>
                            <span class="chip status-soft">{{ item.owner_label }}</span>
                            <span class="chip">{{ item.base_type_label }}</span>
                            <span class="chip">{{ item.suggestion_role_label }}</span>
                            <span class="chip">{{ item.suggestion_priority_label }}</span>
                            {% if item.can_be_meal_core %}
                                <span class="chip status-okay">Trägt gut eine Mahlzeit</span>
                            {% endif %}
                            {% if item.is_on_shopping_list %}
                                <span class="chip status-idea">Auf Einkaufsliste</span>
                            {% endif %}
                            {% if item.dayparts %}
                                {% for daypart in item.dayparts %}
                                    <span class="chip">{{ daypart }}</span>
                                {% endfor %}
                            {% endif %}
                        </div>
                        {% if item.note %}
                            <p>{{ item.note }}</p>
                        {% endif %}
                    </div>
                </article>
            {% else %}
                <article class="item-card">
                    <div class="item-media">
                        {% if item.photo_filename %}
                            <img
                                src="{{ image_url(item.photo_filename, 'md') }}"
                                srcset="{{ image_srcset(item.photo_filename) }}"
                                sizes="{{ image_sizes('grid') }}"
                                alt="{{ item.name }}"
                                loading="lazy">
                        {% else %}
                            <div class="placeholder-tile">{{ item.name[:1] }}</div>
                        {% endif %}
                    </div>
                    <div class="item-body">
                        <div class="chip-row">
                            <span class="chip">{{ item.visibility_label }}</span>
                            <span class="chip status-soft">{{ item.owner_label }}</span>
                            <span class="chip">{{ item.for_label }}</span>
                        </div>
                        <div class="chip-row">
                            <span class="chip">{{ item.meal_type_label }}</span>
                            <span class="chip">{{ energy_density_labels[item.energy_density] }}</span>
                            {% for tag in item.meal_tag_labels %}
                                <span class="chip">{{ tag }}</span>
                            {% endfor %}
                        </div>
                    {% if item.kind != 'food' and 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.kind != 'food' and item.note %}
                        <p>{{ item.note }}</p>
                    {% endif %}
                    </div>
                    <div class="item-actions">
                        {% if item.can_edit %}
                            <a class="ghost-button" href="{{ url_for('main.item_edit', item_id=item.id) }}">Bearbeiten</a>
                        {% endif %}
                        <a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
                        <form class="primary-action" 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.can_edit %}
                            <form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
                                {{ csrf_input() }}
                                <button class="ghost-button" type="submit">Archivieren</button>
                            </form>
                        {% endif %}
                    </div>
                </article>
            {% endif %}
        {% endfor %}
    </section>
{% else %}
    <section class="panel empty-panel">
        <h2>Keine passenden Einträge</h2>
        <p>Mit einer kleinen Suche oder einem anderen Filter findest du meist schnell wieder das Richtige.</p>
        <a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neuen Eintrag anlegen</a>
    </section>
{% endif %}
{% endblock %}