{% extends "base.html" %}
{% block title %}{% if item %}Bearbeiten{% else %}Neu{% endif %} | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">{{ item_kind_labels[kind] }}</p>
        <h1>{% if item %}{{ item.name }} bearbeiten{% else %}Neue{% endif %} {{ item_kind_singular_labels[kind] }}</h1>
        <p class="lead">Nur das Nötigste: Name, Sichtbarkeit, für wen etwas gedacht ist, Bild, Tageszeiten und eine kleine Notiz.</p>
    </div>
    {% if item %}
        <div class="intro-pills">
            <span class="status-pill">{{ item.visibility_label }}</span>
            <span class="status-pill status-soft">{{ item.owner_label }}</span>
            <span class="status-pill">{{ item.for_label }}</span>
        </div>
    {% endif %}
</section>

<section class="panel form-panel">
    <form method="post" enctype="multipart/form-data" class="stack-form">
        {{ csrf_input() }}
        <label>
            Name
            <input type="text" name="name" value="{{ form_data.name }}" required>
        </label>

        <div class="dual-grid">
            <label>
                Sichtbarkeit
                <select name="visibility">
                    {% for value, label in visibility_options %}
                        <option value="{{ value }}" {% if form_data.visibility == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                <small class="helper-text">{{ visibility_descriptions[form_data.visibility] }}</small>
            </label>

            <label>
                Für wen?
                <select name="target_user_id">
                    {% for option in target_user_options %}
                        <option value="{{ option.value }}" {% if form_data.target_user_raw == option.value %}selected{% endif %}>{{ option.label }}</option>
                    {% endfor %}
                </select>
            </label>
        </div>

        <label>
            Kategorie
            <select name="category">
                <option value="">Ohne Kategorie</option>
                {% for category in categories %}
                    <option value="{{ category }}" {% if form_data.category == category %}selected{% endif %}>{{ category }}</option>
                {% endfor %}
            </select>
        </label>

        <label>
            Energiedichte
            <select name="energy_density">
                {% for value, label in energy_density_options %}
                    <option value="{{ value }}" {% if form_data.energy_density == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
            <small class="helper-text">Hilft Nouri dabei, passende Ideen etwas ruhiger und persönlicher zu sortieren.</small>
        </label>

        <label>
            Notiz
            <textarea name="note" rows="4" placeholder="Optional, wenn eine kleine Erinnerung hilfreich ist.">{{ form_data.note }}</textarea>
        </label>

        <label>
            Foto
            <input type="file" name="photo" accept="image/png,image/jpeg,image/gif,image/webp">
        </label>

        {% if item and item.photo_filename %}
            <div class="inline-photo">
                <img
                    src="{{ image_url(item.photo_filename, 'lg') }}"
                    srcset="{{ image_srcset(item.photo_filename) }}"
                    sizes="{{ image_sizes('detail') }}"
                    alt="{{ item.name }}"
                    loading="lazy">
            </div>
        {% endif %}

        <fieldset>
            <legend>Passende Tageszeiten</legend>
            <div class="checkbox-grid">
                {% for daypart in dayparts %}
                    <label class="check-option">
                        <input type="checkbox" name="daypart_ids" value="{{ daypart.id }}" {% if daypart.id in form_data.daypart_ids %}checked{% endif %}>
                        <span>{{ daypart.name }}</span>
                    </label>
                {% endfor %}
            </div>
        </fieldset>

        {% if kind == 'meal' %}
            <fieldset>
                <legend>Bestandteile der Mahlzeitenidee</legend>
                <p class="muted">Du kannst eine Mahlzeit frei als Idee anlegen oder sie aus sichtbaren Lebensmitteln zusammenstellen.</p>
                <div class="inline-form">
                    <label class="wide">
                        Lebensmittel suchen
                        <input
                            type="text"
                            name="food_search"
                            value="{{ form_data.food_search }}"
                            placeholder="z. B. Reis, Banane, Joghurt"
                            data-filter-input
                            data-filter-target="#meal-components-list"
                            data-filter-limit="3"
                        >
                    </label>
                    <button class="secondary" type="submit" name="form_action" value="filter_foods">Suchen</button>
                </div>
                <p class="helper-text">Während der Suche zeigt Nouri nur die drei passendsten Lebensmittel, damit die Auswahl ruhig bleibt.</p>
                {% if food_groups %}
                    <div class="stack-sections" id="meal-components-list">
                        {% for group in food_groups %}
                            <div class="component-group">
                                <div class="panel-head">
                                    <h3>{{ group["title"] }}</h3>
                                    <span>{{ group["items"]|length }} Einträge</span>
                                </div>
                                <div class="checkbox-grid filterable-checkbox-group" data-filter-group>
                                    {% for food in group["items"] %}
                                        <label class="check-option" data-filter-label="{{ food.name|lower }} {{ food.category|default('', true)|lower }}">
                                            <input type="checkbox" name="component_ids" value="{{ food.id }}" {% if food.id in form_data.component_ids %}checked{% endif %}>
                                            <span>{{ food.name }} · {{ food.visibility_label }} · {{ food.for_label }}</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="empty-state">Lege zuerst ein paar Lebensmittel an, damit du daraus Mahlzeitenideen bauen kannst.</p>
                {% endif %}
                <div class="quick-food-panel">
                    <div class="panel-head">
                        <h3>Neues Lebensmittel direkt anlegen</h3>
                        <span>ohne die Seite zu verlassen</span>
                    </div>
                    <div class="quick-food-grid">
                        <label>
                            Name
                            <input type="text" name="quick_food_name" value="{{ form_data.quick_food_name }}" placeholder="z. B. Hüttenkäse">
                        </label>
                        <label>
                            Kategorie
                            <select name="quick_food_category">
                                <option value="">Ohne Kategorie</option>
                                {% for category in categories %}
                                    <option value="{{ category }}" {% if form_data.quick_food_category == category %}selected{% endif %}>{{ category }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label>
                            Energiedichte
                            <select name="quick_food_energy_density">
                                {% for value, label in energy_density_options %}
                                    <option value="{{ value }}" {% if form_data.quick_food_energy_density == value %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label class="wide">
                            Notiz
                            <input type="text" name="quick_food_note" value="{{ form_data.quick_food_note }}" placeholder="Optional">
                        </label>
                        <button type="submit" name="form_action" value="quick_add_food" class="secondary">Lebensmittel anlegen und übernehmen</button>
                    </div>
                </div>
            </fieldset>
        {% endif %}

        <div class="form-actions">
            <button type="submit" name="form_action" value="save_item">Speichern</button>
            <a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurück</a>
        </div>
    </form>
</section>
{% endblock %}