{% extends "base.html" %}

{% block title %}Blog - Blake Ridgway{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h1><i class="fas fa-blog text-primary me-2"></i>Blog</h1>
        <p class="lead">Thoughts on cybersecurity, systems administration, technology, cycling, and the journey of continuous learning.</p>

        {% if posts %}
            {% for post in posts %}
            <article class="card mb-4 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="flex-grow-1">
                            <h2 class="card-title h4 mb-2">
                                <a href="{{ url_for('blog_post', post_id=post.id) }}" class="text-decoration-none">
                                    {{ post.title }}
                                </a>
                            </h2>
                            <div class="post-meta mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-calendar-alt me-1"></i>{{ post.date }}
                                    <i class="fas fa-user ms-3 me-1"></i>Blake Ridgway
                                </small>
                            </div>
                        </div>
                        <span class="badge bg-primary ms-3">{{ post.category }}</span>
                    </div>

                    <p class="card-text">{{ post.excerpt }}</p>

                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <a href="{{ url_for('blog_post', post_id=post.id) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-arrow-right me-1"></i>Read More
                        </a>
                        <div class="post-tags">
                            {% if post.tags %}
                                {% for tag in post.tags %}
                                <span class="badge bg-light text-dark me-1">#{{ tag }}</span>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </article>
            {% endfor %}

            <!-- Pagination implement it later)
            <nav aria-label="Blog pagination" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <span class="page-link">Previous</span>
                    </li>
                    <li class="page-item active">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">Next</span>
                    </li>
                </ul>
            </nav>
             -->
        {% else %}
            <div class="alert alert-info border-start border-primary border-4 shadow-sm">
                <div class="d-flex align-items-center">
                    <i class="fas fa-info-circle fa-2x text-primary me-3"></i>
                    <div>
                        <h4 class="alert-heading mb-2">No posts yet!</h4>
                        <p class="mb-0">I'm currently working on some exciting content about cybersecurity, systems administration, and my cycling adventures. Check back soon for new posts!</p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}