{% extends "projects/project_edit_base.html" %}

{% load trans from i18n %}

{% block title %}
  {% trans "Search Analytics" %}
{% endblock title %}
{% block project_search_analytics_active %}
  active
{% endblock project_search_analytics_active %}
{% block project_edit_content_header %}
  {% trans "Search Analytics" %}
{% endblock project_edit_content_header %}

{% block project_edit_content %}
  {% comment %}
    Conditionally show this block if feature is enabled for organization. The
    ``enabled`` variable comes from the view.

    If the feature is enabled the top menu child blocks below will show. Otherwise
    overriding the ``top_menu`` block causes these blocks to not render.
  {% endcomment %}
  {% if not enabled %}
    {% include "organizations/includes/feature_disabled.html" with project=project plan="Advanced" %}
  {% endif %}
  <div class="{% if not enabled %}ui basic fitted disabled segment{% endif %}"
       data-bind="using: ProjectSearchAnalyticsView()">

    {% include "projects/partials/edit/search_query_list.html" with objects=queries %}

    <h3 class="ui small header">
      {% trans "Overview" %}
      <div class="sub header">{% trans "For the last month" %}</div>
    </h3>
    {% if query_count_of_1_month.labels and query_count_of_1_month.int_data %}
      <div class="ui loading segment" data-bind="css: {loading: is_loading}">
        <canvas width="400" height="150" data-bind="chart: config"></canvas>
        <script type="application/json" data-bind="jsonInit: config">
          {
            "type": "line",
            "data": {
              "labels": [
                {% for label in query_count_of_1_month.labels %}
                  "{{ label|escapejs }}"{% if not forloop.last %},{% endif %}
                {% endfor %}
              ],
              "datasets": [
                {
                  "label": "{% trans "Number of searches" %}",
                  "data": {{ query_count_of_1_month.int_data|escapejs }},
                  "fill": false
                }
              ]
            },
            "options": {
              "scales": {
                "yAxes": [{
                  "ticks": {
                    "beginAtZero": true
                  }
                }]
              }
            }
          }
        </script>
      </div>
    {% endif %}
  </div>
{% endblock project_edit_content %}

{% block project_edit_sidebar_help_topics %}
  {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/guides/search-analytics.html" text="How to use search analytics" is_external=True class="item" %}
  {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/guides/technical-docs-seo-guide.html" text="How to do search engine optimization (SEO) for documentation projects" is_external=True class="item" %}
{% endblock project_edit_sidebar_help_topics %}