{# djlint: off #}
<noscript>
  <section class="{% if section_classes %}{{ section_classes }}{% else %}p-strip{% endif %}">
    <div class="row">
      <h3><a href="/blog{% if tag_name %}/tag/{{ tag_name }}{% endif %}">Read the latest {{ heading_topic }} news on our blog&nbsp;&rsaquo;</a></h3>
    </div>
  </section>
</noscript>

<section class="u-hide {% if section_classes %}{{ section_classes }}{% else %}p-strip{% endif %}" data-js="latest-news">
  <div class="row p-section--shallow">
    {% if request.path == "/" %}
    <h2 class="p-heading--1">
    {% else %}
    <h2 class="{% if heading_class %}{{ heading_class }}{% else %}p-heading--3{% endif %}">
    {% endif %}
      {% if request.path == "/observability" %}
        More about {{ heading_topic }} in
      {% else %}
        Latest {{ heading_topic }} news from
      {% endif %}
        <a href="/blog{% if tag_name %}/tag/{{ tag_name }}{% endif %}" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'blog', 'eventAction' : 'clicks blog feed link', 'eventLabel' : 'ubuntu.com{% if tag_name %}/{{ tag_name }}{% else %} homepage{% endif %}', 'eventValue' : undefined });">our blog&nbsp;&rsaquo;</a>
    </h2>
  </div>
  <div class="row">
    <div class="{% if spotlight %}col-9{% else %}col-12{% endif %}">
      <div id="horizontal-latest-articles" class="row">
        <div style="min-height: 9.1rem"><i class="p-icon--spinner u-animation--spin">Loading...</i></div>
      </div>
    </div>
    {% if spotlight %}
    <div id="spotlight" class="col-3">
    </div>
    {% endif %}
  </div>

  <template style="display:none" id="horizontal-articles-template">
    <hr class="p-rule--muted u-hide--large" />
    <div class="col-3">
      <div class="row">
        <div class="col-medium-2 col-small-4 col-3">
          {% if article_image %}
          <div class="u-crop--16-9 u-hide--small">
            <div class="article-image p-image-wrapper"></div>
          </div>
          {% endif %}
          {% if article_date %}
          <p class="u-no-margin--bottom p-muted-heading">
            <time datetime="" class="article-time"></time>
          </p>
          {% endif %}
        </div>
        <div class="col-medium-4 col-small-4 col-3">
          <h3 class="p-heading--5"><a class="article-link article-title"></a></h3>
          {% if article_excerpt %}
          <p class="article-excerpt"></p>
          {% endif %}
        </div>
      </div>
    </div>
  </template>

  {% if spotlight %}
  <template style="display:none" id="spotlight-template">
    <hr class="p-rule--muted u-hide--large" />
    <div class="row">
      <div class="col-medium-2 col-small-4 col-3">
        <p class="u-no-margin--bottom p-muted-heading">
          Spotlight
        </p>
      </div>
      <div class="col-medium-4 col-small-4 col-3">
        <h3 class="p-heading--5">
          <a class="article-link article-title"></a>
        </h3>
      </div>
    </div>
  </template>
  {% endif %}

  <script src="{{ versioned_static('js/dist/latest-news.js') }}"></script>
  <script>
    canonicalLatestNews.fetchLatestNews(
      {
        articlesContainerSelector: "#horizontal-latest-articles",
        articleTemplateSelector: "#horizontal-articles-template",
        {% if spotlight %}spotlightContainerSelector: "#spotlight",
        spotlightTemplateSelector: "#spotlight-template",{% endif %}
        gtmEventLabel: "ubuntu.com{% if tag_name %}/{{ tag_name }}{% else %} homepage{% endif %}",
        {% if tag_name %}tagId: "{{ tag_id }}",{% endif %}
        {% if limit %}limit: "{{ limit }}",{% endif %}
      }
    )
</script>
</section>