{% extends "default.html" %}
{% block title %}Picture {{ resource.title }} | {{ site_name }}{% endblock %}
{% macro shape_label(x, y, text) %}
    {% if text %}
        <a class="shape-label" style="left: {{ x * 100 }}%; top: {{ y * 100 }}%" href="/object/{{ text | urlencode }}">
            {{ text }}
        </a>
    {% endif %}
{% endmacro %}
{% block content %}
    <div id="picture-view">
        <x-frame id="picture-actions">
            <ul class="action-list">
                <li><a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">
                    <iconify-icon icon="mdi:download"></iconify-icon>Download
                </a></li>
                <li><a href="/picture/{{ resource.id }}/get-annotations">
                    <iconify-icon icon="ic:baseline-account-tree"></iconify-icon>JSON annotations
                </a></li>
                <li><a href="/raw/picture/{{ resource.id }}" target="_blank">
                    <iconify-icon icon="mdi:image"></iconify-icon>View separately
                </a></li>
                {% if have_permission %}
                    <li><a href="/picture/{{ resource.id }}/annotate">
                        <iconify-icon icon="mdi:vector-point-select"></iconify-icon>Annotate
                    </a></li>
                {% endif %}
                {% if resource.origin_url %}
                    <li><a href="{{ resource.origin_url }}">
                        <iconify-icon icon="mdi:web"></iconify-icon>Original source
                    </a></li>
                {% endif %}
                {% if resource.replaced_by %}
                    <li><a href="/picture/{{ resource.replaced_by.id }}">
                        <iconify-icon icon="mdi:new-releases"></iconify-icon>Replacement
                    </a></li>
                {% endif %}
                {% if resource.replaces %}
                    <li><a href="/picture/{{ resource.replaces.id }}">
                        <iconify-icon icon="mdi:archive"></iconify-icon>Old version
                    </a></li>
                {% endif %}
                {% if current_user %}
                    <li><a href="/picture/{{ resource.id }}/copy">
                        <iconify-icon icon="mdi:content-copy"></iconify-icon>Copy
                    </a></li>
                {% endif %}
                {% if have_permission %}
                    <li><a href="/picture/{{ resource.id }}/put-annotations-form">
                        <iconify-icon icon="mdi:file-edit"></iconify-icon>Submit JSON annotations
                    </a></li>
                    <li><a href="/picture/{{ resource.id }}/edit-metadata">
                        <iconify-icon icon="mdi:edit"></iconify-icon>Edit metadata
                    </a></li>
                {% endif %}
                {% if have_permission %}
                    <li><details>
                        <summary>
                            <iconify-icon icon="mdi:delete"></iconify-icon>Delete
                        </summary>
                        <a href="/picture/{{ resource.id }}/delete">Confirm deletion</a>
                    </details></li>
                {% endif %}
            </ul>
        </x-frame>
        <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 %}
            <x-vbox>
                <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 id="annotation-view-controls">
                    <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 %}
                <h2>Ratings ({{ resource.rating_totals.values() | sum }})</h2>
                <x-hbox>
                    <x-vbox>
                        {% if resource.average_rating %}
                            <div class="rating-bar">
                                {% for i in range(1, 6) %}
                                    <div class="rating-bar-segment">
                                        <div class="rating-bar-filling" style="width: {{ resource.stars[i-1] }}%"></div>
                                    </div>
                                {% endfor %}
                            </div>
                            <p>
                                <span>Average rating:</span>
                                <span>{{ resource.average_rating | round(2) }}</span>
                                from {{ resource.rating_totals.values() | sum }} ratings
                            </p>
                        {% endif %}
                        {% if current_user %}
                            <h3>Your rating</h3>
                            <form id="rating-form" method="POST" action="/picture/{{ resource.id }}/rate">
                                <label>
                                    <input name="rating" type="radio" value="0" {% if not own_rating.rating %}checked{% endif %}>
                                    Clear rating
                                </label>
                                <div class="star-rating-container">
                                    <input type="radio" id="stars-5" name="rating" value="5" title="Perfect" {% if own_rating.rating == 5 %}checked{% endif %}>
                                    <label for="stars-5" tabindex="0"><iconify-icon icon="mdi:star" class="star">5 stars</iconify-icon></label>
                                    <input type="radio" id="stars-4" name="rating" value="4" title="Good" {% if own_rating.rating == 4 %}checked{% endif %}>
                                    <label for="stars-4" tabindex="0"><iconify-icon icon="mdi:star" class="star">4 stars</iconify-icon></label>
                                    <input type="radio" id="stars-3" name="rating" value="3" title="OK" {% if own_rating.rating == 3 %}checked{% endif %}>
                                    <label for="stars-3" tabindex="0"><iconify-icon icon="mdi:star" class="star">3 stars</iconify-icon></label>
                                    <input type="radio" id="stars-2" name="rating" value="2" title="Poor" {% if own_rating.rating == 2 %}checked{% endif %}>
                                    <label for="stars-2" tabindex="0"><iconify-icon icon="mdi:star" class="star">2 stars</iconify-icon></label>
                                    <input type="radio" id="stars-1" name="rating" value="1" title="Awful" {% if own_rating.rating == 1 %}checked{% endif %}>
                                    <label for="stars-1" tabindex="0"><iconify-icon icon="mdi:star" class="star">1 star</iconify-icon></label>
                                </div>
                                <button type="submit">Rate</button>
                            </form>
                        {% endif %}
                    </x-vbox>
                    {% if resource.average_rating %}
                        <ul class="rating-list flexible-space">
                            {% for i in range(5, 0, -1) %}
                                <li style="grid-column-end: {{ resource.rating_totals[i] + 2 }}; background: var(--{{ i }}-star);">
                                    <span>{{ i }}:</span>
                                    <span>{{ resource.rating_totals[i] }}</span>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p>No ratings yet.</p>
                    {% endif %}
                </x-hbox>
                <h2>Details</h2>
                <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>
                {% if contains %}
                    <p>
                        Contains objects: {% for object_id in contains %}
                            <a href="/object/{{ object_id | urlencode }}">{{ object_id }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
                    </p>
                {% else %}
                    <p>No labelled regions.</p>
                {% endif %}
                <h2>Licensing</h2>
                <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[:6] %}
                            {% 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 %}
                        {% if licences | length > 6 %}
                            <details>
                                <summary>More</summary>
                                <x-vbox>
                                    {% for licence in licences[6:] %}
                                        {% 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>
                            </details>
                        {% endif %}
                    </x-vbox>
                </x-hbox>
                <h2>Copies</h2>
                {% if resource.copies %}
                    <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 %}
                    </ul>
                {% else %}
                    <p>This picture hasn't got any copies.</p>
                {% endif %}

                <h2>Galleries</h2>
                {% if resource.galleries %}
                    <ul class="thumbnail-list">
                        {% for gallery in resource.galleries %}
                            <li>
                                <a href="/gallery/{{ gallery.gallery.id }}">
                                    <div class="list-detail">
                                        {{ gallery.gallery.title }}
                                    </div>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p>This picture isn't in any galleries.</p>
                {% endif %}
            </x-vbox>
        </x-frame>
    </div>
    <svg width="0" height="0">
        <defs>
            <clipPath id="star-clip">
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z"></path>
            </clipPath>
        </defs>
    </svg>
{% endblock %}