{% extends "default.html" %}

{% block nav_title %}{{ resource.title }}{% endblock %}
{% block title %}Annotating picture {{ resource.title }} | {{ site_name }}{% endblock %}
{% set back_url = "/picture/" + resource.id|string %}
{% set fixed_content_area = true %}

{% block content %}
    <style>
        py-script {
            display: none;
        }
        /* Full PyScript style is too much, but we still need to hide the Python code */
    </style>
    <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>

    <x-frame id="annotation-main-area">
        <x-hbox id="annotation-controls">
            <x-buttonbox id="shape-selector">
                <button class="button-flat" title="selection" id="select">
                    <iconify-icon icon="mdi:cursor-default"></iconify-icon>
                </button>
                <button class="button-flat" title="rectangle" id="shape-bbox">
                    <iconify-icon icon="mdi:square"></iconify-icon>
                </button>
                <button class="button-flat" title="polygon" id="shape-polygon">
                    <iconify-icon icon="mdi:pentagon"></iconify-icon>
                </button>
                <button class="button-flat" title="polyline" id="shape-polyline">
                    <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                </button>
                <button class="button-flat" title="point" id="shape-point">
                    <iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
                </button>
                <x-hbox id="annotation-zoom-controls">
                    <span id="zoom-indicator">1.000x</span>
                    <button class="button-flat" title="zoom out" id="zoom-out">
                        <iconify-icon icon="mdi:magnify-minus"></iconify-icon>
                    </button>
                    <input type="range" id="zoom-slider" min="-4" max="6" step="0.25" value="0" aria-label="Zoom">
                    <button class="button-flat" title="zoom in" id="zoom-in">
                        <iconify-icon icon="mdi:magnify-plus"></iconify-icon>
                    </button>
                </x-hbox>
            </x-buttonbox>
            <x-buttonbox style="display: none;" id="shape-options">
                <button class="button-flat" title="cancel" id="annotation-cancel">
                    <iconify-icon icon="mdi:close"></iconify-icon>
                </button>
                <button class="button-flat" title="apply" id="annotation-confirm">
                    <iconify-icon icon="mdi:check"></iconify-icon>
                </button>
                <button class="button-flat" title="remove last point" id="annotation-backspace">
                    <iconify-icon icon="mdi:backspace"></iconify-icon>
                </button>
                <button class="button-flat" title="delete shape" id="annotation-delete">
                    <iconify-icon icon="mdi:delete"></iconify-icon>
                </button>
                <button class="button-flat" title="select previous shape" id="annotation-previous">
                    <iconify-icon icon="mdi:chevron-left"></iconify-icon>
                </button>
                <button class="button-flat" title="select next shape" id="annotation-next">
                    <iconify-icon icon="mdi:chevron-right"></iconify-icon>
                </button>
                <div class="flexible-space"></div>
                <button id="annotation-save">
                    Save
                </button>
            </x-buttonbox>
        </x-hbox>
        <div id="annotation-zoom-container">
            <div id="annotation-zone">
                <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                    <input type="text" id="filter-object-types" placeholder="Search" aria-label="Search object types">
                    <x-vbox id="object-types-content"></x-vbox>
                </x-vbox>
                <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                <div id="annotation-ruler-vertical" class="annotation-ruler"></div>
                <div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
                <div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
                <div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
            </div>
        </div>
        <p id="annotation-helper-message">Please wait for Python to load...</p>
    </x-frame>
    <input type="hidden" id="resource-id" name="resource-id" value="{{ resource.id }}">
    <script type="mpy" src="/static/picture-annotation.py"></script>
{% endblock %}