{% 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 %}
        {# TODO: Make machine learning model editions editable once line-level editing implemented #}
        <a class="editor-add" href="{% url 'corpus:document-transcribe' document.id ed.source.pk %}" data-turbo="false">
            <i class="ph-pencil"></i>
            {% if not 'model' in ed.source.source_type.type %}
                <span>Edit {% for auth in ed.source.authorship_set.all %}{% include "snippets/comma.html" %}{{ auth.creator.last_name }}{% empty %}[unknown]{% endfor %}'s edition</span>
            {% else %}
                <span>Edit machine-generated transcription ({{ ed.source.title }})</span>
            {% endif %}
        </a>
    {% endfor %}
    {% for tr in document.digital_translations.all %}
        <a class="editor-add" href="{% url 'corpus:document-translate' document.id tr.source.pk %}" data-turbo="false">
            <i class="ph-pencil"></i>
            <span>Edit {% for auth in tr.source.authorship_set.all %}{% include "snippets/comma.html" %}{{ auth.creator.last_name }}{% empty %}[unknown]{% endfor %}'s translation</span>
        </a>
    {% endfor %}
    {% if document.id %}
        <a class="editor-add" href="{% url 'corpus:document-add-transcription' document.id %}" data-turbo="false">
            <i class="ph-plus-circle"></i>
            <span>Add a new transcription</span>
        </a>
        <a class="editor-add" href="{% url 'corpus:document-add-translation' document.id %}" data-turbo="false">
            <i class="ph-plus-circle"></i>
            <span>Add a new translation</span>
        </a>
    {% endif %}
{% endif %}
{# only enable ITT panel if images/transcription/translation are present, or we are in edit mode #}
{% if document.has_digital_content or edit_mode %}
    <section id="itt-panel" data-controller="ittpanel transcription" data-action="click@document->transcription#clickCloseDropdown">
        <div id="toggles">
            {# 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" data-ittpanel-target="toggle" data-action="ittpanel#clickToggle" aria-label="{% translate 'show images' %}" {% if "images" in default_shown %}checked="true" {% elif "images" in disabled %}disabled="true" {% endif %}/>
            <label for="images-on"></label>
            {# translators: label for checkbox toggle to show the transcription panel for a document #}
            <input type="checkbox" class="toggle" id="transcription-on" data-ittpanel-target="toggle" data-action="ittpanel#clickToggle" aria-label="{% translate 'show transcription' %}" {% if "transcription" in default_shown %}checked="true" {% elif "transcription" in disabled %}disabled="true" {% endif %}/>
            <label for="transcription-on"><svg><use xlink:href="{% static 'img/ui/all/all/transcription-toggle.svg' %}#transcription-toggle" /></svg></label>
            {# translation displayed by default; disable if no content is available #}
            {# translators: label for checkbox toggle to show the translation panel for a document #}
            <input type="checkbox" class="toggle" id="translation-on" data-ittpanel-target="toggle" data-action="ittpanel#clickToggle" aria-label="{% translate 'show translation' %}" {% if "translation" in default_shown %}checked="true" {% elif "translation" in disabled %}disabled="true" {% endif %}/>
            <label for="translation-on"><svg><use xlink:href="{% static 'img/ui/all/all/translation-toggle.svg' %}#translation-toggle" /></svg></label>
        </div>
        {% comment %}
            TODO: Edit both transcription and translation at once.
            - Add an "edit" button by the dropdown for the non-active panel in edit_mode
            (i.e. translation if you are already editing a transcription, and vice versa)
            - This button will instantiate a second tahqiq for each canvas, populated by 
            annotations linked to the selected footnote
        {% endcomment %}
        {# header row #}
        <div id="header-row">
            <div class="img-col-header">
                {# translators: label for header above Image panel in viewer #}
                <span>{% translate "Image" %}</span>
            </div>
            <div class="transcription-header">
                <svg><use xlink:href="{% static 'img/ui/all/all/transcription-toggle.svg' %}#transcription-toggle" /></svg>
                {# translators: label for header above Transcription panel in viewer #}
                <span>{% translate "Transcription" %}</span>
            </div>
            <div class="translation-header">
                <svg><use xlink:href="{% static 'img/ui/all/all/translation-toggle.svg' %}#translation-toggle" /></svg>
                {# translators: label for header above Translation panel in viewer #}
                <span>{% translate "Translation" %}</span>
            </div>
        </div>
        <div class="panel-container">
            {# label row #}
            <div class="label-row" data-ittpanel-target="emptyLabel"></div> {# unused (no image label, needed for column alignment) #}
            <div class="transcription-panel label-row">
                {% if edit_mode == "transcribing" %}
                    {# show disabled details with source label in editor mode #}
                    <details class="itt-select" aria-expanded="false" disabled="true">
                        <summary>
                            <span>Editor{{ authors_count|pluralize }}: {{ source_label }}</span>
                        </summary>
                    </details>
                {% elif document.digital_editions.count %}
                    {# dropdown is disabled by default; enable if javascript is active #}
                    <details class="itt-select" aria-expanded="false" data-transcription-target="dropdownDetails" data-relation="transcription" data-count="{{ document.digital_editions.count }}" disabled="true">
                        <summary data-action="keydown->transcription#shiftTabCloseDropdown">
                            <span data-transcription-target="transcriptionShortLabel" data-ittpanel-target="shortLabel"{% if document.digital_editions.0 and 'model' in document.digital_editions.0.source.source_type.type %} class="escr"{% endif %}>
                                {% if document.digital_editions.0 and not 'model' in document.digital_editions.0.source.source_type.type %}
                                    {# Translators: Label for editors of a transcription #}
                                    {% blocktranslate with eds=document.digital_editions.0.source.all_authors|default:document.digital_editions.0.source count counter=document.digital_editions.0.source.authors.count trimmed %}
                                        Editor: {{ eds }}
                                    {% plural %}
                                        Editors: {{ eds }}
                                    {% endblocktranslate %}
                                {% elif document.digital_editions.0 %}
                                    {{ document.digital_editions.0.source }}
                                {% endif %}
                            </span>
                        </summary>
                        <ul>
                            {% for ed in document.digital_editions.all %}
                                <li>
                                    <label for="transcription-{{ forloop.counter }}"{% if 'model' in ed.source.source_type.type %} class="escr"{% endif %}>
                                        <input type="radio" name="transcription" {% if forloop.first %} checked="true"{% endif %} value="relevance" data-action="input->transcription#changeDropdown input->ittpanel#clickToggle keydown->transcription#keyboardCloseDropdown" id="transcription-{{ forloop.counter }}" data-transcription="ed-{{ ed.pk }}" />
                                        <span>
                                            {% if not 'model' in ed.source.source_type.type %}
                                                {# Translators: Label for editors of a transcription #}
                                                {% blocktranslate with eds=ed.source.all_authors|default:ed.source count counter=ed.source.authors.count trimmed %}
                                                    Editor: {{ eds }}
                                                {% plural %}
                                                    Editors: {{ eds }}
                                                {% endblocktranslate %}
                                            {% else %}
                                                {{ ed.source }}
                                            {% endif %}
                                        </span>
                                    </label>
                                </li>
                            {% endfor %}
                        </ul>
                    </details>
                {% endif %}
            </div>
            <div class="translation-panel label-row">
                {% if edit_mode == "translating" %}
                    {# show disabled details with source label in editor mode #}
                    <details class="itt-select" aria-expanded="false" disabled="true">
                        <summary>
                            <span>Translator{{ authors_count|pluralize }}: {{ source_label }}</span>
                        </summary>
                    </details>
                {% elif document.digital_translations.count %}
                    {# dropdown is disabled by default; enable if javascript is active #}
                    <details class="itt-select" aria-expanded="false" data-transcription-target="dropdownDetails" data-relation="translation" data-count="{{ document.digital_translations.count }}" disabled="true">
                        <summary data-action="keydown->transcription#shiftTabCloseDropdown">
                            <span data-transcription-target="translationShortLabel" data-ittpanel-target="shortLabel">
                                {# Translators: Label for authors of a translation #}
                                {% blocktranslate with eds=document.default_translation.source.all_authors count counter=document.default_translation.source.authors.count trimmed %}
                                    Translator: {{ eds }}
                                {% plural %}
                                    Translators: {{ eds }}
                                {% endblocktranslate %}
                                {{ document.default_translation.source.all_languages }}
                            </span>
                        </summary>
                        <ul>
                            {% for tr in document.digital_translations.all %}
                                <li>
                                    <label for="translation-{{ forloop.counter }}">
                                        <input type="radio" name="translation" {% if tr.pk == document.default_translation.pk %} checked="true"{% endif %} value="relevance" data-action="input->transcription#changeDropdown input->ittpanel#clickToggle keydown->transcription#keyboardCloseDropdown" id="translation-{{ forloop.counter }}" data-translation="tr-{{ tr.pk }}" />
                                        <span>
                                            {% blocktranslate with eds=tr.source.all_authors count counter=tr.source.authors.count trimmed %}
                                                Translator: {{ eds }}
                                            {% plural %}
                                                Translators: {{ eds }}
                                            {% endblocktranslate %}
                                            {{ tr.source.all_languages }}
                                        </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="popout-container" data-ittpanel-target="imagePopout">
                        <div class="img-header" data-iiif-target="imageHeader">
                            <h2>{{ image_info.shelfmark }} {{ image_info.label }}</h2>
                            {% if not image_info.excluded %}
                                {% if edit_mode %}
                                    <div class="edit-mode-controls">
                                        {# popout and close button #}
                                        <button class="primary popout-close-button" type="button" aria-label="Close" data-action="ittpanel#popOut"><i class="ph-x"></i></button>
                                        <button class="popout-button" type="button" data-action="ittpanel#popOut">
                                            <svg>
                                                <use xlink:href="{% static 'img/ui/desktop/all/pop-out.svg' %}#pop-out-icon" />
                                            </svg>
                                            <span class="sr-only">Pop out</span>
                                        </button>
                                        {# tahqiq toolbar for switching annotation tools #}
                                        <fieldset class="tahqiq-toolbar"></fieldset>
                                    </div>
                                {% endif %}
                                {# tablet 3-up: zoom slider toggle button #}
                                <input data-ittpanel-target="zoomSliderToggle" data-action="ittpanel#toggleZoomSlider" id="zoom-slider-toggle-{{ forloop.counter0 }}" type="checkbox" name="zoom-slider-toggle" />
                                <label for="zoom-slider-toggle-{{ forloop.counter0 }}"><i class="ph ph-magnifying-glass"></i></label>
                                {# tablet 3-up: rotation slider toggle button #}
                                <input data-ittpanel-target="rotationSliderToggle" data-action="ittpanel#toggleRotationSlider" id="rotation-slider-toggle-{{ forloop.counter0 }}" type="checkbox" name="rotation-slider-toggle" />
                                <label for="rotation-slider-toggle-{{ forloop.counter0 }}"><i class="ph ph-arrows-clockwise"></i></label>
                                <div class="img-controls">
                                    <div class="zoom-control">
                                        {# tablet/desktop: zoom slider #}
                                        <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>
                                    </div>
                                    <div class="rotation-control">
                                        {# tablet/desktop: rotation slider #}
                                        <input data-iiif-target="rotation" data-action="iiif#handleDeepZoom" id="rotation-{{ forloop.counter0 }}" type="range" name="rotation-slider" min="0" max="360" value="{{ image_info.rotation }}" step="1" />
                                        <label for="rotation-{{ forloop.counter0 }}" data-iiif-target="rotationLabel" class="sr-only"></label>
                                        <span><input class="rotation" data-action="iiif#handleDeepZoom input->iiif#editRotation" data-iiif-target="rotationEdit" value="{{ image_info.rotation }}" type="number" min="0" max="360" />&deg;</span>
                                    </div>
                                    {# mobile: zoom/rotate toggle #}
                                    <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>
                                {% if not edit_mode %}
                                    {# enlarge button #}
                                    <button class="enlarge-button" type="button"><span class="sr-only">Enlarge image</span></button>
                                {% endif %}
                            {% endif %}
                        </div>
                        <div class="deep-zoom-container">
                            {% with deg=image_info.rotation|stringformat:"i" %}
                                {% with rotation="rotation:degrees="|add:deg %}
                                    <img class="iiif-image" data-iiif-target="image" data-annotation-target="image" src="{{ image_info.image|iiif_image:"size:width=500"|iiif_image:rotation }}" alt="{{ image_info.label }}" title="{{ image_info.label }}" loading="lazy"
                                         sizes="(max-width: 1440px) 50vw, 94vw"
                                         srcset="{{ image_info.image|iiif_image:"size:width=500"|iiif_image:rotation }} 500w,
                                                 {{ image_info.image|iiif_image:"size:width=640"|iiif_image:rotation }} 640w,
                                                 {{ image_info.image|iiif_image:"size:width=1440"|iiif_image:rotation }} 1440w">
                                {% endwith %}
                                <div class="osd"
                                     data-iiif-target="osd"
                                     data-iiif-url="{{ image_info.image.info }}"
                                     data-rotation="{{ deg }}">
                                </div>
                            {% endwith %}
                        </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 == "transcribing" %}
                        <div class="annotate transcription"
                             dir="rtl"
                             data-manifest="{% url 'corpus-uris:document-manifest' document.pk %}"
                             data-ittpanel-target="transcription"
                        >
                            {% if forloop.first and not annotation_config.line_mode %}
                                {% include "corpus/snippets/transcription_instructions.html" %}
                            {% endif %}
                        </div>
                    {% else %}
                        {% if forloop.first %}
                            <span data-transcription-target="transcriptionFullLabel" class="current-transcription{% if document.digital_editions.count > 1 %} multiple{% endif %}">
                                {{ document.digital_editions.0.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-ittpanel-target="transcription"
                                         data-label="{{ edition.display }}"
                                         lang="{{ document.primary_lang_code|default:"" }}"
                                         dir="rtl"
                                         {% 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>
                <div class="translation-panel">
                    {% if edit_mode == "translating" %}
                        <div class="annotate translation"
                             data-ittpanel-target="translation"
                             dir="{{ annotation_config.text_direction|default:"ltr" }}"
                             data-manifest="{% url 'corpus-uris:document-manifest' document.pk %}"
                        >
                            {% if forloop.first %}
                                {% include "corpus/snippets/transcription_instructions.html" %}
                            {% endif %}
                        </div>
                    {% else %}
                        {% if forloop.first %}
                            <span data-transcription-target="translationFullLabel" class="current-translation{% if document.digital_editions.count > 1 %} multiple{% endif %}">
                                {{ document.default_translation.display|safe }}
                            </span>
                        {% endif %}
                        {% if not image_info.excluded %}
                            <div class="translations">
                                {# display translation in chunks by index #}
                                {% for translation in document.digital_translations.all %}
                                    <div class="translation tr-{{ translation.pk }}"
                                         data-ittpanel-target="translation"
                                         data-label="{{ translation.display }}"
                                         {% if translation.source.languages.exists %}lang="{{ translation.source.languages.all.0.code }}" dir="{{ translation.source.languages.all.0.direction }}"{% else %}dir="ltr"{% endif %}
                                    >
                                        {% for html_section in translation.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" %}
                {# empty divs for grid completion #}
                <div></div>
                <div></div>
            {% endif %}
        </div>
    </section>
{% endif %}