{% load i18n %}

{% if pdf_url %}
  <div class="embedpdf">
    <div
      id="pdf-viewer-{{ instance.pk }}"
      class="embedpdf__viewer"
      style="width: 100%; height: {{ instance.height }};"
    ></div>
  </div>
  <script type="module">
    import EmbedPDF from '{{ embedpdf_js_url|escapejs }}';

    embedPdfInitialization{{ instance.pk }}()

    if (window.hasOwnProperty('CMS') === true) {
      CMS.$(window).on('cms-content-refresh', function () {
        embedPdfInitialization{{ instance.pk }}()
      })
    }

    async function embedPdfInitialization{{ instance.pk }}() {
      const viewer = EmbedPDF.init({
        type: 'container',
        target: document.getElementById('pdf-viewer-{{ instance.pk }}'),
        src: '{{ pdf_url|escapejs }}',
        theme: { preference: 'system' },
        i18n: {
          defaultLocale: '{{ embedpdf_locale|escapejs }}',
          fallbackLocale: 'en',
        },
        disabledCategories: {{ embedpdf_disabled_categories|safe }},
      });

      const registry = await viewer.registry;
      const ui = registry.getPlugin('ui').provides();
      const toolbar = ui.getSchema().toolbars['main-toolbar'];
      const items = toolbar && JSON.parse(JSON.stringify(toolbar.items));
      const rightGroup = items && items.find((item) => item.id === 'right-group');

      if (toolbar && rightGroup && !rightGroup.items.some((item) => item.id === 'fullscreen-button')) {
        rightGroup.items.push({
          type: 'command-button',
          id: 'fullscreen-button',
          commandId: 'document:fullscreen',
          variant: 'icon',
          categories: ['document', 'document-fullscreen'],
        });
        ui.mergeSchema({
          toolbars: {
            'main-toolbar': { ...toolbar, items },
          },
        });
      }
    }
  </script>
{% else %}
  {% if request.toolbar and request.toolbar.edit_mode_active %}
    <p class="embedpdf embedpdf--empty">{% trans "No PDF file selected." %}</p>
  {% endif %}
{% endif %}