{% extends "questions/base.html" %}

{% set classes = 'questions' %}
{% set title = _('Community Forums') %}
{% set crumbs = [(None, _('Community Forums'))] %}
{% set meta = (('robots', 'noindex'),) %}
{% set canonical_url = canonicalize(viewname='questions.home') %}
{% set ga_content_group = "list-support-forums" %}

{% block contentwrap %}
<section id="main-content" class="sumo-page-section--lg mzp-l-content">
  <div class="home-search-section--content">
    <h1 class="sumo-page-heading">{{ title }}</h1>
    <p class="sumo-page-intro">{{ _('Browse by product') }}</p>




    <div class="product-list sumo-card-grid">
      <div class="scroll-wrap">
        {% for product in products %}
        <div class="card card--product zoom-on-hover product">
          <img class="card--icon" src="{{ product.image_alternate_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}">
          <div class="card--details">
            <h3 class="card--title">
              <a class="expand-this-link title" href="{{ url('questions.list', product.slug) }}"
                data-event-name="link_click"
                data-event-parameters='{
                  "link_name": "support-forum-home",
                  "link_detail": "{{ product.slug }}"
                }'>
                {{ _('<strong>{product}</strong> Community Forum')|fe(product=pgettext('DB: products.Product.title', product.title)) }}
              </a>
            </h3>
            <p class="card--desc description">{{ pgettext('DB: products.Product.description', product.description) }}</p>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    <div class="sumo-button-wrap align-end product">
      <a class="sumo-button primary-button button-lg title" href="{{ url('questions.list', 'all') }}"
        data-event-name="link_click"
        data-event-parameters='{
          "link_name": "support-forum-home",
          "link_detail": "all"
        }'>
        {{ _('{product} Community Forums')|fe(product=_('All Products')) }}
      </a>
    </div>
  </div>
</section>
{% endblock %}