{% extends "base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'css/annotation.css' %}">
<script src="https://unpkg.com/marked@0.3.6/lib/marked.js"></script>
<script src="https://unpkg.com/lodash@4.16.0/lodash.js"></script>
{% endblock %}
{% block navigation %}
{% if user.is_superuser %}
<a class="navbar-item" href="{% url 'dataset' view.kwargs.project_id %}">
  <span class="icon">
    <i class="fas fa-edit"></i>
  </span>
  <b>Edit Data</b>
</a>
{% endif %}
{% endblock %}
{% block content %}
<div class="columns" id="mail-app" v-cloak>
  <aside class="column is-3 aside hero is-fullheight">
    <div>

      <div class="main pr20 pl20">
        <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 pr0">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="dropdown-menu pt0" id="dropdown-menu" role="menu">
                <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 pt0 pb0 pr20 pl20">
        <span>About [[ count ]] results</span>
      </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, 60) ]]...</span>
        </a>
      </div>
    </div>
  </aside>
  <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">

    <!-- Modal card for creating project. -->
    <div class="modal" :class="{ 'is-active': isActive }">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Annotation Guideline</p>
            <button class="delete" aria-label="close" @click="isActive=!isActive"></button>
          </header>
          <section class="modal-card-body modal-card-body-footer content"
                   style="line-height:150%"
                   v-html="compiledMarkdown"></section>
        </div>
      </div>

    <div class="columns is-multiline is-gapless is-mobile is-vertical-center">
      <div class="column is-3">
        <progress class="progress is-inline-block" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
      </div>
      <div class="column is-8">
        <span class="ml10"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
      </div>
      <div class="column is-1 has-text-right">
        <a class="button" @click="isActive=!isActive">
          <span class="icon">
            <i class="fas fa-book"></i>
          </span>
        </a>
      </div>
    </div>

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

    <div class="level mt30">
      <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 %}