{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- paginate blog.articles by 6 -%}
  {%- liquid
    # Optional: lift the latest post out of the grid and run it as a featured
    # card, page 1 only. Off by default, so every page is a clean grid of 6.
    assign featured_article = null
    if section.settings.show_featured and paginate.current_page == 1
      assign featured_article = blog.articles.first
    endif
  -%}
  <div class="main-blog page-width section-{{ section.id }}-padding">
    <div class="spacer-56 mspacer-40"></div>

    {%- comment -%} Search + topic filter, sitting over the featured media band
    (columns 5-12) the way the reference places its topic select. Topic filtering
    is Shopify's native blog tag route, so it holds across all pages.
    {%- endcomment -%}
    <div class="bsb-controls">
      {%- if section.settings.heading != blank -%}
        <h1 class="bsb-controls__title">{{ section.settings.heading | escape }}</h1>
      {%- endif -%}

      <form class="bsb-field bsb-field--search" action="{{ routes.search_url }}" method="get" role="search">
        <label class="bsb-field__label" for="bsb-blog-q">{{ section.settings.search_label | escape }}</label>
        <input type="hidden" name="type" value="article">
        <div class="bsb-field__control">
          <input
            class="bsb-field__input"
            id="bsb-blog-q"
            type="search"
            name="q"
            placeholder="{{ section.settings.search_placeholder | escape }}">
          <button class="bsb-field__submit" type="submit" aria-label="{{ section.settings.search_label | escape }}">
            <svg width="17" height="17" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.75" stroke="currentColor" stroke-width="1.5"/><path d="M12.8 12.8L17.5 17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          </button>
        </div>
      </form>

      {%- liquid
        # Topics come from the setting until the articles are actually tagged;
        # clear the setting and the list falls back to the blog's real tags.
        assign topic_list = section.settings.topics | split: ','
        if topic_list.size == 0
          assign topic_list = blog.all_tags
        endif
      -%}
      {%- if topic_list.size > 0 -%}
        <div class="bsb-field bsb-field--topic">
          <label class="bsb-field__label" for="bsb-blog-topic">{{ section.settings.topic_label | escape }}</label>
          <div class="bsb-field__control bsb-field__control--select">
            <select class="bsb-field__input" id="bsb-blog-topic" data-blog-topic>
              <option value="{{ blog.url }}"{% if current_tags == empty %} selected{% endif %}>{{ section.settings.topic_all | escape }}</option>
              {%- for topic in topic_list -%}
                {%- assign topic_name = topic | strip -%}
                {%- if topic_name != blank -%}
                  {%- comment -%} Shopify 404s /tagged/x until some article carries
                  tag x, so a topic stays disabled until it has posts. Tag an
                  article and its topic goes live on its own. {%- endcomment -%}
                  <option
                    value="{{ blog.url }}/tagged/{{ topic_name | handle }}"
                    {% unless blog.all_tags contains topic_name %}disabled{% endunless %}
                    {% if current_tags contains topic_name %}selected{% endif %}>{{ topic_name }}</option>
                {%- endif -%}
              {%- endfor -%}
            </select>
            <svg class="bsb-field__caret" width="14" height="9" viewBox="0 0 14 9" fill="none" aria-hidden="true"><path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
        </div>
      {%- endif -%}
    </div>

    {%- if featured_article -%}
      {%- assign feat_excerpt = featured_article.excerpt | default: featured_article.content | strip_html | truncatewords: 75 -%}
      <a class="bsb-feature" href="{{ featured_article.url }}">
        <div class="bsb-feature__body">
          {%- if section.settings.show_date -%}
            <p class="bsb-feature__meta">{{ featured_article.published_at | time_tag: format: 'date' }}</p>
          {%- endif -%}
          <h2 class="bsb-feature__title">{{ featured_article.title | escape }}</h2>
          {%- if feat_excerpt != blank -%}
            <p class="bsb-feature__excerpt">{{ feat_excerpt }}</p>
          {%- endif -%}
          <span class="bsb-more">
            {{ section.settings.cta_label | escape }}
            <svg width="17" height="17" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M12.0016 19.6888L10.3127 17.9999L15.1127 13.1999H4.33496L4.33496 10.8444H15.1127L10.3127 6.04436L12.0016 4.35547L19.6683 12.0221L12.0016 19.6888Z" fill="currentColor"/></svg>
          </span>
        </div>
        <div class="bsb-feature__frame">
          {%- if featured_article.image -%}
            <img
              src="{{ featured_article.image | image_url: width: 1200 }}"
              srcset="{{ featured_article.image | image_url: width: 600 }} 600w, {{ featured_article.image | image_url: width: 1200 }} 1200w, {{ featured_article.image | image_url: width: 1800 }} 1800w"
              sizes="(max-width: 991px) 100vw, 62vw"
              width="{{ featured_article.image.width }}"
              height="{{ featured_article.image.height }}"
              alt="{{ featured_article.image.alt | escape }}">
          {%- endif -%}
        </div>
      </a>
    {%- endif -%}

    <div class="base-grid blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
      {%- for article in blog.articles -%}
        {%- if featured_article and article.id == featured_article.id -%}{%- continue -%}{%- endif -%}
        {%- liquid
          # Mark the newest post — first card of page 1, and only when it hasn't
          # already been lifted out into the featured slot.
          assign is_latest = false
          if paginate.current_page == 1 and forloop.first and featured_article == nil
            assign is_latest = true
          endif
        -%}
        <div class="blog-articles__article article">
          {%- render 'article-card',
            article: article,
            media_height: section.settings.image_height,
            media_aspect_ratio: article.image.aspect_ratio,
            show_image: section.settings.show_image,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: section.settings.show_excerpt,
            cta_label: section.settings.cta_label,
            is_latest: is_latest,
            latest_label: section.settings.latest_label
          -%}
        </div>
      {%- endfor -%}
    </div>

    {%- if paginate.pages > 1 -%}
      {%- render 'pagination', paginate: paginate -%}
    {%- endif -%}
    <div class="spacer-240 mspacer-80"></div>
  </div>
{%- endpaginate -%}

<script>
  (function () {
    var topic = document.querySelector('[data-blog-topic]');
    if (topic) {
      topic.addEventListener('change', function () {
        if (this.value) window.location.href = this.value;
      });
    }
  })();
</script>

{% schema %}
{
  "name": "t:sections.main-blog.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Page heading",
      "info": "The page h1. Blank by default — enter text to show one."
    },
    {
      "type": "header",
      "content": "Search and topics"
    },
    {
      "type": "text",
      "id": "search_label",
      "label": "Search label",
      "default": "Search"
    },
    {
      "type": "text",
      "id": "search_placeholder",
      "label": "Search placeholder",
      "default": "Search articles"
    },
    {
      "type": "text",
      "id": "topic_label",
      "label": "Topic label",
      "default": "Topic"
    },
    {
      "type": "textarea",
      "id": "topics",
      "label": "Topics",
      "default": "Production Updates, News, Announcements, Tutorials, Tips & Tricks",
      "info": "Comma-separated. Each one links to that article tag, so tag articles with these exact names. Leave blank to list the blog's real tags instead."
    },
    {
      "type": "text",
      "id": "topic_all",
      "label": "Topic — all option",
      "default": "All"
    },
    {
      "type": "header",
      "content": "Featured post"
    },
    {
      "type": "checkbox",
      "id": "show_featured",
      "default": false,
      "label": "Feature the latest post",
      "info": "Runs the newest post as a wide card above the grid, on page 1 only. Off: every page is a plain grid of 6."
    },
    {
      "type": "header",
      "content": "Cards"
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "default": true,
      "label": "Show excerpts"
    },
    {
      "type": "text",
      "id": "cta_label",
      "label": "Link text",
      "default": "Read more",
      "info": "Used on the featured post and every card."
    },
    {
      "type": "text",
      "id": "latest_label",
      "label": "Newest post chip",
      "default": "Latest",
      "info": "Violet chip on the newest post, page 1 only. Leave blank to hide."
    },
    {
      "type": "header",
      "content": "t:sections.main-blog.settings.header.content"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "grid",
          "label": "t:sections.main-blog.settings.layout.options__1.label"
        },
        {
          "value": "collage",
          "label": "t:sections.main-blog.settings.layout.options__2.label"
        }
      ],
      "default": "collage",
      "label": "t:sections.main-blog.settings.layout.label",
      "info": "t:sections.main-blog.settings.layout.info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.main-blog.settings.show_image.label"
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-blog.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.main-blog.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-blog.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-blog.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.main-blog.settings.image_height.label",
      "info": "t:sections.main-blog.settings.image_height.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.main-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.main-blog.settings.show_author.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.main-blog.settings.paragraph.content"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}