{% 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, Bild, Tageszeiten und eine kleine Notiz, wenn sie hilft.</p>
    </div>
</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>
            Kategorie
            <input type="text" name="category" list="category-list" value="{{ form_data.category }}" placeholder="z. B. Obst, Warmes, Snack">
            <datalist id="category-list">
                {% for category in categories %}
                    <option value="{{ category }}"></option>
                {% endfor %}
            </datalist>
        </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>
                <div class="checkbox-grid">
                    {% for food in foods %}
                        <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 }}</span>
                        </label>
                    {% endfor %}
                </div>
            </fieldset>
        {% endif %}

        <div class="form-actions">
            <button type="submit">Speichern</button>
            <a class="ghost-button" href="{{ url_for('main.item_list', kind=kind) }}">Zurueck</a>
        </div>
    </form>
</section>
{% endblock %}