{% macro annotation_display(resource) %}
    <div class="annotation-zone">
        <img src="/raw/picture-thumbnail/{{ resource.id }}" alt="{{ resource.title }}">
        {% for region in resource.regions %}
            {% if region.json.type == "bbox" %}
                <svg class="shape-container" viewBox="0 0 1 1" preserveAspectRatio="none">
                    <rect x="{{ region.json.shape.x }}"
                          y="{{ region.json.shape.y }}"
                          width="{{ region.json.shape.w }}"
                          height="{{ region.json.shape.h }}"
                          fill="none" class="shape-bbox shape"
                    ></rect>
                </svg>
            {% elif region.json.type == "polygon" %}
                <svg class="shape-container" viewBox="0 0 1 1" preserveAspectRatio="none">
                    <polygon points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
                </svg>
            {% elif region.json.type == "polyline" %}
                <svg class="shape-container" viewBox="0 0 1 1" preserveAspectRatio="none">
                    <polyline points="{% for point in region.json.shape %}{{ point.x }},{{ point.y }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                </svg>
            {% elif region.json.type == "point" %}
                <svg class="shape-container" viewBox="0 0 1 1" preserveAspectRatio="none">
                    <circle cx="{{ region.json.shape.x }}" cy="{{ region.json.shape.y }}" r="0" fill="none" class="shape-point shape"></circle>
                </svg>
            {% endif %}
        {% endfor %}
    </div>
{% endmacro %}