{% if error %}
<div class="row">
    <div class="col-md-12">
        <span class="text-danger">{{ error }}</span>
    </div>
</div>
{% endif %}

{% if not  documents.items %}
<div class="med card-section">
  <p style="padding-top:.33em">
    Your search - <em>{{ query }}</em> - did not match any documents. </p>
  <p style="margin-top:1em">Suggestions:</p>
  <ul style="margin-left:1.3em;margin-bottom:2em">
    <li>Make sure that all words are spelled correctly.</li>
    <li>Try different keywords.</li>
    <li>Try more general keywords.</li>
    <li>Try fewer keywords.</li>
  </ul>
</div>
{% endif %}

{% if total_time %}
<small class="gray-text d-none">{{ total_time }} seconds.</small>
{% endif %}

{% for doc_id, document_values in documents.items %}
<div class="row flex-items-md-middle">
  <div class="col-md-7 mt-2
        {% if document_values.relevance_judgment == 2 %}
        border-3 border-left border-success
        {% elif document_values.relevance_judgment == 1 %}
        border-3 border-left border-warning
        {% elif document_values.relevance_judgment == 0 %}
        border-3 border-left border-danger
        {% endif %}
        "
       id="doc_{{document_values.docno}}_card" data-toggle="modal" data-target=".doc-{{ document_values.docno }}-modal" style="cursor: pointer; cursor: hand; transition: border-color 0.3s ease-in">
    <div class="document" data-rank="{{ document_values.rank }}">
      <div class="title" id="doc-{{ document_values.docno }}-title">{{ document_values.title|safe }}</div>
      <div class="url">doc_id: {{ document_values.docno }}</div>
      <div class="snippet" id="doc-{{ document_values.docno }}-snippet">
{{ document_values.snippet|safe }}
</div>
    </div>
  </div>
  <div class="col-md-5 align-self-center center-text">
    <div class="btn-group" role="group">
      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 0, 'click', false, null, null);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Not relevant</a>
      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 1, 'click', false, null, null);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Relevant</a>
      <a href="#" data-dismiss="modal" onclick="return send_judgment('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 2, 'click', false, null, null);" class="btn btn-sm btn-outline-secondary d-flex align-items-center">Highly Relevant</a>
    </div>
    <div class="gray-text mt-2 small bold" id="isJudged_{{ document_values.docno }}" {% if not document_values.isJudged %}style="display: none" {% endif %}>This document has been judged.</div>
  </div>
</div>

<!-- DOCUMENT {{ document_values.docno }} MODAL  -->
<div class="modal doc-{{ document_values.docno }}-modal" id="doc-{{ document_values.docno }}-modal" tabindex="-1"
     role="dialog">
  <div class="modal-dialog modal-xlg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title-{{ document_values.docno }}">
          <span class="text-danger">Please wait...</span>
        </h5>
        <button type="button" class="close" data-dismiss="modal">
          <span >&times;</span>
        </button>
      </div>
      <div class="modal-body" style="overflow: auto; min-height: 450px; max-height: inherit;">
        <div class="row">
          <div class="col-md-8">
            <div class="document-{{ document_values.docno }}-modal-content" id="document-{{ document_values.docno }}-modal-content"
                 data-doc-id="">
              <div class="document_content" id="document_{{ document_values.docno }}_content">
                <div class="row bottom-margin small text-truncate">
                  <div class="col-md-6">
                    <small class="document_content_date"></small>
                  </div>
                  <div class="col-md-6 align-right small">
                    <code class="document_content_id"></code>
                  </div>
                </div>
                <div class="document_content_text" id="document_{{ document_values.docno }}_raw_content">
                  <div class='container center-text'><span class='text-danger'> <h4><i class='fas fa-sync fa-spin mr-4'></i></h4> <h5>Fetching document content. Please wait..</h5> </span></div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-2" id="{{ document_values.docno }}-sideBar">
            <nav class="sidebar-nav-fixed bg-faded border-0">
              <ul class="nav nav-pills flex-column p-4">
                <div class="cal-search">
                  <li>
                    <span class="gray-text align-left">Highlight content:</span>
                    <form id="searchContentForm_doc_{{ document_values.docno }}" class="top-margin">
                      <div class="input-group">
                        <input id="search_content_doc_{{ document_values.docno }}" type="search"
                               class="form-control" placeholder="Search">
                        <div class="input-group-append">
                          <button class="btn btn-sm btn-secondary"
                                  data-search="next" id="searchNextDoc{{ document_values.docno }}"
                                  type="button">&darr;
                          </button>
                          <button class="btn btn-sm btn-secondary"
                                  data-search="prev"
                                  type="button">&uarr;
                          </button>
                          <button class="btn btn-sm btn-secondary"
                                  data-search="clear" type="button">&times;
                          </button>
                        </div>
                      </div>
                    </form>
                  </li>
                </div>

                <li class="nav-item extra-top-margin d-none">
                  <div class="gray-text align-left">Judge document:</div>
                  <div class="btn-group top-margin" role="group">
                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 0, 'click');" class="btn btn-sm btn-danger">Not relevant</a>
                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 1, 'click');" class="btn btn-sm btn-warning">Relevant</a>
                    <a href="#" onclick="return send_judgment_and_hide_modal('{{ document_values.docno }}', '{{ document_values.title|escapejs }}', '{{ document_values.snippet|escapejs }}', 2, 'click');" class="btn btn-sm btn-success">Highly relevant</a>
                  </div>
                </li>
                <div class="extra-top-margin align-left d-none">
                  <div class="gray-text">Keyboard shortcuts:</div>
                  <li class="nav-item top-margin">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="badge badge-danger">s</span>
                      </div>
                      <div class="col-md-9">
                        <small class="left-margin gray-text">Mark as non-relevant
                        </small>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="badge badge-warning">r</span>
                      </div>
                      <div class="col-md-9">
                        <small class="left-margin gray-text">Mark as relevant
                        </small>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="badge badge-success">h</span>
                      </div>
                      <div class="col-md-9">
                        <small class="left-margin gray-text">Mark as highly relevant
                        </small>
                      </div>
                    </div>
                  </li>
                </div>
              </ul>
            </nav>

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

    <!-- MODAL EVENT TRIGGERS -->
<script>
  $('#doc-{{ document_values.docno }}-modal').on('hidden.bs.modal', function (e) {
      isModalOpen = false;
      currentOpenedModalDocId = null;
      if(documents_timers['{{ document_values.docno }}'] == undefined){
          console.error("Hiding modal with no timer. An error must have happened.");
          return;
      }
      var timeActive = Date.now() - documents_timers['{{ document_values.docno }}'].startTime - documents_timers['{{ document_values.docno }}'].totalAwayTime;
      var timeAway = documents_timers['{{ document_values.docno }}'].totalAwayTime;
      console.log("Model has been hidden.");
      console.log("Destroying document# {{ document_values.docno }} timer.");
      documents_timers['{{ document_values.docno }}'].idle.stop();
      delete documents_timers['{{ document_values.docno }}'];


      if(is_from_judement == false){
          console.log("No judgment has been made. Sending no judgment call to backend for document id: " + '{{ document_values.docno }}');
          var now = + new Date();
          var ctrlf_terms = $("#search_content_doc_{{ document_values.docno }}").val();
          var timeVerbose = {
              "timestamp": now,
              "timeActive": timeActive,
              "timeAway": timeAway,
              "source": "searchModal",
              "judged": false,
              'ctrl_f_terms_input': ctrlf_terms,
              'found_ctrl_f_terms_in_title': marked_matches_in_document_title,
              'found_ctrl_f_terms_in_full_doc': marked_matches_in_document_content
          };
          var data = {
              'doc_id': '{{ document_values.docno }}',
              'doc_title': '{{ document_values.title|escapejs }}',
              'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
              'client_time': now,
              'timeVerbose': timeVerbose,
              'csrfmiddlewaretoken': '{{ csrf_token }}',
              'page_title': document.title
          };

          $.ajax({
              url: '{% url 'judgment:post_nojudgment' %}',
              method: 'POST',
              data: JSON.stringify(data),
              success: function (result) {
                  console.log(result['message']);
              },
              error: function (result) {
                  console.error(result);
              }
          });
      }else{
          // reset flag
          is_from_judement = false;
      }
  });

  $('#doc-{{ document_values.docno }}-modal').on('shown.bs.modal', function (e) {

      var now = + new Date();
          $.ajax({
              url: '{% url 'search:post_search_doc_open' %}',
              method: 'POST',
              data: JSON.stringify({
                  'client_time': now,
                  'query': $("#search_input").val(),
                  'doc_id': '{{ document_values.docno }}',
                  'doc_title': '{{ document_values.title|escapejs }}',
                  'doc_search_snippet': '{{ document_values.snippet|escapejs }}',
                  'csrfmiddlewaretoken': '{{ csrf_token }}',
                  'page_title': document.title
              }),
              success: function (result) {
                  console.log(result['message']);
              }
          });

      var modal = $(this);
      if(!('{{ document_values.docno }}' in loaded_docs)){
          $.ajax({
              url: '{% url 'search:get_doc' %}?docid={{ document_values.docno }}',
              method: 'GET',
              success: function (result) {
                  $("#modal-title-{{ document_values.docno }}").html(result[0]['title']);
                  modal.find('.document_content_text').html(result[0]['content']);
                  loaded_docs['{{ document_values.docno }}'] = true;
                  modal.find('.document_content_date').html(result[0]['date']);
                  modal.find('.document_content_id').html(result[0]['doc_id']);
                  console.log("Initializing document timer for doc: {{ document_values.docno }}");
                  var documentTimer = AwayTimer(false);
                  documents_timers['{{ document_values.docno }}'] = documentTimer;
              },
              error: function (result){
                  var error_msg = "<code>" + "[" + result['status'] + "] " + "Failed to get document. Error message: " + result["statusText"] + "." + "</code>";
                  modal.find('.document_content').html(error_msg).addClass("text-danger");
                  console.error(error_msg);
              },
              statusCode: {
                  502: function (xhr) {
                      var error_msg = "<code>" + "[502] Failed to get document. Error message: "+xhr.responseText; + "</code>"
                      modal.find('.document_content').html(error_msg).addClass("text-danger");
                      console.error(error_msg);
                  }
              }
          });
      }else{
          console.log("Re-initializing document timer for doc: {{ document_values.docno }}");
          var documentTimer = AwayTimer(false);
          documents_timers['{{ document_values.docno }}'] = documentTimer;
      }

      // fake an updated on the ctrl+f search bar to update
      $("#search_content_doc_{{ document_values.docno }}").trigger("updated");
      updateMatchesLists();
      console.log("Model has been shown");
      isModalOpen = true;
      currentOpenedModalDocId = '{{ document_values.docno }}';
  });
</script>


<!-- MODAL SEARCH CONTENT -->
<script>
  $('#searchContentForm_doc_{{ document_values.docno }}').submit(function (e) {
      e.preventDefault();
      $("#searchNextDoc{{ document_values.docno }}").click();
      return false;
  });

  $(function() {

    // the input field
    var $input = $("#search_content_doc_{{ document_values.docno }}"),
      // clear button
      $clearBtn = $("button[data-search='clear']"),
      // prev button
      $prevBtn = $("button[data-search='prev']"),
      // next button
      $nextBtn = $("button[data-search='next']"),
      // the context where to search
      $content = $("#doc-{{ document_values.docno }}-modal"),
      // list of selectors to ignore during the search
      $exclude = [".document_content_date", ".document_content_id", ".sidebar-nav-fixed", ".btn", ".gray-text", ".badge"],
      // jQuery object to save <mark> elements
      $results = "",
      // the class that will be appended to the current
      // focused element
      currentClass = "current",
      // top offset for the jump (the search bar)
      offsetTop = 50,
      // the current index of the focused element
      currentIndex = 0;

      var search_form = document.getElementById("search_content_doc_{{ document_values.docno }}");
      Mousetrap(search_form).handleKey = function handleKey(character, modifiers, event){
          if(event.type == "keydown" && $(search_form).is(':focus')){
              var now = + new Date();
              $.ajax({
                  url: '{% url 'progress:post_find_keystroke' %}',
                  method: 'POST',
                  data: JSON.stringify({
                      'client_time': now,
                      'doc_id': "{{ document_values.docno }}",
                      'character': character,
                      'page_title': document.title,
                      'search_bar_value': $(search_form).val(),
                      'isSearchbarFocused': $(search_form).is(':focus'),
                      'csrfmiddlewaretoken': '{{ csrf_token }}'
                  }),
                  success: function (result) {
                      console.log(result['message']);
                  }
              });
              console.log("Character pressed: '"+character+"'", "at:", now);
          }
          document.body.click();
      };


    /**
     * Jumps to the element matching the currentIndex
     */
    function jumpTo() {
      if ($results.length) {
        $input.addClass("greenBorder").css("border-color","#449D44");
        var position,
          $current = $results.eq(currentIndex);
        $results.removeClass(currentClass);
        if ($current.length) {
          $current.addClass(currentClass);
          position = $current[0].offsetTop - offsetTop;
          $("#doc-{{ document_values.docno }}-modal").scrollTop(position);
        }
      }else{
        if(!$input.val()){
            $input.removeAttr( 'style' );
        }else if ($input.is(':focus')){
          $input.addClass("redBorder").css("border-color","#C9302C");
        }
        $("#doc-{{ document_values.docno }}-modal").scrollTop(0);
      }
    }

    /**
     * Searches for the entered keyword in the
     * specified context on input
     */
    $input.on("input", function() {
      var searchVal = this.value;
      $content.unmark({
        done: function() {
          $content.mark(searchVal, {
            separateWordSearch: true,
            exclude: $exclude,
            done: function() {
              updateMatchesLists();
              $results = $content.find("mark");
              currentIndex = 0;
              jumpTo();
            }
          });
        }
      });
    });

    $content.on( "updated", function() {
        var searchVal = $input.val();
         if(searchVal != undefined){
             $content.unmark({
                done: function () {
                    $content.mark(searchVal, {
                        separateWordSearch: true,
                        exclude: $exclude,
                        done: function () {
                            updateMatchesLists();
                            $results = $content.find("mark");
                            currentIndex = 0;
                        }
                    });
                }
            });
         }
      });

    /**
     * Clears the search
     */
    $clearBtn.on("click", function() {
      resetMatchesDict();
      $content.unmark();
      $input.val("").focus();
    });

    /**
     * Next and previous search jump to
     */
    $nextBtn.add($prevBtn).on("click", function() {
      if ($results.length) {
        currentIndex += $(this).is($prevBtn) ? -1 : 1;
        if (currentIndex < 0) {
          currentIndex = $results.length - 1;
        }
        if (currentIndex > $results.length - 1) {
          currentIndex = 0;
        }
        jumpTo();
      }
    });
  });

</script>
{% endfor %}