{% extends "admin/base.html" %}
{% load i18n static %}
{% block title %}{% block image_title %}Generate Image{% endblock %}{% endblock %}
{% block breadcrumbs %}
    {% block image_breadcrumbs %}
        <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{% url "admin:index" %}">{% translate "Home" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url "admin:app_list" app_label="cmsv2" %}">{% translate "Vocabulary Management v2" %}</a></li>
            {% block breadcrumb_items %}{% endblock %}
        </ol>
    {% endblock %}
{% endblock %}
{% block content_title %}
    {% block image_content_title %}
        {% trans "Generate Image" %}
    {% endblock %}
{% endblock %}
{% block content %}
    <div id="content-main">
        <div class="module">
            {% block image_info %}{% endblock %}
            <div style="margin-top: 16px;">
                <label>
                    <input id="prompt-allow-text" type="checkbox">
                    {% translate "Allow text/numbers in the image (e.g. for a receipt or a clock face)" %}
                </label>
            </div>
            <div style="margin-top: 8px; margin-bottom: 16px;">
                <label for="prompt-additional-info">
                    <strong>Additional Info (optional):</strong>
                </label>
                <input id="prompt-additional-info" type="text" style="width: 100%" />
            </div>
            <div class="form-row">
                <button type="button" class="btn btn-primary" id="generate_button">Generate Image</button>
                <span class="loading-spinner" id="loading_spinner" style="display: none;"></span>
                <span class="message-area" id="message_area"></span>
            </div>
            <div id="image_preview_section" style="display: none;">
                <hr>
                <h2>Generated Image Preview:</h2>
                <img src=""
                     id="image-preview"
                     alt="Generated image"
                     style="display: none;
                            max-width: min(400px, 100%)" />
                <p>Temporary Filename: <span id="temp_filename_display"></span></p>
                <div>
                    <button type="button" class="button" id="regenerate_button">Re-generate</button>
                    <form method="post"
                          action="{% block store_url %}{% endblock %}"
                          style="display:inline-block">
                        {% csrf_token %}
                        <input type="hidden" name="temp_filename" id="hidden_temp_filename">
                        <button type="submit" class="button default" id="store_button">{% block store_button_text %}Store Image{% endblock %}</button>
                    </form>
                </div>
            </div>
            {% block back_buttons %}{% endblock %}
        </div>
    </div>
{% endblock %}
{% block extrajs %}
    <script src="{% static 'js/csrf.js' %}"></script>
    <script src="{% static 'js/generate_image.js' %}"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const config = {
            generateUrl: "{% block generate_url %}{% endblock %}",
            formDataBuilder: {% block form_data_builder %}null{% endblock %}
        }

        initImageGenerator(config)
    })
    </script>
{% endblock %}