{% extends 'base.html' %}
{% load static %}

{% block title %}Blog{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1>Our Blog</h1>
        <p>Stories, guides, and insights from the world of Artistica Jewelry</p>
    </div>
</div>

<section class="content-page">
    <div class="container">
        {% if posts %}
        <div class="blog-grid">
            {% for post in posts %}
            <article class="blog-card">
                {% if post.image %}
                <div class="blog-card-image">
                    <img src="{{ post.image.url }}" alt="{{ post.title }}">
                </div>
                {% endif %}
                <div class="blog-card-body">
                    <p class="blog-card-meta">{{ post.published_date|date:"F j, Y" }} &middot; By {{ post.author }}</p>
                    <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
                    <p>{{ post.excerpt|truncatewords:30 }}</p>
                    <a href="{{ post.get_absolute_url }}" class="btn-link">Read More →</a>
                </div>
            </article>
            {% endfor %}
        </div>

        {% if is_paginated %}
        <div style="text-align: center; margin-top: 50px;">
            <div style="display: flex; justify-content: center; gap: 10px;">
                {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-sm">Previous</a>
                {% endif %}
                <span style="padding: 8px 20px; color: var(--color-text-light);">
                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                </span>
                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}" class="btn btn-sm">Next</a>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {% else %}
        <div style="text-align: center; padding: 80px 0;">
            <h2>Coming Soon</h2>
            <p>Our blog posts are on their way. Stay tuned for stories about our craftsmanship, jewelry care tips, and behind-the-scenes looks at our workshop.</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}