{% load i18n %}
<div class="oo-editor-page">
    <div class="oo-editor-bar">
        {% if back.kind == 'pharmacy' %}
        <a href="/pharmacies/{{ back.pharmacy_id }}/" class="oo-editor-back">{% trans "К аптеке" %}</a>
        {% elif back.kind == 'report_doc' %}
        <a href="/reports/"
           hx-get="/reports/" hx-target="#main-content" hx-push-url="/reports/" hx-indicator="#loader"
           class="oo-editor-back">{% trans "К отчётам" %}</a>
        {% else %}
        <a href="/documents/"
           hx-get="/documents/" hx-target="#main-content" hx-push-url="/documents/" hx-indicator="#loader"
           class="oo-editor-back">{% trans "К документам" %}</a>
        {% endif %}
    </div>
    <div id="onlyoffice-editor" class="oo-editor-host"></div>
</div>

{{ editor_config|json_script:"onlyoffice-config" }}
<script src="{{ api_js }}"></script>
<script>
(function () {
    var host = document.getElementById('onlyoffice-editor');
    var cfg = JSON.parse(document.getElementById('onlyoffice-config').textContent);
    if (typeof DocsAPI === 'undefined') {
        host.innerHTML =
            '<p style="padding:1.25rem; font-size:0.875rem; color:#d63333;">Не удалось загрузить OnlyOffice. Проверьте хост Document Server.</p>';
        return;
    }
    cfg.events = {
        onDocumentReady: function () {
            window.dispatchEvent(new Event('resize'));
        },
        onError: function (event) {
            var data = event && event.data;
            host.insertAdjacentHTML(
                'afterbegin',
                '<p style="padding:0.75rem 1rem; margin:0; font-size:0.8125rem; color:#d63333; background:rgba(214,51,51,0.08);">OnlyOffice не открыл файл' +
                (data ? ' (код ' + data + ')' : '') +
                '.</p>'
            );
        }
    };
    new DocsAPI.DocEditor('onlyoffice-editor', cfg);
})();
</script>