{% macro help_topics(topics, product_slug=None, new_tab=False) -%}
{# topics: List of topic_data dicts containing:
    - topic: Topic model instance
    - topic_url: URL to topic page
    - title: Topic title
    - total_articles: Number of articles
    - image_url: URL to topic icon
    - documents: three documents for the topic
#}
<div class="topics-section">
  <div class="topics-grid">
    {% for topic_data in topics %}
    <div class="card--topic">
      <div class="topic-header">
        <img
          class="card--icon"
          src="{{ topic_data.image_url }}"
          alt="{{ pgettext('DB: products.Topic.title', topic_data.title) }} icon"
          loading="lazy"
        />
          <h3 class="card--title">
            <a href="{{ topic_data.topic_url }}">
              {{ pgettext('DB: products.Topic.title', topic_data.title) }}
            </a>
          </h3>
      </div>
      <ul class="article-list">
        {% for document in topic_data.documents %}
        <li>
          <a href="{{ document.get_absolute_url() | replace('/' + settings.WIKI_DEFAULT_LANGUAGE + '/', '/' + request.LANGUAGE_CODE + '/')}}">
            {{ document.title }}</a>
        </li>
        {% endfor %}
      </ul>
      <a class="view-all-link" href="{{ topic_data.topic_url }}">View All {{ topic_data.total_articles }} Articles</a>
    </div>
    {% endfor %}
  </div>
</div>
{%- endmacro %}



{% macro topic_metadata(topics, product=None) %}
{% if product and has_aaq_config and not settings.READ_ONLY %}
  <section class="support-callouts mzp-l-content sumo-page-section--inner">
    <div class="card card--ribbon is-inverse heading-is-one-line">
      <div class="card--details">
        <h3 class="card--title">
          <svg class="card--icon-sm" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
              <g transform="translate(2.000000, 1.878680)" stroke="#FFFFFF" stroke-width="2">
                <path d="M9,1.12132031 L2,1.12132031 C0.8954305,1.12132031 5.32907052e-15,2.01675081 5.32907052e-15,3.12132031 L5.32907052e-15,15.1213203 C5.32907052e-15,16.2258898 0.8954305,17.1213203 2,17.1213203 L11,17.1213203 L13,21.1213203 L15,17.1213203 L17,17.1213203 C18.1045695,17.1213203 19,16.2258898 19,15.1213203 L19,9.12132031"></path>
                <path d="M15.5,0.621320312 C16.3284271,-0.207106783 17.6715729,-0.207106769 18.5,0.621320344 C19.3284271,1.44974746 19.3284271,2.79289318 18.5,3.62132031 L11,11.1213203 L7,12.1213203 L8,8.12132031 L15.5,0.621320312 Z"></path>
              </g>
            </g>
          </svg>

          {{ _('Still need help?') }}
        </h3>
        <p class="card--desc">
          {% if product and product.has_ticketing_support %}
            {{ _('We’re here for you! If you haven’t found a solution after exploring our help articles, you can get in touch with our support team.') }}
          {% else %}
            {{ _('We’re here for you. Post a question to our support forums and get answers from our community of experts.') }}
          {% endif %}
        </p>
        <a class="sumo-button primary-button button-lg"
          href="{{ url('questions.aaq_step2', product_slug=product.slug) }}"
          data-event-name="link_click"
          data-event-parameters='{
            "link_name": "aaq-banner.aaq-step-2",
            "link_detail": "{{ product.slug }}"
          }'>
          {% if product and product.has_ticketing_support %}
            {{ _('Get Support') }}
          {% else %}
            {{ _('Ask the Community') }}
          {% endif %}
        </a>
      </div>
    </div>
  </section>
{% endif %}
{%- endmacro %}

{% macro topic_sidebar(topics, subtopics, product=None, selected_topic=None, selected_subtopic=None) -%}
{% if topics %}
  <h3 class="sidebar-subheading large-only">{{ _('Popular') }} {% if product %} {{ product }} {% endif %} {{ _('Topics') }}</h3>
  <nav class="sidebar-nav topics">
    <span class="details-heading"></span>
    <ul class="sidebar-nav--list">
      {% for topic in topics %}
        {% if product %}
          {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
          {% set link_detail = product.slug + '/' + topic.slug %}
        {% else %}
          {% set topic_url = url('products.topic_documents', topic_slug=topic.slug) %}
          {% set link_detail = topic.slug %}
        {% endif %}
          <li class="sidebar-nav--item {% if subtopics %}has-subtopics {% endif %}{% if selected_subtopic != None %} subtopic-selected{% endif %}">
            <a class="
              sidebar-nav--link
              {% if selected_topic == topic and selected_subtopic == None %}selected{% endif %}
              {% if selected_topic == topic and selected_subtopic != None %}show-selected-on-lg{% endif %}
              "
              href="{{ topic_url }}"
              data-event-name="link_click"
              data-event-parameters='{
                "link_name": "sidebar.product-and-topic-home",
                "link_detail": "{{ link_detail }}"
              }'>
              {{ pgettext('DB: products.Topic.title', topic.title) }}
            </a>

            {% if selected_topic == topic %}
              <ul class="sidebar-nav--sublist">
              {% for subtopic in subtopics %}
                {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
                <li class="sidebar-nav--subitem">
                  <a class="sidebar-nav--sublink {% if subtopic == selected_subtopic %}selected{% endif %}" href="{{ subtopic_url }}"
                    data-event-name="link_click"
                    data-event-parameters='{
                      "link_name": "sidebar.product-and-topic-and-subtopic-home",
                      "link_detail": "{{ product.slug + '/' + topic.slug + '/' + subtopic.slug }}"
                    }'>
                    {{ pgettext('DB: products.Topic.title', subtopic.title) }}
                  </a>
                </li>
              {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  {% endif %}
{%- endmacro %}


{% macro topic_tabs(topics, subtopics, product, topic, selected_subtopic=None) -%}
<nav class="tabs">
  <ul class="tabs--list subtopics">
    {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
    <li class="tabs--item">
      <a class="tabs--link {% if not selected_subtopic %}is-active{% endif %}" href="{{ topic_url }}"
        data-event-name="link_click"
        data-event-parameters='{
          "link_name": "tab.product-and-topic-home",
          "link_detail": "{{ product.slug + '/' + topic.slug }}"
        }'>
        <span class="mobile-only">{{ _('All') }}</span>
        <span class="hide-on-mobile">{{ _('All articles and threads') }}</span>
      </a>
    </li>
    {% for subtopic in subtopics %}
      {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
      <li class="tabs--item">
        <a class="tabs--link {% if subtopic == selected_subtopic %}is-active{% endif %}" href="{{ subtopic_url }}"
          data-event-name="link_click"
          data-event-parameters='{
            "link_name": "tab.product-and-topic-and-subtopic-home",
            "link_detail": "{{ product.slug + '/' + topic.slug + '/' + subtopic.slug }}"
          }'>
          <span>{{ pgettext('DB: products.Topic.title', subtopic.title) }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
{%- endmacro %}