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

{% block title %}Real Estate Blog | {{ site.site_name }} — Property Tips & Market News{% endblock %}
{% block meta_description %}Stay informed with real estate news and property investment tips from
{{ site.site_name }}.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Real Estate Blog</h1>
            <p>Property tips, market insights, and investment advice for the Nigerian market.</p>
        </div>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Blog</span>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="blog-layout">
            <!-- Main column -->
            <div>
                {% if categories %}
                <div class="blog-category-filter">
                    <a href="{% url 'blog:list' %}"
                        class="blog-cat-pill {% if not request.GET.category %}active{% endif %}">All</a>
                    {% for cat in categories %}
                    <a href="{% url 'blog:list' %}?category={{ cat.slug }}"
                        class="blog-cat-pill {% if request.GET.category == cat.slug %}active{% endif %}">{{ cat.name }}</a>
                    {% endfor %}
                </div>
                {% endif %}

                {% if posts %}
                <div class="blog-grid">
                    {% for post in posts %}
                    <article class="blog-card card fade-up">
                        <a href="{% url 'blog:detail' post.slug %}">
                            <div class="card-image">
                                {% if post.cover_image %}
                                <img src="{{ post.cover_image.url }}" alt="{{ post.title }}" loading="lazy">
                                {% else %}
                                <div class="blog-img-placeholder">
                                    <i class="fas fa-newspaper"></i>
                                </div>
                                {% endif %}
                            </div>
                        </a>
                        <div class="card-body">
                            <div class="blog-meta">
                                {% if post.category %}<span class="blog-category">{{ post.category.name }}</span>{% endif %}
                                <span class="blog-date">{{ post.published_at|date:"d M Y" }}</span>
                                <span class="blog-date"><i class="far fa-clock"></i> {{ post.reading_time }} min read</span>
                            </div>
                            <h2 class="blog-card-title"><a href="{% url 'blog:detail' post.slug %}">{{ post.title }}</a></h2>
                            <p class="blog-card-excerpt">{{ post.excerpt|truncatewords:18 }}</p>
                            <a href="{% url 'blog:detail' post.slug %}" class="blog-read-more">Read More <i
                                    class="fas fa-arrow-right"></i></a>
                        </div>
                    </article>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="team-empty-icon fas fa-newspaper"></i>
                    <h3>No articles yet</h3>
                    <p>Check back soon — we'll be publishing property tips and market updates regularly.</p>
                </div>
                {% endif %}
            </div>

            <!-- Sidebar -->
            <aside>
                <div class="sidebar-card blog-sidebar-card">
                    <h3>Recent Posts</h3>
                    {% for post in recent %}
                    <div class="recent-post-item">
                        <a href="{% url 'blog:detail' post.slug %}" class="recent-post-link">
                            {{ post.title|truncatewords:8 }}
                        </a>
                        <span class="recent-post-date">{{ post.published_at|date:"d M Y" }}</span>
                    </div>
                    {% endfor %}
                </div>

                {% if categories %}
                <div class="sidebar-card">
                    <h3>Categories</h3>
                    {% for cat in categories %}
                    <a href="{% url 'blog:list' %}?category={{ cat.slug }}" class="category-link">
                        {{ cat.name }}<i class="fas fa-chevron-right"></i>
                    </a>
                    {% endfor %}
                </div>
                {% endif %}
            </aside>
        </div>
    </div>
</section>

{% endblock %}