{% extends "base.html" %}

{% block title %}編輯規範 - {{ spec.spec_code }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h2 class="mb-0">正在編輯: {{ spec.spec_code }}</h2>
        <p class="lead text-muted">主題: {{ spec.title }}</p>
    </div>
    <a href="{{ url_for('temp_spec.spec_list') }}" class="btn btn-secondary"><i class="bi bi-arrow-left-circle me-2"></i>返回總表</a>
</div>

<div class="card">
    <div class="card-body p-0" style="height: 85vh;">
        <div id="placeholder"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="{{ onlyoffice_url }}web-apps/apps/api/documents/api.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 從後端接收的設定
    const config = {{ config|tojson|safe }};

    // 建立 DocEditor 物件
    const docEditor = new DocsAPI.DocEditor("placeholder", config);

    // 您可以在這裡加入更多事件處理，例如：
    // config.events = {
    //     'onAppReady': function() { console.log('Editor is ready'); },
    //     'onDocumentStateChange': function(event) { console.log('Document state changed'); },
    // };
});
</script>
{% endblock %}