{% extends 'projectroles/base.html' %}

{% load rules %}
{% load static %}
{% load projectroles_tags %}
{% load projectroles_common_tags %}

{% block title %}
  Search Results
    {% if search_terms|length == 1 %}
      for "{{ search_terms.0 }}"
    {% endif %}
  {% if 'type' in search_keywords %}
    (type:{{ search_keywords.type }})
  {% endif %}
{% endblock title %}

{% block css %}
  {{ block.super }}
  <!-- DataTables -->
  {% include 'projectroles/_datatables_css.html' %}

  <!-- General CSS for search results -->
  <link rel="stylesheet" type="text/css" href="{% static 'projectroles/css/search.css' %}">

  <!-- Plugin CSS for app search results -->
  {% for app in search_apps %}
    {% if app.search_css %}
      <link rel="stylesheet" type="text/css" href="{% static app.search_css %}">
    {% endif %}
  {% endfor %}
{% endblock css %}

{% block projectroles %}

{% has_perm 'projectroles.create_project' request.user as can_create_project %}
{% get_django_setting 'PROJECTROLES_SEARCH_PAGINATION' default=5 as search_pagination %}

<div class="row sodar-pr-content-title pt-2">
  <h2 class="sodar-pr-content-title pt-auto">Search Results</h2>
    <div class="sodar-pr-content-title-secondary text-muted">
      for
      {% if search_terms|length <= 5 %}
        "{{ search_terms|join:'; ' }}"
      {% else %}
        multiple terms
      {% endif %}
      {% if 'type' in search_keywords %}
        (type:{{ search_keywords.type }})
      {% endif %}
    </div>
</div>

<div class="container-fluid sodar-page-container">
  {% if 'type' in search_keywords and search_keywords.type != 'project' and search_apps|length == 0 %}
    <div class="alert alert-danger" role="alert">
      <strong>Error:</strong> Search type "{{ search_keywords.type }}" not recognized!
    </div>
  {% else %}
    {{ search_terms|json_script:"search-terms" }}
    {{ search_keywords|json_script:"search-keywords" }}
    {% for app in search_apps %}
      <div class="sodar-ajax-search-results"
           data-url="{% url 'projectroles:ajax_search' %}"
           data-app-name="{{ app.name }}"
           data-app-title="{{ app.title }}"
           data-app-icon="{{ app.icon }}">
      </div>
    {% endfor %}
    <div id="sodar-search-results-spinner" class="w-100 text-center">
      <i class="iconify spin text-secondary"
         data-icon="mdi:loading" data-height="42">
      </i>
    </div>
  {% endif %}
</div>

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  <!-- Settings for Javascript -->
  <script type="text/javascript">
    {% get_django_setting 'PROJECTROLES_SEARCH_PAGINATION' default=5 as search_pagination %}
    window.searchPagination = {{ search_pagination }}
    window.refreshCellOverflow = true
  </script>
  <!-- DataTables -->
  {% include 'projectroles/_datatables_js.html' %}
  <!-- Project search -->
  <script type="text/javascript" src="{% static 'projectroles/js/search.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true
    $(document).on('searchResultsLoaded', function() {
      tour.addStep('search_results', {
        title: 'Search Results',
        text: 'Search results are displayed in this view. Found search items ' +
              'are displayed in cards specific to different applications and ' +
              'data types.',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
      if ($('.sodar-search-card-body').length) {
        tour.addStep('search_card', {
          title: 'Search Results Card',
          text: 'This is a search results card for specific data types from ' +
                'an application.',
          attachTo: '.sodar-search-card-body top',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('.sodar-search-page-length').length) {
        tour.addStep('search_card_page_length', {
          title: 'Search Results Display Amount',
          text: 'The maximum results to be displayed on each page of the ' +
                'results card can be set here.',
          attachTo: '.sodar-search-page-length left',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('.sodar-search-filter').length) {
        tour.addStep('search_card_filter', {
          title: 'Search Results Filtering',
          text: 'The search results displayed in this results card can be ' +
                'filtered by typing into this input box.',
          attachTo: '.sodar-search-filter left',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('th .dt-column-order').length) {
        tour.addStep('search_card_sort', {
          title: 'Search Result Sorting',
          text: 'Results can be sorted by each column in an ascending or ' +
                'descending order by clicking on these icons.',
          attachTo: 'th .dt-column-order right',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('.sodar-search-highlight').length) {
        tour.addStep('search_highlight', {
          title: 'Search Highlight',
          text: 'Search terms are highlighted for each found object.',
          attachTo: '.sodar-search-highlight right',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('.sodar-paginate-button').length) {
        tour.addStep('search_paginate', {
          title: 'Search Pagination',
          text: 'In case of a large number of results, they can be browsed ' +
                'using this sub-page navigation.',
          attachTo: '.sodar-paginate-button left',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
      if ($('.sodar-search-not-found-alert').length) {
        tour.addStep('search_not_found', {
          title: 'Data Not Found',
          text: 'Data types in which we could not find anything are listed ' +
                'here.',
          attachTo: '.sodar-search-not-found-alert top',
          advanceOn: '.docs-link click',
          showCancelLink: true
        })
      }
    })
  </script>
{% endblock javascript %}