{% extends "base.html" %}
{% load static i18n %}

{% get_current_language as LANGUAGE_CODE %}


{% block main %}

<div id="corpus-text-detail">

    <!-- Content -->
    <section id="corpus-text-detail-content"{% if not object.has_image and not object.is_codex %} class="full"{% endif %}>

        {% if not object.public_review_approved %}
            <div id="corpus-text-detail-content-notyetapproved">
                <i class="fas fa-exclamation-triangle"></i>
                {% translate "This text is not yet approved, meaning it's not visible to public users." %}
                {% translate "Only authenticated users (admins and contributors) can see texts before they're approved." %}
            </div>
        {% endif %}

        <div id="corpus-text-detail-content-title">
            {{ object.title }}

            {% if user.is_admin %}
                <!-- Admin link to this item -->
                <a id="corpus-text-detail-content-title-adminlink" href="{% url 'admin:corpus_text_change' object.id %}" title="View this Corpus Text in the admin dashboard" target="_blank"><i class="fas fa-cog"></i></a>
            {% endif %}
        </div>

        <ul id="corpus-text-detail-content-tabs">
            <li id="details"><i class="fas fa-align-left"></i> {% translate 'Details' %}</li>
            {% if object.count_text_folios > 1 %}<li id="folios"><i class="fas fa-scroll"></i> {% translate 'Folios' %}</li>{% endif %}
            {% if object.is_codex %}<li id="codex"><i class="fas fa-th"></i> {% translate 'Codex' %}</li>{% endif %}
            {% if object.has_textfoliotag %}<li id="tags"><i class="fas fa-hashtag"></i> {% translate 'Tags' %}</li>{% endif %}
            {% if object.has_transliteration %}<li id="transliteration"><i class="fas fa-font"></i> {% translate 'Transliterations' %}</li>{% endif %}
            {% if object.has_transcription %}<li id="transcription"><i class="fas fa-pen-fancy"></i> {% translate 'Transcriptions' %}</li>{% endif %}
            {% if object.has_translation %}<li id="translation"><i class="fas fa-globe-europe"></i> {% translate 'Translations' %}</li>{% endif %}
            {% if object.has_palaeography %}<li id="palaeography"><i class="fas fa-pen-nib"></i> {% translate 'Palaeography' %}</li>{% endif %}
            {% if object.has_toponym_coordinates %}<li id="map"><i class="fas fa-map"></i> {% translate 'Map' %}</li>{% endif %}
            {% if object.seals.all %}<li id="seals"><i class="fas fa-stamp"></i> {% translate 'Seals' %}</li>{% endif %}
        </ul>

        <article class="tabbed" id="corpus-text-detail-content-details">
            <div class="tabbed-title">{% translate 'Details' %}</div>

            <!-- Download Data -->
            <div style="float: {% if LANGUAGE_CODE == 'en' %}right{% else %}left{% endif %};">
                {% include 'corpus/snippets/downloaddata.html' with downloaddata_text_ids=object.id data_description='the current text' %}
            </div>

            {% for data_item in data_items %}

                {% if data_item.section_header %}
                    {% if forloop.counter > 1 %}</div>{% endif %}
                    <div class="corpus-text-detail-content-details-datagroup">
                    {% if LANGUAGE_CODE == 'en' %}
                        <h3>{{ data_item.section_header }}</h3>
                    {% elif LANGUAGE_CODE == 'fa' %}
                        <h3 dir="rtl">{{ data_item.section_header_fa }}</h3>
                    {% endif %}

                {% elif data_item.html %}
                    <div class="corpus-text-detail-content-details-datagroup-datahtml">
                        {{ data_item.html | safe }}
                    </div>

                {% elif data_item.value %}
                    <div class="corpus-text-detail-content-details-datagroup-dataitem">
                        <label>
                            {% if LANGUAGE_CODE == 'en' %}
                                {{ data_item.label }}
                            {% elif LANGUAGE_CODE == 'fa' %}
                                {{ data_item.label_fa }}
                            {% endif %}
                        </label>
                        <span>{{ data_item.value | safe }}</span>
                    </div>
                {% endif %}

                {% if forloop.last %}</div>{% endif %}

            {% endfor %}
        </article>

        {% if object.is_codex %}
            <article class="tabbed" id="corpus-text-detail-content-codex">
                <div class="tabbed-title">{% translate 'Codex' %}</div>
                {% if codex_pagination_options %}
                    <div id="codex-pagination">
                        <form action="" method="get">
                            <input type="hidden" name="tab" value="codex">
                            <label for="codex-pagination-select">View pages:</label>
                            <select id="codex-pagination-select" name="codex_pagination">
                                {% for option in codex_pagination_options %}
                                    <option value="{{ option.value }}">{{ option.label }}</option>
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                {% endif %}
                <div class="codex-thumbnails">
                    {% for image in codex_images %}
                        <div class="codex-thumbnails-item" data-src="{% if object.is_codex_iiif %}{{ image.image_large }}{% else %}{{ object.codex_images_url }}{{ image }}{% endif %}" data-index="{{ forloop.counter }}">
                            <div class="codex-thumbnails-item-name">{{  codex_pagination_pagecountstart|add:forloop.counter }}</div>
                            <img src="{% if object.is_codex_iiif %}{{ image.image_thumbnail }}{% else %}{{ object.codex_images_thumbnails_url }}{{ image }}{% endif %}" alt="Manuscript page">
                        </div>
                    {% endfor %}
                </div>
            </article>
        {% endif %}

        <article class="tabbed" id="corpus-text-detail-content-folios">
            <div class="tabbed-title">{% translate 'Folios' %}</div>
            {% for text_folio in text_folios %}
                <div class="corpus-text-detail-content-folios-folio" data-folio="{{ text_folio.id }}">
                    <!-- Title -->
                    <div class="corpus-text-detail-content-folios-folio-title">
                        {{ forloop.counter }}. {{ text_folio.name_short }}
                    </div>
                    <!-- Image -->
                    <div class="corpus-text-detail-content-folios-folio-imagecontainer" style="background-image: url({% if text_folio.image_small %}{{ text_folio.image_small.url }}); cursor: pointer;{% else %}{% static 'images/noimagefound.jpg' %});{% endif %} background-color: #CCC; background-position: center; background-repeat: no-repeat; background-size: cover;">
                    </div>
                    <!-- Links -->
                    <div class="corpus-text-detail-content-folios-folio-links">
                        <div data-tab="tags"><i class="fas fa-hashtag"></i> {% translate 'Tags' %}</div>
                        {% if text_folio.transcription %}
                            <div data-tab="transcription"><i class="fas fa-pen-fancy"></i> {% translate 'Transcription' %}</div>
                        {% endif %}
                        {% if text_folio.translation %}
                            <div data-tab="translation"><i class="fas fa-globe-europe"></i>{% translate 'Translation' %}</div>
                        {% endif %}
                        {% if text_folio.transliteration %}
                            <div data-tab="transliteration"><i class="fas fa-font"></i>{% translate 'Transliteration' %}</div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </article>

        {% if object.has_textfoliotag %}
            <article class="tabbed" id="corpus-text-detail-content-tags">
                <div class="tabbed-title">{% translate 'Tags' %}</div>

                <!-- Options -->
                <div class="corpus-text-detail-content-options">
                    {% include "corpus/snippets/folio-select.html" %}
                </div>

                {% if user.is_admin %}
                    <div id="corpus-text-detail-content-tags-textfoliotag-linktranstexttotag">
                        <!-- Content filled dynamically by JS -->
                    </div>
                {% endif %}

                {% for text_folio in text_folios %}
                    <div class="corpus-text-detail-content-tags-folio" data-folio="{{ text_folio.id }}">
                        {% for text_folio_tag in text_folio.text_folio_tags.all %}

                            <!-- Add category name as subheading when it changes -->
                            {% ifchanged text_folio_tag.tag.category %}
                                <h3>{{ text_folio_tag.tag.category.name }}</h3>
                            {% endifchanged %}

                            <!-- Display each text folio tag -->
                            <div class="corpus-text-detail-content-tags-folio-tagcategory-tag" data-textfoliotag="{{ text_folio_tag.id }}">
                                <!-- Hashtag icon -->
                                <i class="fas fa-hashtag"></i>
                                <!-- Name -->
                                <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-name">
                                    {{ text_folio_tag.tag.name }}
                                </div>
                                <!-- Details -->
                                {% if text_folio_tag.details %}
                                    <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-details">
                                        {{ text_folio_tag.details }}
                                    </div>
                                {% endif %}
                                <!-- Links -->
                                <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-links">
                                    {% if text_folio_tag.is_in_text_folio_transcription %}
                                        <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-links-link" data-trans="transcription">
                                            <i class="fas fa-pen-fancy"></i> {% translate 'View in Transcriptions' %}
                                        </div>
                                    {% endif %}
                                    {% if text_folio_tag.is_in_text_folio_translation %}
                                        <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-links-link" data-trans="translation">
                                            <i class="fas fa-globe-europe"></i> {% translate 'View in Translations' %}
                                        </div>
                                    {% endif %}
                                    {% if text_folio_tag.is_in_text_folio_transliteration %}
                                        <div class="corpus-text-detail-content-tags-folio-tagcategory-tag-links-link" data-trans="transliteration">
                                            <i class="fas fa-font"></i> {% translate 'View in Transliterations' %}
                                        </div>
                                    {% endif %}
                                </div>
                                <!-- View Tag in the admin dashboard (Edit/Delete) -->
                                <a href="{% url 'admin:corpus_textfoliotag_change' text_folio_tag.id %}" class="corpus-text-detail-content-tags-folio-tagcategory-tag-admin" title="View this Tag in the admin dashboard" target="_blank">
                                    <i class="fas fa-cog"></i>
                                </a>
                            </div>

                        {% empty %}
                            <div class="corpus-text-detail-content-tags-folio-notags">
                                {% translate "This folio doesn't have any tags yet. Please check back soon." %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}

            </article>
        {% endif %}

        {% if object.has_transliteration %}
            <article class="tabbed" id="corpus-text-detail-content-transliteration" data-trans="transliteration">
                <div class="tabbed-title">{% translate 'Transliteration' %}</div>

                {% include "corpus/snippets/foliotext-options.html" with current_tab='transliteration' %}

                {% for text_folio in text_folios %}
                    {% if text_folio.transliteration_text_lines %}
                        <div class="corpus-text-detail-content-transliteration-folio-lines folio-lines" data-folio="{{ text_folio.id }}">
                            {% include "corpus/snippets/foliotext-lines.html" with trans_text_lines=text_folio.transliteration_text_lines %}
                        </div>
                    {% endif %}
                {% endfor %}
            </article>
        {% endif %}

        {% if object.has_transcription %}
            <article class="tabbed" id="corpus-text-detail-content-transcription" data-trans="transcription">
                <div class="tabbed-title">{% translate 'Transcription' %}</div>

                {% include "corpus/snippets/foliotext-options.html" with current_tab='transcription' %}

                {% for text_folio in text_folios %}
                    {% if text_folio.transcription_text_lines %}
                        <div class="corpus-text-detail-content-transcription-folio-lines folio-lines" data-folio="{{ text_folio.id }}" data-showfoliolinedraw="{% if user.is_admin and text_folio.image %}1{% else %}0{% endif %}">
                            {% include "corpus/snippets/foliotext-lines.html" with trans_text_lines=text_folio.transcription_text_lines %}
                        </div>
                    {% endif %}
                {% endfor %}
            </article>
        {% endif %}

        {% if object.has_translation %}
            <article class="tabbed" id="corpus-text-detail-content-translation" data-trans="translation">
                <div class="tabbed-title">{% translate 'Translation' %}</div>

                {% include "corpus/snippets/foliotext-options.html" with current_tab='translation' %}

                {% for text_folio in text_folios %}
                    {% if text_folio.translation_text_lines %}
                        <div class="corpus-text-detail-content-translation-folio-lines folio-lines" data-folio="{{ text_folio.id }}">
                            {% include "corpus/snippets/foliotext-lines.html" with trans_text_lines=text_folio.translation_text_lines %}
                        </div>
                    {% endif %}
                {% endfor %}
            </article>
        {% endif %}

        {% if object.has_palaeography %}
            <article class="tabbed" id="corpus-text-detail-content-palaeography" data-trans="palaeography">
                <div class="tabbed-title">{% translate 'Palaeography' %}</div>
                {% for text_folio in text_folios %}
                    {% if text_folio.palaeography %}
                        <div class="corpus-text-detail-content-palaeography-folio" data-folio="{{ text_folio.id }}">
                            {{ text_folio.palaeography | safe }}
                        </div>
                    {% endif %}
                {% endfor %}
            </article>
        {% endif %}

        {% if object.has_toponym_coordinates %}
            <article class="tabbed" id="corpus-text-detail-content-map">
                <div class="tabbed-title">{% translate 'Map' %}</div>
                <p>
                    {% translate 'This map displays the place names identified by the Invisible East Team related to this corpus text. If you click on a pin, you can see all the texts in our corpus which mention this toponym. Please bear in mind that the exact geographical location of origin is not always possible to establish. It is, therefore, only an approximation.' %}
                </p>
                <p>
                    {% translate 'You can also view' %} <a href="{% url 'corpus:map-iedctoponyms' %}">{% translate 'a full map of all toponyms within the Invisible East Digital Corpus' %}</a>{% translate 'afterlink-detailtotoponyms' %}
                </p>
                {% include "corpus/snippets/leaflet.html" with map_id='corpus-text-detail-content-map-iedctoponyms' %}
            </article>
        {% endif %}

        {% if object.seals.all %}
            <article class="tabbed" id="corpus-text-detail-content-seals">
                <div class="tabbed-title">Seals</div>
                {% for seal in object.seals.all %}
                    <div class="corpus-text-detail-content-seals">
                        <!-- Title -->
                        <div class="corpus-text-detail-content-seals-title">{% translate 'Seal' %} {{ forloop.counter }}</div>
                        <!-- Image -->
                        {% if seal.image %}
                            <a href="{{ seal.image.url }}" class="corpus-text-detail-content-seals-imagecontainer">
                                <img src="{{ seal.image_small.url }}" alt="Photograph of this seal">
                            </a>
                        {% endif %}
                        <!-- Data -->
                        {% if object.primary_language.name != 'Bactrian' %}
                            {% if seal.type %}
                                <label>{% translate 'Type' %}</label><div>{{ seal.type }}</div>
                            {% endif %}
                            {% if seal.details %}
                                <label>{% translate 'Details' %}</label><div>{{ seal.details | safe | linebreaks }}</div>
                            {% endif %}
                            {% if seal.inscription %}
                                <label>{% translate 'Inscription' %}</label><div>{{ seal.inscription | safe | linebreaks }}</div>
                            {% endif %}
                            {% if seal.measurements %}
                                <label>{% translate 'Measurements' %}</label><div>{{ seal.measurements | safe | linebreaks }}</div>
                            {% endif %}
                            {% if seal.descriptions_html_list %}
                                <label>{% translate 'Descriptions' %}</label><div>{{ seal.descriptions_html_list | safe }}</div>
                            {% endif %}
                            {% if seal.colours_html_list %}
                                <label>{% translate 'Colours' %}</label><div>{{ seal.colours_html_list | safe }}</div>
                            {% endif %}
                            {% if seal.imprints_html_list %}
                                <label>{% translate 'Seal Imprints' %}</label><div>{{ seal.imprints_html_list | safe }}</div>
                            {% endif %}
                        {% endif %}
                    </div>
                {% endfor %}
            </article>
        {% endif %}

    </section><!--

    Image
    -->{% if object.has_image or object.is_codex %}<section id="corpus-text-detail-images">
        <!-- Image Controls -->
        <div id="corpus-text-detail-images-controls">
            {% if object.is_codex %}
                <!-- Previous Image -->
                <div id="corpus-text-detail-images-controls-codeximagenav-previous" class="corpus-text-detail-images-controls-item" title="{% translate 'Previous Image' %}"><i class="fas fa-arrow-left"></i></div>
                <!-- Next Image -->
                <div id="corpus-text-detail-images-controls-codeximagenav-next" class="corpus-text-detail-images-controls-item" title="{% translate 'Next Image' %}"><i class="fas fa-arrow-right"></i></div>
            {% elif object.has_image %}
                <!-- Choose Folio/Image -->
                <div id="corpus-text-detail-images-controls-chooseimage" class="corpus-text-detail-images-controls-item">
                    <label>{% translate 'Folio' %}:</label>
                    <select {% if object.count_text_folios < 2 %} disabled{% endif %}>
                        {% for text_folio in text_folios %}
                            <option value="{{ text_folio.id }}">{{ text_folio.name_short }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Only Show Certain Image Parts -->
                <div id="corpus-text-detail-images-controls-onlyshowcertainimageparts" class="corpus-text-detail-images-controls-item">
                    <label>{% translate 'Only show' %}:</label>
                    <select>
                        <option value="">-- {% translate 'Please select' %} --</option>
                        <optgroup label="Lines of Text">
                            <option value="lines-transcription">Transcription</option>
                        </optgroup>
                        <optgroup label="Tags">
                            <option value="tags-all">All tags</option>
                            {% for category in text_folio_tag_categories %}
                                <option value="tags-{{ category.id }}">{{ category.name }}</option>
                            {% endfor %}
                        </optgroup>
                    </select>
                </div>
            {% endif %}
            <!-- Reset Viewer -->
            <div id="corpus-text-detail-images-controls-reset" class="corpus-text-detail-images-controls-item" title="{% translate 'Reset Image' %}"><i class="fas fa-sync-alt"></i></div>
            <!-- Download Image -->
            <div id="corpus-text-detail-images-controls-downloadimage" class="corpus-text-detail-images-controls-item" title="{% translate 'Download Image' %}">
                <a href="#" title="Download Image" download><i class="fas fa-download"></i></a>
            </div>
            {% if object.has_image %}
                <!-- Show All Parts -->
                <div id="corpus-text-detail-images-controls-revealparts" class="corpus-text-detail-images-controls-item" title="{% translate 'Reveal Parts on Image' %}"><i class="fas fa-border-none"></i></div>
            {% endif %}
            <!-- Rotate Image Anticlockwise -->
            <div id="corpus-text-detail-images-controls-rotate-anticlockwise" class="corpus-text-detail-images-controls-item" title="{% translate 'Rotate Image Anticlockwise' %}"><i class="fas fa-undo-alt"></i></div>
            <!-- Rotate Image Clockwise -->
            <div id="corpus-text-detail-images-controls-rotate-clockwise" class="corpus-text-detail-images-controls-item" title="{% translate 'Rotate Image Clockwise' %}"><i class="fas fa-redo-alt"></i></div>
            <!-- Fullscreen Image -->
            <div id="corpus-text-detail-images-controls-rotate-fullscreen" class="corpus-text-detail-images-controls-item" title="{% translate 'Fullscreen' %}"><i class="fas fa-expand"></i></div>
        </div>
        <!-- Images (either Codex images or Text Folio images, can't be both) -->
        <div id="corpus-text-detail-images-container" dir="ltr">
            {% if object.is_codex %}
                <!-- Codex images -->
                <div id="corpus-text-detail-images-image-codex" class="corpus-text-detail-images-image active">
                    <div class="corpus-text-detail-images-image-rotatelayer">
                        <!-- img src set dynamically via JS -->
                        <img id="corpus-text-detail-images-image-codex-img" alt="Codex image">
                    </div>
                </div>
            {% else %}
                <!-- Text Folio Images -->
                {% for text_folio in text_folios %}
                    {% if text_folio.image %}
                        <div id="corpus-text-detail-images-image-{{ text_folio.id }}" class="corpus-text-detail-images-image">
                            {% if text_folio.image_hide %}
                                <div class="corpus-text-detail-images-image-hidden">
                                    <p>
                                        We are currently unable to share this image publicly.
                                    </p>
                                    <p>
                                        Please contact us if you require access to this image and we can advise further.
                                    </p>
                                </div>
                            {% else %}
                                <div class="corpus-text-detail-images-image-rotatelayer">
                                    <div class="corpus-text-detail-images-image-drawlayer">
                                        <img src="{{ text_folio.image_medium.url }}" alt="{{ text_folio }}">
                                        <div class="corpus-text-detail-images-image-parts">
                                            <!--
                                                Add TextFolioTag image parts
                                                Note: Lines of Text image parts are added via JS using data in .folio-lines-line elements
                                            -->
                                            {% for tag in text_folio.text_folio_tags.all %}
                                                {% if tag.image_part_left and tag.image_part_top and tag.image_part_width and tag.image_part_height %}
                                                    <div class="corpus-text-detail-images-image-parts-part" data-textfoliotag="{{ tag.id }}" data-category="{{ tag.tag.category.id }}" style="left: {{ tag.image_part_left }}px; top: {{ tag.image_part_top }}px; width: {{ tag.image_part_width }}px; height: {{ tag.image_part_height }}px;"></div>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
        {% if object.image_credit %}
            <div id="corpus-text-detail-images-credit">
                {% translate 'Images courtesy of' %} {{ object.image_credit }}
            </div>
        {% endif %}
    </section>{% endif %}

    {% if user.is_admin %}

        <!-- Tag Manager (only display for admins) -->
        <!-- Show -->
        <div id="corpus-text-detail-content-tags-textfoliotag-form-show">
            <i class="fas fa-hashtag"></i> {% translate 'Tag Manager' %}
        </div>
        <!-- Form -->
        <form id="corpus-text-detail-content-tags-textfoliotag-form" name="textfoliotag-form" method="POST" action="{% url 'corpus:textfoliotag-create' %}" novalidate>
            <!-- Security CSRF token -->
            {% csrf_token %}

            <!-- Hidden fields -->
            <!-- Text -->
            <input type="hidden" name="text" value="{{ object.id }}">
            <!-- Text Folio (value set in detail.js) -->
            <input type="hidden" name="textfolio" value="">
            <!-- Image Cropped (value set in detail.js) -->
            <input type="hidden" name="image_part_left" value="">
            <input type="hidden" name="image_part_top" value="">
            <input type="hidden" name="image_part_width" value="">
            <input type="hidden" name="image_part_height" value="">
            <!-- Link Trans Text To Tag Data (value set in detail.js) -->
            <input type="hidden" name="linktranstexttotag" value="">

            <!-- Close Tag Manager -->
            <i id="corpus-text-detail-content-tags-textfoliotag-form-close" class="fas fa-times"></i>

            <!-- Title -->
            <div id="corpus-text-detail-content-tags-textfoliotag-form-title">
                <i class="fas fa-hashtag"></i> {% translate 'Tag Manager' %}
            </div>

            <div class="fieldgroup">
                <!-- Tag Category -->
                <div>
                    <label>{% translate 'Tag Category' %} <a href="{% url 'admin:corpus_sltextfoliotagcategory_changelist' %}" title="View Tag Categories in the admin dashboard" target="_blank"><i class="fas fa-cog"></i></a></label>
                    <select name="category" required>
                        <option value="">-- {% translate 'Please select' %} --</option>
                        {% for category in text_folio_tag_categories %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Tag Search -->
                <div>
                    <label>{% translate 'Tag Search' %}</label>
                    <input type="text" name="tag_search" title="Search" placeholder="Search for an existing tag in the below list">
                </div>
            </div>

            <div class="fieldgroup">
                <!-- Tag (existing) -->
                <div>
                    <label>{% translate 'Tag' %} <a href="{% url 'admin:corpus_sltextfoliotag_changelist' %}" title="View Tags in the admin dashboard" target="_blank"><i class="fas fa-cog"></i></a></label>
                    <select name="tag_existing">
                        <option value="">-- {% translate 'Please select' %} --</option>
                        {% for tag in text_folio_tags %}
                            <option value="{{ tag.id }}" data-tagcategory="{{ tag.category.id }}">{{ tag.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Tag (new) -->
                <div>
                    <label><span class="hidden">{% translate 'Create a new tag' %}</span></label>
                    <input type="text" name="tag_new" title="Create a new tag" placeholder="If no existing tag is suitable, type a new tag here to create it">
                </div>
            </div>

            <!-- Tag Details -->
            <div>
                <label>{% translate 'Tag Details' %}</label>
                <input type="text" name="details" title="Tag Details" placeholder="Optional. Provide more details about this tag if needed">
            </div>
            {% if object.has_image %}
                <!-- Draw on Image -->
                <div>
                    <label>{% translate 'Draw on Image' %}</label>
                    <input type="checkbox" id="corpus-text-detail-content-tags-textfoliotag-form-draw-start" title="Click to start drawing tag on image"> <i class="fas fa-pencil-alt"></i>
                </div>
            {% endif %}
            <!-- Submit form button -->
            <button type="submit"><i class="fas fa-check-circle"></i> {% translate 'Save Tag' %}</button>
        </form>
    {% endif %}

</div>

<!-- JS -->

<!-- Panzoom -->
<!-- https://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html -->
<!-- https://github.com/timmywil/panzoom -->
<script src="{% static 'js/panzoom.min.js' %}"></script>

<!-- Custom JS -->
<script>
    $(document).ready(function(){
        {% include "corpus/js/detail.js" %}

        {% if object.has_toponym_coordinates %}
            {% include "corpus/js/map.js" with map_id='corpus-text-detail-content-map-iedctoponyms' toponyms_list=object.toponyms.all %}
        {% endif %}
    });
</script>

{% endblock %}