{% extends "base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'css/annotation.css' %}">
{% endblock %}
{% block content %}
<div class="columns" id="mail-app">
    <aside class="column is-3 aside hero is-fullheight">
        <div>

            <div class="main" style="padding: 20px 20px">
                <div class="field has-addons">
                    <div class="control is-expanded">
                        <input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
                    </div>

                    <div class="control">
                        <div class="dropdown is-hoverable is-right">
                            <div class="dropdown-trigger">
                                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
                                    <span class="icon has-text-grey" style="padding-right:0;">
                                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </div>
                            <div class="dropdown-menu" id="dropdown-menu" role="menu" style="padding-top:0">
                                <div class="dropdown-content">
                                    <a class="dropdown-item">
                                        <label class="radio">
                                            <input type="radio" value="all" v-model="picked" checked> All
                                        </label>
                                    </a>
                                    <a class="dropdown-item">
                                        <label class="radio">
                                            <input type="radio" value="active" v-model="picked"> Active
                                        </label>
                                    </a>
                                    <a class="dropdown-item">
                                        <label class="radio">
                                            <input type="radio" value="completed" v-model="picked"> Completed
                                        </label>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main">
                <a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
                    v-bind:data-preview-id="index">
                    <span class="icon">
                        <i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
                    </span>
                    <span class="name">[[ doc.text.slice(0, 40) ]]...</span>
                </a>
            </div>
        </div>
    </aside>
    <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">

        <div class="progress-bar">
            <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
        </div>

        {% block annotation-area %} {% endblock %}

        <div class="level" style="margin-top:30px;">
            <a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}" @shortkey="prevPage">
                <span class="icon">
                    <i class="fas fa-chevron-left"></i>
                </span>
                <span>Prev</span>
            </a>

            <a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}" @shortkey="nextPage">
                <span>Next</span>
                <span class="icon">
                    <i class="fas fa-chevron-right"></i>
                </span>
            </a>
        </div>

    </div>
</div>
{% endblock %}