{% extends "annotation/annotation_base.html" %} {% load static %} {% block annotation-area %}
<div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
    <div class="card-content" v-if="items.length">
        <div class="content">
            [[ items[cur].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-show="items[cur].labels.length" v-cloak>
        <ul class="todo-list">
            <li v-for="todo in items[cur].labels" 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 type="text/javascript" src="{% static 'bundle/seq2seq.js' %}"></script>
{% endblock %}