{% 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 search_type %}
    (type:{{ search_type }})
  {% endif %}
{% endblock title %}

{% block css %}
  {{ block.super }}
  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.0.1/datatables.min.css" />

  <style type="text/css">
    div.sodar-search-card {
      display: none;  /* Will be enabled after DataTables init */
    }
    div.sodar-search-card-body {
      padding: 0;
      overflow-x: hidden; /* Fix possible overflow when resizing window */
    }
    table.sodar-search-table {
      display: inline-table;
      min-width: 100%;
      max-width: 100%;
      width: 100%;
      border-bottom: 0 !important;
      margin: 0 !important;
    }
    table.sodar-search-table thead tr th {
      padding: 12px !important;
      padding-right: 22px !important; /* Avoid covering sort icons */
      max-width: 250px !important;
    }
    table.sodar-search-table tbody tr td {
      padding: 12px !important;
      max-width: 250px !important;
    }
    .sodar-header-input-group-search {
      max-width: 380px;
    }
    select.sodar-search-page-length {
      max-width: 110px;
      height: 32px;
      padding-top: 5px;
    }

    /* DataTables modifications */
    th.sorting {
      padding-left: 10px !important;
      border-bottom: 0 !important;
    }
    th.sorting::after {
      padding-top: 7px !important;
    }
    .previous::before, .next::after {
        display: none !important;
    }

    /* Responsive modifications */
    @media screen and (max-width: 1000px) {
      .sodar-header-input-group-search {
        display: none;
      }
    }
  </style>
{% 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">
  <h2 class="sodar-pr-content-title">
    <i class="iconify" data-icon="mdi:search"></i> 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 search_type %}
        (type:{{ search_type }})
      {% endif %}
    </div>
</div>

<div class="container-fluid sodar-page-container">
  {% if search_type and search_type != 'project' and app_results|length == 0 %}
    <div class="alert alert-danger" role="alert">
      <strong>Error:</strong> Search type "{{ search_type }}" not recognized!
    </div>
  {% else %}
    {# Project Search #}
    {% if not search_type or search_type == 'project' %}
      {% if project_results|length > 0 %}
        {% get_display_name 'PROJECT' title=True plural=True as projects_title %}
        {% include 'projectroles/_search_header.html' with search_title=projects_title result_count=project_results|length icon='mdi:cube' %}
        <table class="table table-striped sodar-card-table sodar-search-table"
               id="sodar-pr-search-table">
          <thead>
            <tr>
              <th>{% get_display_name 'PROJECT' title=True %}</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {% for p in project_results %}
              {% include 'projectroles/_project_search_item.html' %}
            {% endfor %}
          </tbody>
        </table>
        {% include 'projectroles/_search_footer.html' %}
      {% endif %}
    {% endif %}
    {# App Search #}
    {% for app in app_results %}
      {% if app.plugin.search_template and app.has_results and not app.error %}
        {% include app.plugin.search_template with plugin=app.plugin search_results=app.results %}
      {% elif app.error %}
        <div class="alert alert-error">
          <strong>Error:</strong>
          Exception raised by {{ app.plugin.name }}: "{{ app.error }}"
        </div>
      {% endif %}
    {% endfor %}
  {% endif %}

  {% if not_found %}
    <div class="alert alert-info d-none" id="sodar-search-not-found-alert">
      No results found:
      <ul class="mb-0">
        {% for n in not_found %}
          <li>{{ n }}</li>
        {% endfor %}
      </ul>
    </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 -->
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.0.1/datatables.min.js"></script>
  <!-- Project search -->
  <script type="text/javascript" src="{% static 'projectroles/js/search.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true
    $(document).ready(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.sorting').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.sorting 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 %}
