{% extends "base.html" %}
{% block title %}Tagesplan | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Tagesplan</p>
        <h1>{{ weekday_name(selected_date) }}, {{ selected_date.strftime('%d.%m.%Y') }}</h1>
        <p class="lead">Jede Tageszeit hat ihren eigenen Platz und öffnet sich erst dann, wenn du etwas eintragen möchtest.</p>
    </div>
    <div class="week-nav">
        <a class="ghost-button" href="{{ url_for('main.planner_day', date=previous_day.isoformat()) }}">Vorheriger Tag</a>
        <a class="ghost-button" href="{{ url_for('main.planner') }}">Zur Woche</a>
        <a class="ghost-button" href="{{ url_for('main.planner_day', date=next_day.isoformat()) }}">Nächster Tag</a>
    </div>
</section>

<section class="two-column">
    <article class="panel">
        <div class="panel-head">
            <h2>Tagesvorlagen</h2>
            <a href="{{ url_for('main.day_template_create', source_date=selected_date.isoformat()) }}">Als Vorlage speichern</a>
        </div>
        {% if day_templates %}
            <div class="stack-sections">
                {% for template in day_templates %}
                    <form method="post" action="{{ url_for('main.day_template_apply', template_id=template.id) }}" class="inline-form template-apply-form">
                        {{ csrf_input() }}
                        <input type="hidden" name="target_date" value="{{ selected_date.isoformat() }}">
                        <div class="template-card">
                            <strong>{{ template.name }}</strong>
                            <small>{{ template.visibility_label }} · {{ template.owner_label }}</small>
                        </div>
                        <button type="submit">Vorlage anwenden</button>
                    </form>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Wenn du einen Tag öfter wiederverwenden möchtest, kannst du ihn hier als Tagesvorlage speichern.</p>
        {% endif %}
    </article>

    {% if day_hints %}
        <article class="panel">
            <div class="panel-head">
                <h2>Heute im Blick</h2>
            </div>
            <div class="hint-list">
                {% for hint in day_hints %}
                    <p class="hint-chip">{{ hint }}</p>
                {% endfor %}
            </div>
        </article>
    {% endif %}
</section>

<section class="planner-day-stack">
    {% set hidden_snack_sections = sections | selectattr('is_snack_daypart') | rejectattr('visible_by_default') | list %}
    {% if hidden_snack_sections %}
        <section class="panel compact-form-panel snack-reveal-panel" data-day-snack-actions>
            <div class="panel-head">
                <h2>Zwischenmahlzeit hinzufügen</h2>
            </div>
            <div class="chip-row snack-reveal-actions">
                {% for section in hidden_snack_sections %}
                    <button
                        class="ghost-button snack-reveal-button"
                        type="button"
                        data-day-snack-open
                        data-target="#daypart-{{ section.daypart.id }}"
                    >
                        {{ section.daypart.name }}
                    </button>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {% for section in sections %}
        <details
            class="day-tile{% if section.entries %} has-entries{% endif %}{% if section.selected_quick_action %} has-selection{% endif %}"
            id="daypart-{{ section.daypart.id }}"
            {% if section.is_snack_daypart and not section.visible_by_default %}hidden data-day-snack-tile{% endif %}
            {% if section.is_open %}open{% endif %}
        >
            <summary class="day-tile-summary">
                <div class="day-tile-summary-main">
                    <div class="day-tile-icon"><span class="ui-icon {{ daypart_icon_class(section.daypart.slug) }}"></span></div>
                    <div>
                        <h2>{{ section.daypart.name }}</h2>
                        {% if section.summary_items %}
                            <p class="day-tile-summary-text">{{ section.summary_items|join(', ') }}</p>
                        {% else %}
                            <p class="muted">Noch offen. Öffnen, wenn du etwas eintragen möchtest.</p>
                        {% endif %}
                    </div>
                </div>
                <span class="status-pill{% if section.entries %} status-home{% endif %}">{{ section.entries|length }} geplant</span>
            </summary>

            <div class="day-tile-body">
                {% if section.selected_quick_action %}
                    <div class="suggestion-card selected-quick-action">
                        <span class="status-pill status-home">Schon ausgewählt</span>
                        <strong>{{ section.selected_quick_action.title }}</strong>
                        <p class="muted">{{ section.selected_quick_action.subtitle }}</p>
                        {% if section.selected_quick_action.type == 'existing' %}
                            <form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}">
                                {{ csrf_input() }}
                                <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                <input type="hidden" name="item_id" value="{{ section.selected_quick_action.item_id }}">
                                <input type="hidden" name="visibility" value="{{ section.selected_quick_action.visibility }}">
                                <button class="secondary" type="submit">Jetzt nur noch speichern</button>
                            </form>
                        {% else %}
                            <form method="post" action="{{ url_for('main.planner_generated_meal') }}">
                                {{ csrf_input() }}
                                <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                <input type="hidden" name="meal_name" value="{{ section.selected_quick_action.title }}">
                                <input type="hidden" name="visibility" value="{{ section.selected_quick_action.visibility }}">
                                {% for component_id in section.selected_quick_action.component_ids %}
                                    <input type="hidden" name="component_ids" value="{{ component_id }}">
                                {% endfor %}
                                <button class="secondary" type="submit">Jetzt nur noch speichern</button>
                            </form>
                        {% endif %}
                    </div>
                {% endif %}

                {% if section.balance_suggestion %}
                    <div class="suggestion-card">
                        <strong>{{ section.balance_suggestion.text }}</strong>
                        {% if section.balance_suggestion["items"] %}
                            <div class="quick-add-row compact-quick-row">
                                {% for item in section.balance_suggestion["items"] %}
                                    <form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}">
                                        {{ csrf_input() }}
                                        <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                        <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                        <input type="hidden" name="item_id" value="{{ item.id }}">
                                        <input type="hidden" name="visibility" value="{{ item.visibility }}">
                                        <button class="quick-add-button compact-button" type="submit">
                                            <span>{{ item.name }}</span>
                                            <small>zuhause vorhanden</small>
                                        </button>
                                    </form>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}

                {% if section.meal_candidates %}
                    <div class="planner-subsection">
                        <h3>Mahlzeitenideen</h3>
                        <div class="quick-add-row compact-quick-row">
                            {% for item in section.meal_candidates %}
                                <form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}">
                                    {{ csrf_input() }}
                                    <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                    <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                    <input type="hidden" name="item_id" value="{{ item.id }}">
                                    <input type="hidden" name="visibility" value="{{ item.visibility }}">
                                    <button class="quick-add-button compact-button" type="submit">
                                        <span>{{ item.name }}</span>
                                        {% if item.availability_state == 'home' %}<small>zuhause vorhanden</small>{% endif %}
                                    </button>
                                </form>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                {% if section.recipe_suggestions %}
                    <div class="planner-subsection">
                        <h3>Passt gut dazu</h3>
                        <div class="quick-add-row compact-quick-row">
                            {% for suggestion in section.recipe_suggestions %}
                                {% if suggestion.existing_item_id %}
                                    <form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}">
                                        {{ csrf_input() }}
                                        <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                        <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                        <input type="hidden" name="item_id" value="{{ suggestion.existing_item_id }}">
                                        <input type="hidden" name="visibility" value="{{ suggestion.visibility or 'shared' }}">
                                        <button class="quick-add-button compact-button" type="submit">
                                            <span>{{ suggestion.title }}</span>
                                            <small>{{ suggestion.reason }}</small>
                                        </button>
                                    </form>
                                {% else %}
                                    <form method="post" action="{{ url_for('main.planner_generated_meal') }}">
                                        {{ csrf_input() }}
                                        <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                        <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                        <input type="hidden" name="meal_name" value="{{ suggestion.title }}">
                                        <input type="hidden" name="visibility" value="shared">
                                        {% for component_id in suggestion.component_ids %}
                                            <input type="hidden" name="component_ids" value="{{ component_id }}">
                                        {% endfor %}
                                        <button class="quick-add-button compact-button" type="submit">
                                            <span>{{ suggestion.title }}</span>
                                            <small>{{ suggestion.reason }}</small>
                                        </button>
                                    </form>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                <div class="planner-subsection">
                    <label class="planner-search">
                        <span>Suche</span>
                        <input type="text" placeholder="Lebensmittel oder Mahlzeiten suchen" data-filter-input data-filter-target="#planner-list-{{ section.daypart.id }}" data-filter-limit="3">
                    </label>
                    <div class="compact-picker-list" id="planner-list-{{ section.daypart.id }}">
                        {% for item in section.search_candidates %}
                            <form method="post" action="{{ url_for('main.planner_day', date=selected_date.isoformat()) }}" data-filter-label="{{ item.name|lower }} {{ item.category|default('', true)|lower }}">
                                {{ csrf_input() }}
                                <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                <input type="hidden" name="daypart_id" value="{{ section.daypart.id }}">
                                <input type="hidden" name="item_id" value="{{ item.id }}">
                                <input type="hidden" name="visibility" value="{{ item.visibility }}">
                                <button class="picker-row" type="submit">
                                    <span>{{ item.name }}</span>
                                    <small>
                                        {{ item_kind_labels[item.kind] }}
                                        {% if item.availability_state == 'home' %} · zuhause{% endif %}
                                    </small>
                                </button>
                            </form>
                        {% endfor %}
                    </div>
                </div>

                {% if section.entries %}
                    <div class="planner-entry-list">
                        {% for entry in section.entries %}
                            <article class="planner-entry">
                                <div class="planner-entry-top">
                                    <div>
                                        <strong>{{ entry.item_name }}</strong>
                                        <small>{{ item_kind_labels[entry.item_kind] }}{% if entry.availability_state == 'home' %} · zuhause{% else %} · bei Bedarf auf Einkaufsliste{% endif %}</small>
                                        <div class="chip-row">
                                            <span class="chip">{{ entry.visibility_label }}</span>
                                            <span class="chip status-soft">{{ entry.owner_label }}</span>
                                            <span class="chip">{{ entry.for_label }}</span>
                                        </div>
                                    </div>
                                    {% if entry.can_edit %}
                                        <div class="row-actions">
                                            <form method="post" action="{{ url_for('main.planner_remove', entry_id=entry.id, date=selected_date.isoformat()) }}">
                                                {{ csrf_input() }}
                                                <button class="ghost-button" type="submit">Entfernen</button>
                                            </form>
                                        </div>
                                    {% endif %}
                                </div>
                                {% if entry.note %}
                                    <p>{{ entry.note }}</p>
                                {% endif %}
                                {% if entry.can_edit %}
                                    <details class="planner-entry-edit">
                                        <summary class="ghost-button">Anpassen</summary>
                                        <form method="post" action="{{ url_for('main.planner_update', entry_id=entry.id) }}" class="planner-entry-inline-form">
                                            {{ csrf_input() }}
                                            <input type="hidden" name="plan_date" value="{{ selected_date.isoformat() }}">
                                            <label>
                                                Für wen?
                                                <select name="visibility">
                                                    {% for value, label in visibility_options %}
                                                        <option value="{{ value }}" {% if entry.visibility == value %}selected{% endif %}>{{ label }}</option>
                                                    {% endfor %}
                                                </select>
                                            </label>
                                            <label class="wide">
                                                Notiz
                                                <input type="text" name="note" value="{{ entry.note or '' }}" placeholder="Optional">
                                            </label>
                                            <button type="submit">Speichern</button>
                                        </form>
                                    </details>
                                {% endif %}
                            </article>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="empty-state">Hier ist noch nichts eingetragen. Ein kleiner Anfang reicht völlig.</p>
                    {% if section.is_snack_daypart %}
                        <div class="row-actions snack-inline-actions">
                            <button
                                class="ghost-button"
                                type="button"
                                data-day-snack-hide
                                data-target="#daypart-{{ section.daypart.id }}"
                            >
                                Wieder ausblenden
                            </button>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </details>
    {% endfor %}
</section>
{% endblock %}