{% extends "base.html" %}
{% block content %}
<div class="container">
    <!-- Añadido más espacio vertical después del menú -->
    <div class="row align-items-center mt-5 pt-5 mb-5">
        <div class="col-md-4">
            <h1>Blog</h1>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-8">
                    <form action="{{ url_for('blog.list_articles') }}" method="get" id="filterForm">
                        <div class="input-group">
                            <select class="form-select" name="order" id="orderSelect" onchange="document.getElementById('filterForm').submit();">
                                <option value="newest" {% if request.args.get('order') != 'oldest' %}selected{% endif %}>Más recientes primero</option>
                                <option value="oldest" {% if request.args.get('order') == 'oldest' %}selected{% endif %}>Más antiguos primero</option>
                            </select>
                            <input type="hidden" name="page" value="{{ request.args.get('page', 1) }}">
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <form action="{{ url_for('blog.list_articles') }}" method="get">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Buscar" name="search" value="{{ request.args.get('search', '') }}">
                            <button class="btn btn-outline-secondary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    {% if articles %}
        <!-- Artículo destacado (el más reciente) -->
        {% set featured = articles[0] %}
        <div class="row mb-5 mt-4">
            <div class="col-12">
                <div class="featured-article card">
                    <div class="row g-0">
                        <div class="col-md-6">
                            {% if featured.featured_image %}
                            <img src="{{ featured.featured_image }}" alt="{{ featured.title }}" class="img-fluid rounded-start w-100 h-100 object-fit-cover" style="max-height: 400px;">
                            {% else %}
                            <img src="https://placehold.co/800x400?text=Blog+Destacado" alt="{{ featured.title }}" class="img-fluid rounded-start w-100 h-100 object-fit-cover" style="max-height: 400px;">
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <div class="card-body h-100 d-flex flex-column">
                                <div class="featured-badge mb-2">
                                    <span class="badge bg-primary">Destacado</span>
                                </div>
                                <h2 class="card-title">{{ featured.title }}</h2>
                                <p class="card-text text-muted">
                                    {% if featured.published_at %}
                                    <small>Publicado el {{ featured.published_at }}</small>
                                    {% else %}
                                    <small>Creado el {{ featured.created_at }}</small>
                                    {% endif %}
                                </p>
                                <div class="card-text mb-4">
                                    {% if featured.summary %}
                                        {{ featured.summary }}
                                    {% else %}
                                        {{ featured.content|truncate(250) }}
                                    {% endif %}
                                </div>
                                <a href="{{ url_for('blog.article_detail', slug=featured.slug) }}" class="btn btn-primary mt-auto">Leer más</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grid de artículos (resto de artículos) -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">
            {% for article in articles[1:] %}
                <div class="col">
                    <div class="card h-100">
                        {% if article.featured_image %}
                        <img src="{{ article.featured_image }}" alt="{{ article.title }}" class="card-img-top" style="height: 180px; object-fit: cover;">
                        {% else %}
                        <img src="https://placehold.co/400x200?text=Blog+Post" alt="{{ article.title }}" class="card-img-top" style="height: 180px; object-fit: cover;">
                        {% endif %}
                        <div class="card-body d-flex flex-column">
                            <h4 class="card-title">{{ article.title }}</h4>
                            <p class="card-text text-muted">
                                {% if article.published_at %}
                                <small>{{ article.published_at }}</small>
                                {% else %}
                                <small>{{ article.created_at }}</small>
                                {% endif %}
                            </p>
                            <p class="card-text">
                                {% if article.summary %}
                                    {{ article.summary|truncate(100) }}
                                {% else %}
                                    {{ article.content|truncate(100) }}
                                {% endif %}
                            </p>
                            <a href="{{ url_for('blog.article_detail', slug=article.slug) }}" class="btn btn-primary mt-auto">Leer más</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        
        <!-- Paginación (movida al final, fuera de la cuadrícula) -->
        {% if pagination.pages > 1 %}
        <div class="row mt-4 mb-4">
            <div class="col-12">
                <nav aria-label="Navegación de páginas">
                    <ul class="pagination justify-content-center">
                        <style>
                            /* Estilos personalizados para la paginación */
                            .pagination .page-link {
                                color: var(--primary-color);
                                border-color: var(--medium-gray);
                            }
                            .pagination .page-item.active .page-link {
                                background-color: var(--primary-color);
                                border-color: var(--primary-color);
                                color: white;
                            }
                            .pagination .page-link:hover {
                                background-color: #f0e0ff;
                                border-color: var(--primary-color);
                                color: var(--primary-color);
                            }
                            .pagination .page-item.disabled .page-link {
                                color: var(--dark-gray);
                            }
                        </style>
                        {% if pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('blog.list_articles', page=pagination.prev_num, order=request.args.get('order', 'newest'), search=request.args.get('search', '')) }}" aria-label="Anterior">
                                    <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 pagination.iter_pages() %}
                            {% if page_num %}
                                {% if page_num == pagination.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('blog.list_articles', page=page_num, order=request.args.get('order', 'newest'), search=request.args.get('search', '')) }}">{{ page_num }}</a>
                                    </li>
                                {% endif %}
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('blog.list_articles', page=pagination.next_num, order=request.args.get('order', 'newest'), search=request.args.get('search', '')) }}" aria-label="Siguiente">
                                    <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>
            </div>
        </div>
        {% endif %}
                
            {% else %}
                <div class="alert alert-info text-center">
                    <p>No hay artículos publicados en este momento.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}