{% extends "package/resource_edit_base.html" %}

{% block primary_content_inner %}
    <div class="accordion mb-3" id="singleAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    {{ _("Validation Schema") }}
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                data-bs-parent="#singleAccordion">
                <div class="accordion-body">
                    <p>{{ _("Use a JSON Schema (Draft 2020-12) to validate the structure and content of the resource metadata.") }}</p>
                    <p>{{ _("This schema ensures that the data adheres to the expected format, types, and required fields, helping to catch errors early and maintain data consistency.") }}</p>
                    <p>{{ _("Learn more about JSON Schema Draft 2020-12 at") }}
                        <a href="https://json-schema.org/draft/2020-12/">https://json-schema.org/draft/2020-12/</a>
                    </p>
                    <div id="jsoneditor-schema" style="height: 600px" class="mb-4 rdocs-jsoneditor"></div>
                </div>
            </div>
        </div>
    </div>

    <label class="form-label">{{ _("Resource Documentation") }}</label>
    <div id="jsoneditor-docs" data-module="rdocs-jsoneditor-docs" data-module-resource-id="{{ resource.id }}" style="height: 800px" class="rdocs-jsoneditor mb-3"></div>

    <div class="form-actions">
        <button type="button" class="btn btn-primary" id="save-docs">
            {{ _("Save Documentation") }}
        </button>
    </div>
{% endblock %}

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv2020.min.js"></script>
    <script type="module">
        import { createJSONEditor, createAjvValidator, toJSONContent } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@3.8.0/standalone.min.js';
        window.createJSONEditor = createJSONEditor;
        window.createAjvValidator = createAjvValidator;
        window.toJSONContent = toJSONContent;
        window.Ajv2020 = ajv2020;
    </script>

    {% asset "resource_docs/resource_docs-js" %}

    {{ super() }}
{% endblock %}

{% block styles %}
    {% asset "resource_docs/resource_docs-css" %}

    {{ super() }}
{% endblock %}