{% extends "annotation/annotation_base.html" %}
{% load static %}

{% block annotation-area %}
<div class="card">
    <header class="card-header">
        <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
            <div class="field is-grouped is-grouped-multiline">
                <div class="control" v-for="(label, item) in labels">
                    <div class="tags has-addons">
                        <a class="tag is-medium"
                        v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }"
                        v-on:click="addLabel(label)"
                        v-shortkey.once="[ label.shortcut ]"
                        @shortkey="addLabel(label)">
                        [[ label.text ]]
                        </a>
                        <span class="tag is-medium">[[ label.shortcut ]]</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="card-content">
        <div class="field is-grouped is-grouped-multiline">
            <div class="control" v-for="(annotation, index) in annotations[pageNumber]">
                <div class="tags has-addons">
                    <span class="tag is-medium"
                          v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
                        [[ id2label[annotation.label].text ]]
                        <button class="delete is-small" v-on:click="removeLabel(annotation)"></button>
                    </span>
                </div>
            </div>
        </div>
        <hr>
        <div class="content" v-if="docs[pageNumber]">
            [[ docs[pageNumber].text ]]
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
<script type="text/javascript" src="{% static 'bundle/document_classification.js' %}"></script>
{% endblock %}