{% extends "default.html" %}
{% block title %}Picture {{ resource.title }} | gigadata{% endblock %}
{% macro shape_label(x, y, text) %}
    {% if text %}
        <a class="shape-label" style="left: {{ x * 100 }}%; top: {{ y * 100 }}%" href="/object/{{ text }}">
            {{ text }}
        </a>
    {% endif %}
{% endmacro %}
{% block content %}
    <x-frame style="--width: 768px">
        <h1>{{ resource.title }}</h1>
        <p>by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></p>
        <p>{{ resource.description }}</p>
        {% if resource.replaced_by %}
            <h2>Obsolete</h2>
            <p>
                This picture has been replaced by <a href="/picture/{{ resource.replaced_by.id }}">{{ resource.replaced_by.title }}</a>.
            </p>
            {% if have_permission %}
                <form method="POST" action="/picture/{{ resource.id }}/remove-replacement">
                    <button class="button-flat" type="submit">Remove replacement</button>
                </form>
            {% endif %}
        {% endif %}
        <p>
            <a href="{{ resource.origin_url }}">Original source</a> |
            <a href="/raw/picture/{{ resource.id }}">View</a> |
            <a href="/picture/{{ resource.id }}/get-annotations">Download annotations</a> |
            <a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> {% if have_permission %}|
            <a href="/picture/{{ resource.id }}/annotate">Annotate</a> |
            <a href="/picture/{{ resource.id }}/put-annotations-form">Submit JSON annotations</a> |
            <a href="/picture/{{ resource.id }}/edit-metadata">Edit title or description</a>{% endif %} {% if current_user %}|
            <a href="/picture/{{ resource.id }}/copy">Copy</a>{% endif %}
        </p>
        {% if have_permission %}
            <details>
                <summary>Delete</summary>
                <a href="/picture/{{ resource.id }}/delete">Delete</a>
            </details>
        {% endif %}
        <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.w * size[0] }}"
                              height="{{ region.json.shape.h * size[1] }}"
                              fill="none" class="shape-bbox shape"
                        ></rect>
                        {% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
                        {% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
                    </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 %}
                    </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>
                        {# Median point #}
                        {% set centre_x = region.json.shape | map(attribute="x") | median %}
                        {% set centre_y = region.json.shape | map(attribute="y") | median %}
                    </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 %}
                {{ shape_label(centre_x, centre_y, region.object_id) }}
            {% 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>
        {% set licences = resource.licences | map(attribute="licence") | list %}
        {% set contains = resource.regions | map(attribute="object_id") | set | select | sort | list %}
        <x-vbox>
            <div class="icon-explainer">
                <span>Type</span>
                <span>{{ resource.nature.id }}</span>
                <span>File format</span>
                <span>{{ resource.file_format }}</span>
                <span>Size</span>
                <span>{{ size[0] }}&times;{{ size[1] }}</span>
                <span>Number of regions</span>
                <span>{{ resource.regions | length }}</span>
                <span>Number of labelled regions</span>
                <span>{{ resource.regions | selectattr("object_id") | list | length }}</span>
                <span>Date uploaded</span>
                <span>{{ resource.timestamp }}</span>
            </div>
            Contains objects: {{ contains | join(", ") }}
            <x-hbox style="justify-content: space-between">
                <small class="picture-licensing-info">
                    Available under:
                    {% for licence in licences %}
                        <a href="{{ licence.info_url }}" target="_blank">
                            {{ licence.title }}
                        </a>
                        {% if not loop.last %}, {% endif %}
                    {% endfor %}
                </small>
                <x-vbox class="picture-licence-logos">
                    {% for licence in licences %}
                        {% if licence.logo_url %}
                            {% if licence.info_url %}
                                <a href="{{ licence.info_url }}" target="_blank" tabindex="-1">
                                    {# An equivalent link already exists, only one is focusable #}
                                    <img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
                                </a>
                            {% else %}
                                <img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </x-vbox>
            </x-hbox>
            <h2>Copies</h2>
            <ul class="thumbnail-list">
                {% for copy in resource.copies %}
                    <li>
                        <a href="/picture/{{ copy.id }}">
                            <div class="annotation-zone">
                                <img src="/raw/picture/{{ copy.id }}" alt="{{ copy.title }}">

                                {% for region in copy.regions %}
                                    {% if region.json.type == "bbox" %}
                                        <svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
                                            <rect x="{{ region.json.shape.x * copy.width }}"
                                                  y="{{ region.json.shape.y * copy.height }}"
                                                  width="{{ region.json.shape.w * copy.width }}"
                                                  height="{{ region.json.shape.h * copy.height }}"
                                                  fill="none" class="shape-bbox shape"
                                            ></rect>
                                        </svg>
                                    {% elif region.json.type == "polygon" %}
                                        <svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
                                            <polygon points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                                        </svg>
                                    {% elif region.json.type == "polyline" %}
                                        <svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
                                            <polyline points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                                        </svg>
                                    {% elif region.json.type == "point" %}
                                        <svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
                                            <circle cx="{{ region.json.shape.x * copy.width }}" cy="{{ region.json.shape.y * copy.height }}" r="0" fill="none" class="shape-point shape"></circle>
                                        </svg>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <div class="list-detail">
                                {{ copy.title }}
                            </div>
                        </a>
                        <div class="list-more">
                            <form method="POST" action="/picture/{{ copy.id }}/mark-replacement">
                                <button type="submit">Designate replacement</button>
                            </form>
                        </div>
                    </li>
                {% endfor %}
        </x-vbox>
    </x-frame>
{% endblock %}