{% macro product_cards(products) -%}
<div class="sumo-card-grid is-product-wrap">
  <div class="scroll-wrap">
    {% for product in products %}
      <div class="card card--product zoom-on-hover">
          <img class="card--icon" src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
          <div class="card--details">
            <h3 class="card--title">
              <a class="expand-this-link" href="{{ url('products.product', slug=product.slug) }}"
                 data-event-name="link_click"
                 data-event-parameters='{
                   "link_name": "product-home",
                   "link_detail": "{{ product.slug }}"
                 }'>
                {{ pgettext('DB: products.Product.title', product.title) }}
              </a>
            </h3>
            <p class="card--desc">{{ pgettext('DB: products.Product.description', product.description) }}</p>
          </div>
      </div>
    {% endfor %}
  </div>
</div>
{%- endmacro %}

{% macro product_dropdown(products, topic, selected_product=None) -%}
  {% if products|length > 1 %}
    <h3 class="sidebar-subheading large-only">{{ _('Filter by product') }}</h3>

    <nav class="sidebar-nav topics">
      <span class="details-heading"></span>
      <select id="products-topics-dropdown" class="sidebar-nav--dropdown">
        <option value="{{ url('products.topic_documents', topic_slug=topic.slug) }}" {% if selected_product is none %}selected{% endif %}>
          {{ _('All Products') }}
        </option>
        {% for product in products %}
          <option value="{{ url('products.topic_product_documents', topic_slug=topic.slug, product_slug=product.slug) }}" 
                  {% if selected_product == product %}selected{% endif %}>
            {{ pgettext('DB: products.Product.title', product.title) }}
          </option>
        {% endfor %}
      </select>
    </nav>
  {% endif %}
{%- endmacro %}