{% extends "questions/base.html" %}
{% from "dashboards/includes/macros.html" import product_choice_list with context %}
{% set title = _('Support Forum Metrics') %}
{% set crumbs = [(url('questions.home'), _('Support Forums')),
                 (None, _('Metrics'))] %}
{% set scripts = ('questions.metrics',) %}
{% set ga_content_group = "support-forum-metrics" %}

{% block below_main %}
<section class="sumo-page-section">
  <h1 class="sumo-page-heading">{{ _('Support Forum Metrics') }}</h1>

  {% if not current_locale %}
    {% set base_url = url('questions.metrics')|urlparams(None, request.GET)|urlparams(product=None) %}
  {% else %}
    {% set base_url = url('questions.locale_metrics', current_locale)|urlparams(None, request.GET)|urlparams(product=None) %}
  {% endif %}
  {{ product_choice_list(products, product, base_url) }}

  <div class="choice-list">
    <label>{{ _('Locale:') }}</label>
    <ul class="tag-list">
      <li {% if not current_locale %}class="is-active"{% endif %}>
        {% if not current_locale %}
          {{ _('All') }}
        {% else %}
          <a href="{{ url('questions.metrics') }}">{{ _('All') }}</a>
        {% endif %}
      </li>
      {% for locale in AAQ_LANGUAGES %}
        <li {% if current_locale == locale %}class="is-active"{% endif %}>
          {% if current_locale == locale %}
            {{ locale }}
          {% else %}
            <a href="{{ url('questions.locale_metrics', locale)|urlparams(None, request.GET) }}">{{ locale }}</a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</section>
  {% set api_url = url('api.kpi.questions') %}
  {% if current_locale %}
    {% set api_url = api_url|urlparams(locale=current_locale) %}
  {% endif %}
  {% if product %}
    {% set api_url = api_url|urlparams(product=product.slug) %}
  {% endif %}
  <section id="questions-metrics" data-url="{{ api_url }}" class="sumo-page-section">
    <div class="rickshaw">
      <div class="inline-controls"></div>
      <div class="graph-container">
        <div class="slider"></div>
        <div class="graph"></div>
      </div>
    </div>
  </section>
{% endblock %}

{% block side %}
{% endblock %}