{% extends "default.html" %}
{% block title %}Picture | gigadata{% endblock %}
{% block content %}
    <x-frame style="--width: 768px">
        <h1>{{ resource.title }}</h1>
        <p>{{ resource.description }}</p>
        <p>{{ resource.file_format }}</p>
        <div id="annotation-zone">
            <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
            {% for region in resource.regions %}
                {% if region.json.type == "bbox" %}
                    <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                        <rect x="{{ region.json.shape.x * size[0] }}"
                              y="{{ region.json.shape.y * size[1] }}"
                              width="{{ region.json.shape.width * size[0] }}"
                              height="{{ region.json.shape.height * size[1] }}"
                              fill="none" class="shape-bbox shape"
                        ></rect>
                    </svg>
                {% elif region.json.type == "polygon" %}
                    <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                        <polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                        {% set top = region.json.shape | sort(attribute='y') | last %}
                        {% set left = region.json.shape | sort(attribute='x') | first %}
                        {% set bottom = region.json.shape | sort(attribute='y') | first %}
                        {% set right = region.json.shape | sort(attribute='x') | last %}
                        {% set centre_x = (left.x + right.x) / 2 %}
                        {% set centre_y = (top.y + bottom.y) / 2 %}
                        <foreignObject height="100%" width="100%" x="{{ centre_x * size[0] }}" y="{{ centre_y * size[1] }}">
                            <div class="shape-label">
                                {{ region.object_id }}
                            </div>
                        </foreignObject>
                    </svg>
                {% elif region.json.type == "polyline" %}
                    <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                        <polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                    </svg>
                {% elif region.json.type == "point" %}
                    <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                        <circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
                    </svg>
                {% endif %}
            {% endfor %}
        </div>
        <x-buttonbox>
            <label>
                <input type="checkbox" id="show-shapes" checked>
                Show shapes
            </label>
            <label>
                <input type="checkbox" id="show-objects" checked>
                Show objects
            </label>
        </x-buttonbox>
        <p>
            <a href="{{ resource.origin_url }}">Original source</a> |
            <a href="/raw/picture/{{ resource.id }}">View</a> |
            <a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> |
            <a href="/picture/{{ resource.id }}/annotate">Annotate</a>
        </p>
    </x-frame>
{% endblock %}