{% 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, Bild, Tageszeiten und eine kleine Notiz, wenn sie hilft.</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>
        </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>

        <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>
            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 %}
                {% if form_data.category and form_data.category not in categories %}
                    <option value="{{ form_data.category }}" selected>{{ form_data.category }}</option>
                {% endif %}
            </select>
        </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="{{ url_for('uploaded_file', filename=item.photo_filename) }}" alt="{{ item.name }}">
            </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">Optional: Du kannst eine Mahlzeit frei als Idee anlegen oder sie aus sichtbaren Lebensmitteln zusammenklicken.</p>
                {% if food_groups %}
                    <div class="stack-sections">
                        {% 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">
                                    {% for food in group["items"] %}
                                        <label class="check-option">
                                            <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 }}</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 %}
                                {% if form_data.quick_food_category and form_data.quick_food_category not in categories %}
                                    <option value="{{ form_data.quick_food_category }}" selected>{{ form_data.quick_food_category }}</option>
                                {% endif %}
                            </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 %}