165 lines
8.9 KiB
HTML
165 lines
8.9 KiB
HTML
{% 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" name="save_mode" value="stay">Speichern</button>
|
||
<button class="secondary" type="submit" name="save_mode" value="close">Speichern und schließen</button>
|
||
<a class="ghost-button" href="{{ url_for('main.template_library') }}">Zurück</a>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
{% endblock %}
|