div.columns(v-cloak="")
  aside.column.is-3.aside.hero.is-fullheight
    div

      div.main.pr20.pl20
        div.field.has-addons
          div.control.is-expanded
            input.input(
              v-model="searchQuery"
              v-on:keyup.enter="submit"
              type="text"
              placeholder="Search document"
              style="border-right: none; box-shadow: none; -webkit-box-shadow: none;"
            )

          div.control
            div.dropdown.is-hoverable.is-right
              div.dropdown-trigger
                button.button(
                  aria-haspopup="true"
                  aria-controls="dropdown-menu"
                  style="border-left: none"
                )
                  span.icon.has-text-grey.pr0
                    i.fas.fa-angle-down(aria-hidden="true")

              div.dropdown-menu.pt0#dropdown-menu(role="menu")
                div.dropdown-content
                  a.dropdown-item
                    label.radio
                      input(
                        v-model="picked"
                        type="radio"
                        value="all"
                        checked=""
                      )
                      | All
                  a.dropdown-item
                    label.radio
                      input(
                        v-model="picked"
                        type="radio"
                        value="active"
                      )
                      | Active
                  a.dropdown-item
                    label.radio
                      input(
                        v-model="picked"
                        type="radio"
                        value="completed"
                      )
                      | Completed

      div.main.pt0.pb0.pr20.pl20
        span About {{ count }} results (page {{ paginationPage }} of {{ paginationPages }})

      div.main.pt0.pb0.pr20.pl20
        div.select
          select(v-model="ordering")
            option(value="", disabled, selected) Sort by
            option(value="created_at") Created : Ascending
            option(value="-created_at") Created : Descending
            option(value="updated_at") Updated : Ascending
            option(value="-updated_at") Updated : Descending

      div.main.sidebar-scrollable
        a.item(
          v-for="(doc, index) in docs"
          v-bind:class="{ active: index == pageNumber }"
          v-bind:data-preview-id="index"
          v-on:click="pageNumber = index"
          href="#"
        )
          span.icon
            i.fa.fa-thumbs-up(v-show="annotations[index] && docs[index].annotation_approver")
            i.fa.fa-check(v-show="annotations[index] && annotations[index].length && !docs[index].annotation_approver")
          span.name
            span(v-if="documentMetadataFor(index) && documentMetadataFor(index).filename") {{ documentMetadataFor(index).filename }}
            span(v-else) {{ doc.text.slice(0, 60) }}...

  div.column.is-7.is-offset-1.message.hero.is-fullheight#message-pane

    div.modal(v-bind:class="{ 'is-active': isAnnotationGuidelineActive }")
      div.modal-background
      div.modal-card
        header.modal-card-head
          p.modal-card-title Annotation Guideline
          button.delete(
            v-on:click="isAnnotationGuidelineActive = !isAnnotationGuidelineActive"
            aria-label="close"
          )
        section.modal-card-body.modal-card-body-footer.content(
          v-html="compiledMarkdown"
          style="line-height: 150%"
        )

    div.modal(v-bind:class="{ 'is-active': isMetadataActive }")
      div.modal-background
      div.modal-card
        header.modal-card-head
          p.modal-card-title Document Metadata
          button.delete(
            v-on:click="isMetadataActive = !isMetadataActive"
            aria-label="close"
          )
        section.modal-card-body.modal-card-body-footer
          vue-json-pretty(
            v-bind:data="displayDocumentMetadata"
            v-bind:show-double-quotes="false"
            v-bind:show-line="false"
          )

    div.modal(v-bind:class="{ 'is-active': isCommentActive }")
      div.modal-background
      div.modal-card
        header.modal-card-head
          p.modal-card-title Document Comment
          button.delete(
            v-on:click="toggleCommentModal()"
            aria-label="close"
          )
        section.modal-card-body.modal-card-body-footer
          textarea.textarea(
            v-model="comment"
            v-debounce="syncComment"
            type="text"
            placeholder="Add document comment here..."
          )

    div.columns.is-multiline.is-gapless.is-mobile.is-vertical-center
      div.column.is-3
        progress.progress.is-inline-block(
          v-bind:class="progressColor"
          v-bind:value="achievement"
          max="100"
        ) 30%
      div.column.is-5
        span.ml10
          strong {{ total - remaining }}
        | /
        span {{ total }}

      div.column.is-1.has-text-right
        a.button.tooltip.is-tooltip-bottom(
          v-if="isAnnotationApprover"
          v-on:click="approveDocumentAnnotations"
          v-bind:data-tooltip="documentAnnotationsApprovalTooltip"
        )
          span.icon
            i.far(v-bind:class="[documentAnnotationsAreApproved ? 'fa-check-circle' : 'fa-circle']")
      div.column.is-1.has-text-right
        a.button(v-on:click="isAnnotationGuidelineActive = !isAnnotationGuidelineActive")
          span.icon
            i.fas.fa-book
      div.column.is-1.has-text-right
        a.button(
          v-on:click="isMetadataActive = !isMetadataActive && documentMetadata != null"
          v-bind:disabled="documentMetadata == null"
          v-bind:title="documentMetadata == null ? 'No document metadata available.' : null"
        )
          span.icon
            i.fas.fa-box
      div.column.is-1.has-text-right
        a.button.tooltip.is-tooltip-bottom(
          v-on:click="toggleCommentModal()"
          v-bind:data-tooltip="'Click to comment on document.'"
        )
          span.icon
            i.fas.fa-comment

    div.columns
      div.column
        block annotation-area

      div.column(v-if="documentMetadata != null && documentMetadata.documentSourceUrl != null")
        preview(v-bind:url="documentMetadata.documentSourceUrl")

    div.level.mt30
      div.level-left
        div.buttons
          a.button(
            v-shortkey="{ prev1: ['shift', 'ctrl', 'p'], prev2: ['shift', 'arrowup'], prev3: ['shift', 'arrowleft'] }"
            v-on:click="prevPagination"
            v-on:shortkey="prevPagination"
          )
            span.icon.tooltip(data-tooltip="Previous page")
              i.fas.fa-arrow-left

          a.button(
            v-shortkey="{ prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft'] }"
            v-on:click="prevPage"
            v-on:shortkey="prevPage"
          )
            span.icon.tooltip(data-tooltip="Previous document")
              i.fas.fa-chevron-left

      div.level-center
        span.button.is-static {{ offset + pageNumber + 1 }} / {{ count }}

      div.level-right
        div.buttons
          a.button(
            v-shortkey="{ next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright'] }"
            v-on:click="nextPage"
            v-on:shortkey="nextPage"
          )
            span.icon.tooltip(data-tooltip="Next document")
              i.fas.fa-chevron-right

          a.button(
            v-shortkey="{ next1: ['shift', 'ctrl', 'n'], next2: ['shift', 'arrowdown'], next3: ['shift', 'arrowright'] }"
            v-on:click="nextPagination"
            v-on:shortkey="nextPagination"
          )
            span.icon.tooltip(data-tooltip="Next page")
              i.fas.fa-arrow-right