{% extends 'base.html' %}
{% load icon_tags %}
{% load guardian_tags %}
{% load static i18n %}

{% block content %}

{# full text search in names, descriptions, tags #}

<div class="tab-content mt-2">
  <div class="tab-pane active">
    <div id="search-results"></div>
  </div>
</div>

{% endblock content %}

{% block javascript %}

{# Some JSON code to define JS variables from Django context #}
{{ category_filter_choices | json_script:"category-filter-choices" }}
{{ sharing_status_filter_choices | json_script:"sharing-status-filter-choices" }}
{{ select_tab_state | json_script:"initial-select-tab-state" }}
{{ base_urls | json_script:"base-urls" }}

<script>
  function item_button_link_attributes(urls, urlname) {
    let attr = "";
    if (urls.hasOwnProperty(urlname)) {
      attr = `href="${urls[urlname]}"`;
    } else {
      attr = "href='#' disabled";
    }
    return attr;
  }

  function item_buttons(urls) {
    // urls: object with url names as keys and urls as values
    //
    // Use this function to compile buttons for surfaces and topographies in the result table
    // Returns buttons as HTML.
    let result = "";
    if (urls.hasOwnProperty('detail')) {
      result += `
                <a href="${urls['detail']}" class="btn btn-outline-secondary" type="button">
                    View
                </a>
              `
    }
    if (urls.hasOwnProperty('analyze')) {
      result += `
                <a href="${urls['analyze']}" class="btn btn-outline-secondary" type="button">
                    Analyze
                </a>
              `
    }
    if (urls.hasOwnProperty('download')) {
      result += `
                <a href="${urls['download']}" class="btn btn-outline-secondary" type="button">
                    Download
                </a>
              `
    }
    return result;
  }

  // Pass some data from Django context to Javascript
  const category_filter_choices = JSON.parse(document.getElementById('category-filter-choices').textContent);
  const sharing_status_filter_choices = JSON.parse(document.getElementById('sharing-status-filter-choices').textContent);
  const base_urls = JSON.parse(document.getElementById('base-urls').textContent);
  const initial_select_tab_state = JSON.parse(document.getElementById('initial-select-tab-state').textContent);

  topobank.base.createSearchResultsApp(
    '#search-results', '{{ csrf_token }}', {
      baseUrls: base_urls,
      category: initial_select_tab_state.category,
      categoryFilterChoices: category_filter_choices,
      currentPage: initial_select_tab_state.current_page,
      isAnonymous: {{ request.user.is_anonymous|yesno:'true,false' }},
      initialSelection: {{ basket_items_json | safe }},
      pageSize: initial_select_tab_state.page_size,
      searchTerm: initial_select_tab_state.search_term,
      sharingStatus: initial_select_tab_state.sharing_status,
      sharingStatusFilterChoices: sharing_status_filter_choices,
      treeMode: initial_select_tab_state.tree_mode
    }
  );
</script>

{% endblock javascript %}
