Blog Grid Feed

{% set bg_color = section.settings.bg_color | default("#ffffff") %}
{% set pad_y = section.settings.padding_y | default(60) %}

<section id="jw-section-{{ section.id }}" style="background-color: {{ bg_color }}; padding: {{ pad_y }}px 20px;">
    <div class="jw-container" data-id="{{ section.id }}">
        
        {# SECTION HEADER #}
        <div class="text-center mb-5">
            <h2 class="fontStyle2" style="color: var(--color1);">{{ section.settings.title | default('Latest Articles') }}</h2>
            <p class="fontStyle7 text-muted">{{ section.settings.subtitle | default('Stay updated with our latest news.') }}</p>
        </div>

        {# BLOG FEED LOOP #}
        {% if blog.items %}
            <div class="row g-4 {% if blog.items|length <= 2 %}justify-content-center{% endif %}">
                {% for itemkey, blog_post in blog.items %}
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px; overflow: hidden; background: #fff;">
                            
                            {# IMAGE #}
                            <a href="{{ blog_post.url }}" class="d-block" style="height: 200px; overflow: hidden;">
                                <img src="{{ blog_post.img }}" alt="{{ blog_post['img.alt'] | default(blog_post.title) }}" 
                                     style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;" 
                                     onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=800&q=80';"
                                     onmouseover="this.style.transform='scale(1.05)';" onmouseout="this.style.transform='scale(1)';">
                            </a>

                            {# CONTENT #}
                            <div class="card-body p-4">
                                {# META DATA #}
                                {% if blog_post.created or blog_post.author or blog_post.views %}
                                    <div class="d-flex gap-3 mb-3 fontStyle9 text-muted" style="font-size: 0.85rem;">
                                        {% if blog_post.created %}<span><i class="fa-regular fa-calendar me-1"></i> {{ blog_post.created|date("M d, Y") }}</span>{% endif %}
                                        {% if blog_post.author %}<span><i class="fa-regular fa-user me-1"></i> {{ blog_post.author }}</span>{% endif %}
                                        {% if blog_post.views %}<span><i class="fa-regular fa-eye me-1"></i> {{ blog_post.views }} Views</span>{% endif %}
                                    </div>
                                {% endif %}

                                {# TITLE & DESC #}
                                {% if blog_post.title %}
                                    <h4 class="card-title fontStyle4 mb-3">
                                        <a href="{{ blog_post.url }}" style="color: var(--color1); text-decoration: none;">{{ blog_post.title }}</a>
                                    </h4>
                                {% endif %}
                                
                                {% if blog_post.description %}
                                    <p class="card-text fontStyle7 text-muted" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                                        {{ blog_post.description }}
                                    </p>
                                {% endif %}
                                
                                {# READ MORE #}
                                {% if blog_post.url %}
                                    <a href="{{ blog_post.url }}" class="fontStyle7 fw-bold mt-3 d-inline-block" style="color: var(--color1); text-decoration: none;">
                                        Read More <i class="fa fa-arrow-right ms-1"></i>
                                    </a>
                                {% endif %}
                            </div>

                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-5">
                <p class="text-muted fontStyle7">No blog posts available at the moment.</p>
            </div>
        {% endif %}

    </div>
</section>

{% rules %}
{
  "name": "Blog Grid Feed",
  "type": "BlogFeed",
  "blocks": [
    { "type": "themes" },
    { "type": "apps" }
  ],
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Latest Articles"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Section Subtitle",
      "default": "Stay updated with our latest news."
    },
    {
      "type": "color_background",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_y",
      "label": "Vertical Padding",
      "min": 0,
      "max": 150,
      "step": 10,
      "unit": "px",
      "default": 60
    }
  ],
  "presets": []
}
{% endrules %}