{% extends "annotation/annotation_base.html" %}
{% load static %}
{% block annotation-area %}
<div class="card has-text-weight-bold	has-text-white has-background-royalblue">
  <div class="card-content">
    <div class="content" v-if="docs[pageNumber]">
      [[ docs[pageNumber].text ]]
    </div>
  </div>
</div>

<section class="todoapp">
  <header class="header">
    <input class="textarea new-todo" type="text" placeholder="What is your response?" v-model="newTodo" @keyup.enter="addTodo">
  </header>
  <section class="main" v-cloak>
    <ul class="todo-list">
      <li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
        <div class="view">
          <label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
          <button class="delete destroy is-large" @click="removeTodo(todo)"></button>
        </div>
        <input class="textarea edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
          @keyup.esc="cancelEdit(todo)">
      </li>
    </ul>
  </section>
</section>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/demo_translation.js' %}"></script>
{% endblock %}