<!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Fasterrr - blog post
  screenshotPath: ../images/template-previews/blog-post.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">

  {# BlogPosting structured data — entity attribution for answer engines #}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": {{ content.name|tojson }},
    "url": {{ content.absolute_url|tojson }},
    "datePublished": "{{ content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S%z') }}",
    "dateModified": "{{ content.updated|datetimeformat('%Y-%m-%dT%H:%M:%S%z') }}",
    {% if content.featured_image %}"image": {{ content.featured_image|tojson }},{% endif %}
    "author": { "@type": "Person", "name": {{ content.blog_post_author.display_name|tojson }} },
    "publisher": { "@type": "Organization", "name": {{ site_settings.company_name|tojson }} },
    "description": {{ (content.meta_description or content.post_summary|striptags|truncate(160))|tojson }}
  }
  </script>
{% endblock %}

{% block body %}
<div class="body-container body-container--blog-post">

  {# Blog post #}

  <div class="content-wrapper">
    <article class="blog-post">
      <h1>{{ content.name|sanitize_html }}</h1>
      <div class="blog-post__meta">
        <a href="{{ blog_author_url(group.id, content.blog_post_author.slug)|escape_url }}" rel="author">
          {{ content.blog_post_author.display_name|escape_html }}
        </a>
        <time datetime="{{ content.publish_date|escape_attr }}" class="blog-post__timestamp">
          {{ content.publish_date_localized|escape_html }}
        </time>
        {# Freshness signal — only when updated on a later day than published #}
        {% if content.updated|datetimeformat('%Y%m%d') > content.publish_date|datetimeformat('%Y%m%d') %}
          <time datetime="{{ content.updated|escape_attr }}" class="blog-post__timestamp blog-post__timestamp--updated">
            Updated {{ content.updated_localized|escape_html }}
          </time>
        {% endif %}
      </div>
      <div class="blog-post__body">
        {{ content.post_body }}{# escaped elsewhere #}
      </div>
      {% if content.tag_list %}
        <div class="blog-post__tags">
          {% icon
            name="tag",
            purpose="decorative",
            style="SOLID"
          %}
          {% for tag in content.tag_list %}
            <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}" rel="tag">{{ tag.name|escape_html }}</a>{% if not loop.last %},{% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </article>
    {% if group.allow_comments %}
      <div class="blog-comments">
        {% module "blog_comments"
          path="@hubspot/blog_comments",
          label="Blog comments"
        %}
      </div>
    {% endif %}
  </div>

  {# Recent posts listing #}

  {# This macro is used to format each recent post card and gets passed to the related_blog_posts HubL tag below #}

  {% macro related_posts(post, count, total) %}
    {% if count == 1 %}
      <section class="blog-related-posts">
        <div class="content-wrapper">
          <h2>Read On</h2>
          <div class="blog-related-posts__list">
    {% endif %}
            <article class="blog-related-posts__post" aria-label="Blog post summary: {{ post.name|escape_attr }}">
              {% if post.featured_image %}
                <a class="blog-related-posts__post-image-wrapper" href="{{ post.absolute_url|escape_url }}" aria-label="{% if post.featured_image_alt_text %} Featured image: {{ post.featured_image_alt_text|escape_attr }} - {% endif %}Read full post: {{ post.name|escape_attr }}">
                  <img class="blog-related-posts__image" src="{{ resize_image_url(post.featured_image, 352)|escape_url }}" loading="lazy" width="352" height="198" alt="{{ post.featured_image_alt_text|escape_attr }}">
                </a>
              {% endif %}
              <div class="blog-related-posts__content">
                <h3 class="blog-related-posts__title">
                  <a class="blog-related-posts__title-link" href="{{ post.absolute_url|escape_url }}">{{ post.name|escape_html }}</a></h3>
                {{ post.post_summary|truncatehtml(100)|sanitize_html("STRIP") }}
              </div>
            </article>
      {% if count == total %}
          </div>
        </div>
      </section>
    {% endif %}
  {% endmacro %}

  {% related_blog_posts
    limit=3,
    no_wrapper=True,
    post_formatter="related_posts"
  %}

</div>
{% endblock body %}
