{% extends "base.html" %}
{% block title %}{% if item_set %}Paket bearbeiten{% else %}Neues Paket{% endif %} | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Kleines Paket</p>
        <h1>{% if item_set %}{{ item_set.name }} bearbeiten{% else %}Paket anlegen{% endif %}</h1>
        <p class="lead">Pakete bündeln wiederkehrende Dinge ganz leicht, zum Beispiel schnelles Frühstück, sicherer Snack oder Einkauf für zwei Tage.</p>
    </div>
</section>

<section class="panel form-panel">
    <form method="post" class="stack-form">
        {{ csrf_input() }}
        <label>
            Name des Pakets
            <input type="text" name="name" value="{{ form_data.name }}" placeholder="{{ name_suggestions[0] }}" required>
        </label>

        <label>
            Beschreibung
            <textarea name="description" rows="3" placeholder="Optional, wenn eine kleine Erinnerung hilfreich ist.">{{ form_data.description }}</textarea>
        </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>

        <div class="chip-row">
            {% for suggestion in name_suggestions %}
                <span class="chip status-soft">{{ suggestion }}</span>
            {% endfor %}
        </div>

        {% if selected_items %}
            <fieldset>
                <legend>Schon ausgewählt</legend>
                {% for item_id in form_data.item_ids %}
                    <input type="hidden" name="item_ids" value="{{ item_id }}">
                {% endfor %}
                <div class="selected-components-grid">
                    {% for item in selected_items %}
                        {% if item.kind == 'meal' %}
                            {% set item_icon_class = {
                                'breakfast': 'icon-daypart-breakfast',
                                'lunch': 'icon-daypart-lunch',
                                'dinner': 'icon-daypart-dinner',
                                'snack': 'icon-daypart-afternoon-snack',
                            }.get(item.meal_type, 'icon-utensils') %}
                        {% else %}
                            {% 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') %}
                        {% endif %}
                        <article class="selected-component-card">
                            <button class="selected-component-remove" type="submit" name="remove_item_id" value="{{ item.id }}">
                                <span aria-hidden="true">×</span>
                                <span class="sr-only">{{ item.name }} entfernen</span>
                            </button>
                            <div class="selected-component-visual">
                                {% 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 %}
                                    <span class="selected-component-fallback">
                                        <span class="ui-icon {{ item_icon_class }}"></span>
                                    </span>
                                {% endif %}
                            </div>
                            <div class="selected-component-main">
                                <strong>{{ item.name }}</strong>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </fieldset>
        {% endif %}

        <fieldset>
            <legend>Einträge auswählen</legend>
            <label>
                Einträge filtern
                <input type="text" placeholder="Nach Namen suchen" data-filter-input data-filter-target="#item-set-list">
            </label>
            <div class="stack-sections" id="item-set-list">
                {% for group in item_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 package-option-grid">
                            {% for item in group["items"] %}
                                {% if item.kind == 'meal' %}
                                    {% set item_icon_class = {
                                        'breakfast': 'icon-daypart-breakfast',
                                        'lunch': 'icon-daypart-lunch',
                                        'dinner': 'icon-daypart-dinner',
                                        'snack': 'icon-daypart-afternoon-snack',
                                    }.get(item.meal_type, 'icon-utensils') %}
                                {% else %}
                                    {% 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') %}
                                {% endif %}
                                <label class="set-item-option" data-filter-label="{{ item.name|lower }} {{ item.category|default('', true)|lower }}">
                                    <input type="checkbox" name="item_ids" value="{{ item.id }}" {% if item.id in form_data.item_ids %}checked{% endif %}>
                                    <span class="set-item-option-card">
                                        <span class="set-item-option-visual">
                                            {% 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 %}
                                                <span class="set-item-option-fallback">
                                                    <span class="ui-icon {{ item_icon_class }}"></span>
                                                </span>
                                            {% endif %}
                                        </span>
                                        <span class="set-item-option-label">{{ item.name }}</span>
                                    </span>
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </fieldset>

        <div class="form-actions">
            <button type="submit">Speichern</button>
            <a class="ghost-button" href="{{ url_for('main.template_library') }}">Zurück</a>
        </div>
    </form>
</section>
{% endblock %}