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

{% block title %}{{ _("Themes - Yaffo") }}{% endblock %}

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='themes_page/index.css') }}">
{% endblock %}

{% block content %}
<div class="themes-container">
    <nav class="sidebar themes-sidebar">
        <h2>{{ _("Themes") }}</h2>

        <h3 class="themes-nav-heading">{{ _("System") }}</h3>
        <ul class="panel-nav">
            {% for theme in system_themes %}
                <li>
                    <a href="{{ url_for('themes_show', slug=theme.slug) }}"
                       class="{% if theme.slug == selected_slug %}active{% endif %}">
                        {{ theme.label }}
                        {% if theme.slug == default_slug %}<span class="theme-nav-default">{{ _("default") }}</span>{% endif %}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <h3 class="themes-nav-heading">{{ _("Custom") }}</h3>
        {% if custom_themes %}
            <ul class="panel-nav">
                {% for theme in custom_themes %}
                    <li>
                        <a href="{{ url_for('themes_show', slug=theme.slug) }}"
                           class="{% if theme.slug == selected_slug %}active{% endif %}">
                            {{ theme.label }}
                            {% if theme.slug == default_slug %}<span class="theme-nav-default">{{ _("default") }}</span>{% endif %}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="no-data">{{ _("No custom themes yet") }}</p>
        {% endif %}

        <button type="button" id="new-theme-button" class="btn-secondary new-theme-button"
                data-icon="add">{{ _("New theme") }}
        </button>
    </nav>

    <div class="themes-content">
        {% set header_actions %}
        <div class="theme-actions">
            {% if selected_slug != default_slug %}
                <button type="button" class="btn-primary"
                        hx-post="{{ url_for('themes_set_default', slug=selected_slug) }}"
                        hx-swap="none">{{ _("Make default") }}
                </button>
            {% endif %}
            {% if not selected_is_builtin %}
                <button type="button" id="rename-theme-button" class="btn-secondary"
                        data-icon="edit">{{ _("Rename") }}
                </button>
                <button type="button" id="delete-theme-button" class="btn-danger"
                        data-icon="delete">{{ _("Delete") }}
                </button>
            {% endif %}
        </div>
        {% endset %}
        {% call page_header(selected_label, none, header_actions) %}
            {{ _("A built-in theme that ships with Yaffo. System themes cannot be deleted.") if selected_is_builtin else _("A custom theme stored in the application database.") }}
        {% endcall %}
        {# Built-in themes are hand-crafted (no AI builder), so the conversation
           panel is hidden for them. #}
        {% if not selected_is_builtin %}
        <div class="chat-card theme-conversation">
            {% if selected_has_draft %}
                <div class="theme-draft">
                    <p class="theme-draft-text">
                        {{ _("The assistant has an unpublished design for this theme. Save it to make it live, or discard the draft.") }}
                    </p>
                    <div class="theme-draft-actions">
                        <button type="button" class="btn-primary"
                                hx-post="{{ url_for('themes_publish', slug=selected_slug) }}"
                                hx-swap="none">{{ _("Save draft") }}
                        </button>
                        <button type="button" class="btn-secondary"
                                hx-post="{{ url_for('themes_discard', slug=selected_slug) }}"
                                hx-swap="none">{{ _("Discard") }}
                        </button>
                    </div>
                </div>
            {% endif %}
            {{ chat_dialog(
                'theme-chat',
                _('Conversation'),
                _('Describe how this theme should look and the assistant will design it.'),
                _('Describe how this theme should look…'),
                messages=selected_conversations,
                empty_text=(_('System themes are hand-crafted and have no conversation.')
                            if selected_is_builtin
                            else _('No conversation yet — describe the look you want and the assistant will build it.')),
                disabled=selected_is_builtin
            ) }}

        </div>
        {% endif %}
    </div>

</div>

{% macro render_new_theme_form() %}
    <div class="form-group">
        <label for="new-theme-label">{{ _("Name") }}</label>
        <input type="text" id="new-theme-label" name="label" required
               placeholder="{{ _('e.g. Midnight, Pastel, Forest') }}">
        <p class="hint-text">{{ _("Starts from the classic look — design it through a conversation later.") }}</p>
    </div>
{% endmacro %}

{{ render_modal('newThemeModal', _('New Theme'), url_for('themes_create'), render_new_theme_form, _('Create')) }}

{% if not selected_is_builtin %}
{% macro render_rename_theme_form() %}
    <div class="form-group">
        <label for="rename-theme-label">{{ _("Name") }}</label>
        <input type="text" id="rename-theme-label" name="label" required
               value="{{ selected_label }}">
        <p class="hint-text">{{ _("Renaming updates the theme's web address (slug) to match.") }}</p>
    </div>
{% endmacro %}

{{ render_modal('renameThemeModal', _('Rename Theme'), url_for('themes_rename', slug=selected_slug), render_rename_theme_form, _('Save')) }}
{% endif %}

<form id="delete-theme-form" method="POST"
      action="{{ url_for('themes_delete', slug=selected_slug) }}" hidden></form>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='themes_page/index.js') }}"></script>
    <script>
        document.addEventListener('yaffo:app-init-complete', (event) => {
            const app = event.detail.app;
            app.themes.page = app.themes.initPage(
                {{ selected_label | tojson }},
                window.APP_CONFIG,
                app.i18n
            );
            {% if not selected_is_builtin %}
            app.themes.chat = app.themes.initChat(
                {{ selected_slug | tojson }},
                {{ selected_status | tojson }},
                window.APP_CONFIG,
                app.i18n
            );
            {% endif %}
        });
    </script>
{% endblock %}