{% load i18n static corpus_extras %}
{% if edit_mode %}
    {{ annotation_config|json_script:"annotation-config" }}
{% elif perms.corpus.change_document %}
    {% for ed in document.digital_editions.all %}
        <a class="editor-navigation" href="{% url 'corpus:document-transcribe' document.id ed.source.pk %}" data-turbo="false">
            <i class="ph-pencil"></i>
            <span>Edit {% for auth in ed.source.authorship_set.all %}{% include "snippets/comma.html" %}{{ auth.creator.last_name }}{% empty %}[unknown]{% endfor %}'s edition</span>
        </a>
    {% endfor %}
    <a class="editor-navigation" href="{% url 'corpus:document-add-transcription' document.id %}" data-turbo="false">
        <i class="ph-plus-circle"></i>
        <span>Add a new transcription</span>
    </a>
{% endif %}
{# only enable ITT panel if transcription or images are present, or we are in edit mode #}
{% if document.has_transcription or document.iiif_urls or edit_mode %}

    <section id="itt-panel" {% if not edit_mode %}data-controller="transcription" data-action="click@document->transcription#clickCloseDropdown"{% endif %}>
        {# NOTE: inputs must be kept as SIBLINGS of panel-container for CSS selection/controls #}
        {# images displayed by default; disable if no images are available #}
        {# translators: label for checkbox toggle to show the images panel for a document #}
        <input type="checkbox" class="toggle" id="images-on" aria-label="{% translate 'show images' %}" {% if document.has_image or edit_mode %}checked="true" {% else %} disabled="true"{% endif %}/>
        <label for="images-on"></label>
        {# transcription displayed by default; disable if no content is available #}
        {# translators: label for checkbox toggle to show the transcription panel for a document #}
        <input type="checkbox" class="toggle" id="transcription-on" aria-label="{% translate 'show transcription' %}" {% if document.digital_editions or edit_mode %}checked="true" {% else %} disabled="true"{% endif %}/>
        <label for="transcription-on"><svg><use xlink:href="{% static 'img/ui/all/all/transcription-toggle.svg' %}#transcription-toggle" /></svg></label>
        {# translation disabled for now since we don't handle them in the system yet #}
        {# translators: label for checkbox toggle to show the translation panel for a document #}
        <input type="checkbox" class="toggle" id="translation-on" aria-label="{% translate 'show translation' %}" disabled="true"/>
        <label for="translation-on"><svg><use xlink:href="{% static 'img/ui/all/all/translation-toggle.svg' %}#translation-toggle" /></svg></label>
        <div class="panel-container">
            {# label row #}
            <div class="label-row"></div> {# unused (no image label, needed for column alignment) #}
            <div class="transcription-panel label-row">
                {% if edit_mode %}
                    {# show disabled details with source label in editor mode #}
                    <details class="transcription-select" aria-expanded="false" disabled="true">
                        <summary>
                            <span>Edition: {{ source_label }}</span>
                        </summary>
                    </details>
                {% else %}
                    {# dropdown is disabled by default; enable if javascript is active #}
                    <details class="transcription-select" aria-expanded="false" data-transcription-target="dropdownDetails" data-edition-count="{{ document.digital_editions.count }}" disabled="true">
                        <summary data-action="keydown->transcription#shiftTabCloseDropdown">
                            <span data-transcription-target="editionShortLabel">Edition: {{ document.digital_editions.0.source.all_authors }}</span>
                        </summary>
                        <ul>
                            {% for ed in document.digital_editions.all %}
                                <li>
                                    <label for="edition-{{ forloop.counter }}">
                                        <input type="radio" name="transcription" {% if forloop.first %} checked="true"{% endif %} value="relevance" data-action="input->transcription#changeTranscription keydown->transcription#keyboardCloseDropdown" id="edition-{{ forloop.counter }}" data-edition="ed-{{ ed.pk }}" />
                                        <span>Edition: {{ ed.source.all_authors }}</span>
                                    </label>
                                </li>
                            {% endfor %}
                        </ul>
                    </details>
                {% endif %}
            </div>

            {# loop based on canvases (for canvas with no image, image_info is a placeholder) #}
            {% for canvas_uri, image_info in images.items %}
                {# only images that are part of the current document are zoomable #}
                <div class="img{% if image_info.excluded %} excluded{% endif %}{% if image_info.placeholder %} placeholder{% endif %}" id="{{ image_info.label }}"{% if not image_info.excluded %} data-controller="iiif {% if edit_mode %}annotation" data-iiif-edit-mode-value="true{% endif %}" data-canvas-url="{{ canvas_uri }}" data-iiif-target="imageContainer" data-annotation-target="imageContainer"{% endif %}>
                    <div class="img-header" data-iiif-target="imageHeader">
                        <h2>{{ image_info.shelfmark }} {{ image_info.label }}</h2>
                        {% if not image_info.excluded %}
                            <input data-iiif-target="zoomSlider" data-action="iiif#handleDeepZoom" id="zoom-slider-{{ forloop.counter0 }}" type="range" name="zoom-slider" min="1" max="100" value="0" step="0.01" />
                            <label data-iiif-target="zoomSliderLabel" for="zoom-slider-{{ forloop.counter0 }}">100%</label>
                            <input data-iiif-target="zoomToggle" data-action="iiif#handleDeepZoom" id="zoom-toggle-{{ forloop.counter0 }}" type="checkbox" name="zoom-toggle" />
                            <label for="zoom-toggle-{{ forloop.counter0 }}">{% translate 'Zoom and Rotate' %}</label>
                            <div id="rotation-{{ forloop.counter0 }}" class="rotation" data-iiif-target="rotation" data-action="input->iiif#handleDeepZoom change->iiif#handleDeepZoom"></div>
                            <label for="rotation-{{ forloop.counter0 }}" data-iiif-target="rotationLabel">0&deg;</label>
                        {% endif %}
                    </div>
                    <div class="deep-zoom-container">
                        <img class="iiif-image" data-iiif-target="image" data-annotation-target="image" src="{{ image_info.image|iiif_image:"size:width=500" }}" alt="{{ image_info.label }}" title="{{ image_info.label }}" loading="lazy"
                            sizes="(max-width: 650px) 50vw, 94vw"
                            srcset="{{ image_info.image|iiif_image:"size:width=300" }} 300w,
                            {{ image_info.image|iiif_image:"size:width=500" }} 500w,
                            {{ image_info.image|iiif_image:"size:width=640" }} 640w,
                            {{ image_info.image|iiif_image:"size:width=1000" }} 1000w">
                        <div class="osd" data-iiif-target="osd" data-iiif-url="{{ image_info.image.info }}"></div>
                    </div>
                    {% if image_info.excluded %}
                        {# if this image isn't actually in this document, link to related documents #}
                        {% spaceless %}
                            <ul class="excluded-related">
                                {% for related in related_documents %}
                                    {% if image_info.image|stringformat:"s" in related.images %}
                                        <li><a class="view-link" href="{% url 'corpus:document' related.document.pgpid %}">
                                            {% translate 'Unknown type' as unknown_type %}
                                            {% with doctype=related.document.type|default:unknown_type shelfmark=related.document.shelfmark|shelfmark_wrap %}
                                                {# translators: link to view a related document #}
                                                {% blocktranslate with related_doc="<span>"|add:doctype|add:": "|add:shelfmark|add:"</span>"|safe trimmed %}
                                                    View {{ related_doc }}
                                                {% endblocktranslate %}
                                            {% endwith %}
                                        </a></li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        {% endspaceless %}
                    {% endif %}
                </div>
                <div class="transcription-panel">
                    {% if edit_mode %}
                        <div class="annotate transcription" data-manifest="{% url 'corpus-uris:document-manifest' document.pk %}">
                            {% if forloop.first %}
                                {# Note: editor label/instructions are content admin-only and thus not translated. #}
                                <h2>Transcribe</h2>
                                <p class="instructions">
                                    Hold shift and then click and drag over the image to select a rectangular region for the block of text you want to transcribe (this is an annotation zone).
                                </p>
                                <p class="instructions">
                                    When an annotation zone is active on the image, use the red square in the thumbnail to move around the image when zoomed in.
                                </p>
                                <p class="instructions">
                                    Drag blocks of text to reorder or move to a different image.
                                </p>
                            {% endif %}
                        </div>
                    {% else %}
                        {% if forloop.first %}
                            <h2>{% translate 'Transcription' %}</h2>
                            <span data-transcription-target="editionFullLabel" class="current-transcription{% if document.digital_editions.count > 1 %} multiple{% endif %}">
                                {{ document.digital_editions.0.source.formatted_display|safe }}
                            </span>
                        {% endif %}
                        {% if not image_info.excluded %}
                            <div class="editions">
                                {# display transcription in chunks by index #}
                                {% for edition in document.digital_editions.all %}
                                    <div class="transcription ed-{{ edition.pk }}"
                                        data-label="{{ edition.source.formatted_display }}"
                                        lang="{{ document.primary_lang_code|default:"" }}"
                                        {% if document.primary_script %}
                                            data-lang-script="{{ document.primary_script|lower }}"{% endif %}
                                    >
                                        {% for html_section in edition.content_html|dict_item:canvas_uri %}
                                            {{ html_section|safe }}
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            {% endfor %}
            {% if document.has_image %}
                {% include "corpus/snippets/document_image_rights.html" %}
            {% endif %}
        </div>
    </section>
{% endif %}