{% 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, bleibt es später im Archiv greifbar.</p>
    </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>
            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.home_view') }}">Zurücksetzen</a>
        </div>
    </form>
</section>

{% if recipe_suggestions %}
    <section class="panel">
        <div class="panel-head">
            <h2>Passt gut dazu</h2>
            <a href="{{ url_for('main.item_create', kind='meal') }}">Neue Mahlzeit</a>
        </div>
        <div class="stack-sections">
            {% for suggestion in recipe_suggestions %}
                <article class="template-list-card">
                    <div>
                        <strong>{{ suggestion.title }}</strong>
                        <small>{{ suggestion.reason }}</small>
                        {% if suggestion.needs_shopping and suggestion.missing_components %}
                            <div class="chip-row">
                                <span class="chip status-idea">Es fehlt noch: {{ suggestion.missing_components|join(', ') }}</span>
                            </div>
                        {% endif %}
                    </div>
                    <div class="template-list-card-actions">
                        {% if suggestion.existing_item_id %}
                            <a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=suggestion.existing_item_id, daypart_id=suggestion.daypart_id or 1) }}">Im Tagesplan öffnen</a>
                        {% else %}
                            <a class="ghost-button" href="{{ url_for('main.item_create', kind='meal', name=suggestion.title, component_ids=suggestion.component_ids) }}">Als Mahlzeit anlegen</a>
                            <form method="post" action="{{ url_for('main.suggestion_hide') }}">
                                {{ csrf_input() }}
                                {% for component_id in suggestion.component_ids %}
                                    <input type="hidden" name="component_ids" value="{{ component_id }}">
                                {% endfor %}
                                <button class="ghost-button" type="submit">Dauerhaft ausblenden</button>
                            </form>
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
    </section>
{% endif %}

{% if sections %}
    <section class="stack-sections">
        {% for section in sections if section["items"] %}
            <article class="panel">
                <div class="panel-head">
                    <h2>{{ section["title"] }}</h2>
                    <span>{{ section["items"]|length }} Einträge</span>
                </div>
                <div class="card-grid">
                    {% for item in section["items"] %}
                        <article class="item-card compact">
                            <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">
                                <h3>{{ item.name }}</h3>
                                <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>
                                {% if item.kind == 'food' %}
                                    <div class="chip-row">
                                        <span class="chip">{{ item.base_type_label }}</span>
                                        <span class="chip">{{ item.suggestion_role_label }}</span>
                                    </div>
                                    <p class="muted">{{ item_kind_labels[item.kind] }}</p>
                                {% else %}
                                    <div class="chip-row">
                                        <span class="chip">{{ item.meal_type_label }}</span>
                                        <span class="chip">{{ energy_density_labels[item.energy_density] }}</span>
                                    </div>
                                {% endif %}
                                {% if item.components %}
                                    <p class="muted">Mit: {{ item.components|join(', ') }}</p>
                                {% endif %}
                            </div>
                            <div class="item-actions">
                                <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>
                                {% 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">Verbraucht / nicht mehr da</button>
                                    </form>
                                {% endif %}
                                <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 %}