<!--
  templateType: blog_listing
  isAvailableForNewContent: true
  label: Fasterrr - blog listing
  screenshotPath: ../images/template-previews/blog-index.png
-->
{% set template_css = "../../css/templates/blog.css" %}
{% extends "./layouts/base.html" %}

{% block head_extra %}
  {# RSS discovery for readers and AI/aggregator crawlers #}
  <link rel="alternate" type="application/rss+xml" title="{{ group.html_title }}" href="{{ group.absolute_url }}/rss.xml">
{% endblock %}

{% block body %}
{% dnd_area "dnd_area"
  label="Main section",
  class="body-container body-container--blog-index"
%}

  {# Hero banner #}
  {# Translucent grey (≈#F7F8FA on white) so the hero band adapts to dark mode
     without a CSS hook — css_class isn't a supported dnd_section param (audit N1). #}
  {% dnd_section
    background_color={ "r": 127, "g": 131, "b": 139, "a": 0.06 },
    max_width=600,
    padding={
      "default": {
        "top": 80,
        "right": 0,
        "bottom": 80,
        "left": 0
      },
      "mobile": {
        "top": 80,
        "right": 20,
        "bottom": 80,
        "left": 20
      }
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "blog_header" path="@hubspot/rich_text", label="Blog Header" %}
          {% module_attribute "html" %}
            <div style="text-align: center;">
              <h1>Blog</h1>
              <p>Use this space to tell everyone about what you have to offer.</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "blog_subscribe"
          path="@hubspot/blog_subscribe",
          label="Blog Subscribe",
          title=""
        %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Blog listings and pagination #}
  {% dnd_section
    vertical_alignment="TOP"
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "blog_posts" path="@hubspot/blog_posts", label="Blog Posts" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "blog_pagination" path="@hubspot/pagination", label="Blog Pagination" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}
{% endblock body %}
