{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{# SPDX-FileCopyrightText: 2026 JWP Consulting GK #}
{% extends "admin/base_site.html" %}
{% load static %}
{% block title %}Edit – {{ page.title }}{% endblock %}
{% block extrahead %}
    <meta name="htmx-config"
          content='{ "inlineScriptNonce":"{{ csp_nonce }}", "inlineStyleNonce":"{{ csp_nonce }}", "allowEval": false }'>
    <link rel="stylesheet" href="{% static 'font-awesome/css/all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/post_editor.css' %}">
    <script src="{% static 'htmx/htmx.js' %}" defer></script>
    <script src="{% static 'easymde/easymde.js' %}" defer></script>
    <script src="{% static 'post_editor.js' %}" defer></script>
{% endblock extrahead %}
{% block content_title %}
    <div class="post-editor-title-row">
        <h1>Edit – {{ page.title }}</h1>
        <input type="submit" id="post-editor-save" class="default" value="Save">
    </div>
{% endblock %}
{% block breadcrumbs %}
    {% include "admin/koriander/page/includes/breadcrumbs.html" %}
{% endblock %}
{% partialdef resources %}
    <section id="page-resources">
        <h2>Page Resources</h2>
        <div id="unused-resources"></div>
        <div class="resource-tiles">
            {% for resource in page.pageresource_set.all %}
                <form class="resource-tile"
                      hx-post="{% url 'editor_resource_delete' path=page.address resource_pk=resource.pk %}"
                      hx-confirm="Are you sure you want to delete this resource?"
                      hx-target="#page-resources">
                    {% csrf_token %}
                    {% if resource.name in unused %}unused{% endif %}
                    {% if resource.type == 'IMAGE' and resource.image_instance %}
                        <a href="{{ resource.image_instance.full_url }}" target="_blank">
                            <img src="{{ resource.image_instance.full_url }}"
                                 width="{{ resource.image_instance.width }}"
                                 height="{{ resource.image_instance.height }}"
                                 alt="{{ resource.name }}">
                        </a>
                    {% endif %}
                    <p>
                        <a href="{% url 'admin:koriander_pageresource_change' resource.pk %}">{{ resource.name }}</a>
                    </p>
                    <p>
                        <button type="button"
                                data-insert-page-resource
                                data-resource-path="{{ resource.name }}"
                                data-resource-name="{{ resource.name }}">Insert</button>
                    </p>
                    <p>
                        <button type="submit">Delete</button>
                    </p>
                </form>
            {% empty %}
                <p>No resources.</p>
            {% endfor %}
        </div>
        <p>Toggle preview in editor to show unused page resouces</p>
    </section>
{% endpartialdef %}
{% block content %}
    <template id="post-editor-template">
        <link rel="stylesheet" href="{% static 'font-awesome/css/all.min.css' %}">
        <link rel="stylesheet" href="{% static 'easymde/easymde.css' %}">
        <link rel="stylesheet" href="{% static 'css/post_editor.css' %}">
        <form id="editor-form" method="post">
            {% csrf_token %}
            {{ form.content_md }}
        </form>
        <dialog id="link-dialog">
            <form method="dialog">
                <h2>Link to page</h2>
                {{ link_search_form.q.as_field_group }}
                <div id="link-results-container">
                    <ul id="link-results">
                    </ul>
                </div>
                <button type="submit" id="link-cancel">Cancel</button>
            </form>
        </dialog>
        <dialog id="footnote-dialog">
            <form method="dialog">
                <h2>Insert footnote</h2>
                <label for="footnote-name">Footnote name</label>
                <input type="text"
                       id="footnote-name"
                       placeholder="e.g. my-note"
                       autocomplete="off">
                <button type="submit" id="footnote-insert">Insert</button>
                <button type="submit" id="footnote-cancel">Cancel</button>
            </form>
        </dialog>
        {% partial resources %}
    </template>
    <post-editor data-image-upload-url="{% url 'editor_image_upload' path=page.address %}"
                 data-preview-url="{% url 'editor_preview' path=page.address %}"
                 data-image-max-size="{{ image_max_size }}"
                 data-back-url="{% url 'admin:koriander_page_change' page.pk %}"
                 data-image-accept="{{ image_accept }}"
                 data-page-search-url="{% url 'page_search' %}">
    </post-editor>
{% endblock content %}