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

{% load trans from i18n %}

{% block title %}
  {% trans "Traffic Analytics" %}
{% endblock title %}
{% block project_traffic_analytics_active %}
  active
{% endblock project_traffic_analytics_active %}
{% block project_edit_content_header %}
  {% trans "Traffic 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: ProjectTrafficAnalyticsView()">

    {% include "projects/partials/edit/traffic_list.html" with objects=top_pages_200 show_addons_link=True http_status=200 %}

    {% if top_pages_200 %}
      <h3 class="ui small header">
        {% trans "Overview" %}
        <div class="sub header">{% trans "For the last month" %}</div>
      </h3>

      <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 page_data.labels %}
                "{{ label|escapejs }}"{% if not forloop.last %},{% endif %}
              {% endfor %}
            ],
            "datasets": [
              {
                "label": "{% trans "Number of views" %}",
                "data": {{ page_data.int_data|escapejs }},
                "fill": false
              }
            ]
          },
          "options": {
            "scales": {
              "yAxes": [{
                "ticks": {
                  "beginAtZero": true
                }
              }]
            }
          }
        }
        </script>
      </div>

      <h3 class="ui small header">
        {% trans "Not found pages (404)" %}
        <div class="sub header">{% trans "For the last month" %}</div>
      </h3>
      {% include "projects/partials/edit/traffic_list.html" with objects=top_pages_404 http_status=404 %}
    {% endif %}

  </div>
{% endblock project_edit_content %}

{% block project_edit_sidebar_help_topics %}
  {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/analytics.html" text="How to use traffic 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 %}