{% extends "annotation/annotation_base.html" %}
{% load static %}
{% load render_bundle from webpack_loader %}
{% block annotation-area %}
<div class="card">
  <header class="card-header">
    <div class="card-header-title has-background-royalblue" style="padding:1.5rem;">
      <div class="field is-grouped is-grouped-multiline">
        <div class="control" v-for="label 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="annotate(label.id)"
              v-shortkey.once="[ label.shortcut ]" @shortkey="annotate(label.id)">
              [[ label.text ]]
            </a>
            <span class="tag is-medium">[[ label.shortcut ]]</span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="card-content">
    <div class="content" v-if="docs[pageNumber] && annotations[pageNumber]">
      <annotator ref="annotator" v-bind:labels="labels" v-bind:entity-positions="annotations[pageNumber]" v-bind:text="docs[pageNumber].text"
        @remove-label="removeLabel" @add-label="addLabel"></annotator>
    </div>
  </div>
</div>
{% endblock %}
{% block footer %}
{% render_bundle 'demo_named_entity' 'js' %}
{% endblock %}