{% load static i18n %}
{% comment %}
    No inline style or script: the widget Media loads editor_js_widget.css and
    editor_js_widget.js, which initializes the widgets, so that a Content
    Security Policy based on nonces allows them.
{% endcomment %}

<div 
    id="id_{{ widget.name }}_wrapper" 
    class="editor-js-widget-wrapper"
    style="width: 100%; max-width: 780px; position: relative;"
    data-widget-name="{{ widget.name }}"
    data-config-json='{{ widget.config_json|safe }}'
>
    <textarea name="{{ widget.name }}" id="id_{{ widget.name }}" style="display: none;">{{ widget.value }}</textarea>

    <button type="button" id="id_{{ widget.name }}_fullscreen_btn" class="editor-js-fullscreen-button" title="Toggle Fullscreen">
        <svg id="id_{{ widget.name }}_icon_expand" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
    </button>
    
    <iframe 
        id="id_{{ widget.name }}_iframe"
        src="{{ widget.iframe_src }}"
        style="width: 100%; border: 1px solid var(--border-color, #ccc); border-radius: 4px;"
    >
    </iframe>

    {# the counter on the right, the room on the left for the buttons of the admin, e.g. of Baton #}
    <div id="id_{{ widget.name }}_footer" class="editor-js-footer">
        <div
            id="id_{{ widget.name }}_word_count"
            class="editor-js-word-count"
            data-label-one="{% translate 'word' %}"
            data-label-other="{% translate 'words' %}"
            data-label-character-one="{% translate 'character' %}"
            data-label-character-other="{% translate 'characters' %}"
        ></div>
    </div>
</div>