{% extends "base.html" %}
{% from "components/chat_dialog.html" import chat_dialog %}

{% block title %}{{ page.title }} - Yaffo{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/gridstack/10.3.1/gridstack.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='pages/detail.css') }}">
{% endblock %}

{% block content %}
<div class="main-content page-design">
    <div class="design-layout">
        <aside class="editor-panel">
            <div class="editor-card">
                <div class="form-group">
                    <label for="page-title">{{ _("Title") }}</label>
                    <input type="text" id="page-title" name="title" value="{{ page.title }}" placeholder="{{ _('Untitled Page') }}">
                </div>
                <div class="form-group">
                    <label for="page-subtitle">{{ _("Subtitle") }}</label>
                    <textarea id="page-subtitle" name="page_subtitle" rows="2" class="form-control"
                              >{{ page.subtitle }}</textarea>
                </div>
                <div class="form-group">
                    <label for="page-tab-order">{{ _("Tab order") }}</label>
                    <input type="number" id="page-tab-order" name="tab_order" step="1"
                           value="{{ page.tab_order }}" class="form-control">
                </div>
                <div class="form-group">
                    <label class="checkbox-label inline">
                        <input type="checkbox" id="page-show-title" {% if page.show_title %}checked{% endif %}>
                        {{ _("Display title?") }}
                    </label>
                </div>
                <div class="editor-actions">
                    <button type="button" id="add-widget-button" class="btn-secondary" data-icon="add">{{ _("Add widget") }}</button>
                    <button type="button" id="save-page-button" class="btn-primary">{{ _("Save") }}</button>
                    <button type="button" id="delete-page-button" class="btn-danger" data-icon="delete">{{ _("Delete Page") }}</button>
                </div>
            </div>

            <div class="chat-card">
                {{ chat_dialog(
                    'conversation',
                    _('Assistant'),
                    _('Collaborate to build your page.'),
                    _('Describe what you want…'),
                    messages=page.messages,
                    empty_text=_("Describe what you want and I'll add widgets — e.g. “a map of Maine” or “our beach photos from 2023”.")
                ) }}
            </div>
        </aside>

        <div class="editor-canvas">
            {% set editable = true %}
            {% include "pages/_grid.html" %}
        </div>
    </div>
</div>

<form id="delete-page-form" method="POST" action="{{ url_for('pages_delete', page_id=page.id) }}" hidden></form>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/gridstack/10.3.1/gridstack-all.js') }}"></script>
<script src="{{ url_for('static', filename='pages/widget_broker.js') }}"></script>
<script src="{{ url_for('static', filename='pages/grid.js') }}"></script>
<script src="{{ url_for('static', filename='pages/detail.js') }}"></script>
<script>
    document.addEventListener('yaffo:app-init-complete', (event) => {
        const app = event.detail.app;
        // The single version the design page edits: the working draft if one exists,
        // else the published version. Its id + status are passed in so every edit
        // targets it unambiguously (no published-vs-working guessing server-side).
        {% set edit_version = page.working_version or page.published_version %}
        app.pages.detail = app.pages.initDetail({{ page.title | tojson }}, app.i18n);
        app.pages.grid = app.pages.initDesignGrid(
            {{ page.id }}, {{ edit_version.id }}, '{{ edit_version.status }}', window.APP_CONFIG, app.i18n);
        // The broker targets whichever version the grid is currently editing.
        app.pages.initWidgetBroker(
            {{ page.id }}, app.pages.grid.getVersionId, window.APP_CONFIG);
    });
</script>
{% endblock %}