{% extends "base.html" %}
{% from 'products/includes/topic_macros.html' import topic_sidebar, topic_tabs %}
{% from 'products/includes/product_macros.html' import product_dropdown %}
{% from 'includes/common_macros.html' import download_firefox, sumo_banner %}
{% from 'wiki/includes/document_macros.html' import document_metadata with context %}
{% from "questions/includes/aaq_macros.html" import aaq_widget %}

{% if product %}
  {% set crumbs = [(url('products.product', slug=product.slug), pgettext('DB: products.Product.title', product.title))] %}
  {% if subtopic %}
    {% set ga_content_group = "product-and-topic-and-subtopic-home" %}
    {% set crumbs = crumbs + [(url('products.documents', product_slug=product.slug, topic_slug=topic.slug), pgettext('DB: products.Topic.title', topic.title)), (None, pgettext('DB: products.Topic.title', subtopic.title))] %}
    {% set canonical_url = canonicalize(model_url=subtopic.get_absolute_url(product.slug)) %}
  {% else %}
    {% set ga_content_group = "product-and-topic-home" %}
    {% set crumbs = crumbs + [(None, pgettext('DB: products.Topic.title', topic.title))] %}
    {% set canonical_url = canonicalize(model_url=topic.get_absolute_url(product.slug)) %}
  {% endif %}
  {% set search_params = {'product': product.slug} %}
  {% set ga_products = "/" + product.slug + "/" %}
  {% set page_title = pgettext('DB: products.Topic.title', topic.title) + ' | ' +  _('{product} Help')|f(product=pgettext('DB: products.Product.title', product.title)) %}
{% else %}
  {% set crumbs = [(url('products.topic_documents', topic_slug=topic.slug), pgettext('DB: products.Topic.title', topic.title))] %}
  {% set search_params = {'topic': topic.slug} %}
  {% set page_title = pgettext('DB: products.Topic.title', topic.title) %}
    {% set ga_content_group = "topic-home" %}
{% endif %}
{% block title %}{{ page_title }}{% endblock %}

{% set scripts = ('topics',) %}
{% set ga_topics = "/" + topic.slug + "/" %}

{% block above_main %}
{% endblock %}

{% block side %}
<div class="search-form-sidebar large-only">
  {{ search_box(settings, id='support-search-sidebar', params=search_params) }}
</div>

{% if topic_navigation %}
  {{ product_dropdown(products, topic, selected_product=product) }}
  {{ topic_sidebar(topic_list, selected_topic=topic) }}
{% else %}
  {{ topic_sidebar(topics[:10], subtopics, product, topic, subtopic) }}
{% endif %}

{{ aaq_widget(request, topic=topic) }}

{% endblock %}

{% block content %}
    <article id="document-list">
      {% if topic_navigation %}
        {% include 'products/includes/topic_documents.html' %}
      {% else %}
        {% include 'products/includes/product_documents.html' %}
      {% endif %}

      <section class="topic-list">
        {% for document in documents %}
          <article class="topic-article no-bottom-margin">
            <div class="topic-article--icon-wrap">
              <img class="topic-article--icon" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="" />
            </div>
            <div class="topic-article--text">
              <h2 class="sumo-card-heading">
                <a href="{{ document['url'] }}"
                  data-event-name="link_click"
                  data-event-parameters='{"link_name": "kb-article"}'>
                  {{ document['document_title'] }}
                </a>
              </h2>
              <p>{{ document['document_summary'] }}</p>
             {{ document_metadata(document['created'], document['is_first_revision'], document['product_titles'], helpful_votes=None, metadata_type="list") }}
            </div>
          </article>
        {% endfor %}
      </section>

      {% if fallback_documents %}
        <h2 class="sumo-page-subheading">{{ _('In English') }}</h2>
        <section class="topic-list">
        {% for document in fallback_documents %}
          <article>
            <h3 class="sumo-card-heading">
              <a href="{{ document['url']|replace('/'+ settings.WIKI_DEFAULT_LANGUAGE +'/', '/' + request.LANGUAGE_CODE + '/') }}">
                {{ document['document_title'] }}
              </a>
            </h3>
          </article>
        {% endfor %}
        </section>
      {% endif %}
    </article>

    <section id="get-involved-button" class="sumo-page-section document-get-involved">
      {% include "landings/includes/volunteer-callout.html" %}
    </section>

{% endblock %}

{% block below_main %}
{% endblock %}

{% block for_contributors %}{% endblock %}