{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h1 class="mb-4">Latest Articles</h1>
    </div>
</div>

{% if articles.items %}
    <div class="row" id="articles-container">
        {% for article in articles.items %}
        <div class="col-12 mb-4">
            <div class="card article-card">
                <div class="row g-0">
                    {% if article.image_url %}
                    <div class="col-md-4">
                        <img src="{{ article.image_url }}" class="img-fluid rounded-start h-100 object-fit-cover" alt="{{ article.title }}" style="min-height: 200px;">
                    </div>
                    {% endif %}
                    <div class="col{% if article.image_url %}-md-8{% else %}-12{% endif %}">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">
                                <a href="{{ url_for('main.article_detail', slug=article.slug) }}" class="text-decoration-none text-dark">
                                    {{ article.title }}
                                </a>
                            </h5>
                            {% if article.excerpt %}
                            <p class="card-text text-muted">{{ article.excerpt[:200] }}{% if article.excerpt|length > 200 %}...{% endif %}</p>
                            {% endif %}
                            <div class="mt-auto pt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <i class="far fa-calendar-alt me-1"></i>
                                        {{ article.date_published.strftime('%B %d, %Y') if article.date_published else 'Date not available' }}
                                        {% if article.author_name %}
                                        <span class="ms-2">
                                            <i class="far fa-user me-1"></i>{{ article.author_name }}
                                        </span>
                                        {% endif %}
                                    </small>
                                    <div class="d-flex gap-3">
                                        <span class="text-muted" title="Views">
                                            <i class="far fa-eye"></i> {{ article.view_count }}
                                        </span>
                                        <span class="text-muted" title="Likes">
                                            <i class="far fa-thumbs-up"></i> {{ article.likes_count if article.likes_count else 0 }}
                                        </span>
                                        <span class="text-muted" title="Comments">
                                            <i class="far fa-comment"></i> {{ article.comments_count if article.comments_count else 0 }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if articles.pages > 1 %}
    <nav aria-label="Article pagination" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if articles.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.index', page=articles.prev_num) }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&laquo;</span>
                </li>
            {% endif %}

            {% for page_num in articles.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                {% if page_num %}
                    {% if page_num == articles.page %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.index', page=page_num) }}">{{ page_num }}</a>
                        </li>
                    {% endif %}
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
            {% endfor %}

            {% if articles.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.index', page=articles.next_num) }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link" aria-hidden="true">&raquo;</span>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
{% else %}
    <div class="alert alert-info" role="alert">
        <i class="fas fa-info-circle me-2"></i>
        No articles published yet. Check back soon!
    </div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Infinite scroll could be implemented here
    // For now, pagination is handled server-side
});
</script>
{% endblock %}