{% extends 'base.html' %}

{% block title %}Browse Articles | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <h1 class="section-title">Browse Articles</h1>
        <p class="text-muted">Explore our collection of published research</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <!-- Filters Sidebar -->
            <div class="col-lg-3 mb-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-filter me-2"></i>Filter Articles
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('articles.list_articles') }}" method="GET">
                            <!-- Search -->
                            <div class="mb-3">
                                <label class="form-label">Search</label>
                                <input type="text" name="q" class="form-control" value="{{ query }}" placeholder="Keywords, title, author...">
                            </div>
                            
                            <!-- Journal Filter -->
                            <div class="mb-3">
                                <label class="form-label">Journal</label>
                                <select name="journal" class="form-select">
                                    <option value="">All Journals</option>
                                    {% for journal in all_journals %}
                                    <option value="{{ journal.slug }}" {% if journal_filter == journal.slug %}selected{% endif %}>
                                        {{ journal.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <!-- Tag Filter -->
                            <div class="mb-3">
                                <label class="form-label">Tag</label>
                                <select name="tag" class="form-select">
                                    <option value="">All Tags</option>
                                    {% for tag in all_tags %}
                                    <option value="{{ tag.slug }}" {% if tag_filter == tag.slug %}selected{% endif %}>
                                        {{ tag.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <!-- Author Filter -->
                            <div class="mb-3">
                                <label class="form-label">Author</label>
                                <input type="text" name="author" class="form-control" value="{{ author_filter }}" placeholder="Author name">
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search me-2"></i>Apply Filters
                            </button>
                            
                            {% if query or tag_filter or journal_filter or author_filter %}
                            <a href="{{ url_for('articles.list_articles') }}" class="btn btn-outline-secondary w-100 mt-2">
                                <i class="fas fa-times me-2"></i>Clear Filters
                            </a>
                            {% endif %}
                        </form>
                    </div>
                </div>
                
                <!-- Popular Tags -->
                {% if all_tags %}
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fas fa-tags me-2"></i>Popular Tags
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-wrap gap-2">
                            {% for tag in all_tags[:15] %}
                            <a href="{{ url_for('articles.list_articles', tag=tag.slug) }}" class="badge bg-secondary text-decoration-none">
                                {{ tag.name }}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            
            <!-- Articles List -->
            <div class="col-lg-9">
                {% if query or tag_filter or journal_filter or author_filter %}
                <div class="alert alert-info mb-4">
                    <i class="fas fa-info-circle me-2"></i>
                    Showing results for: 
                    {% if query %}<strong>{{ query }}</strong>{% endif %}
                    {% if journal_filter %}in <strong>{{ journal_name or journal_filter }}</strong>{% endif %}
                    {% if tag_filter %}tagged <strong>{{ tag_filter }}</strong>{% endif %}
                    {% if author_filter %}by <strong>{{ author_filter }}</strong>{% endif %}
                    ({{ articles.total }} results)
                </div>
                {% endif %}
                
                {% if articles.items %}
                <div class="row g-4">
                    {% for article in articles.items %}
                    <div class="col-md-6">
                        <div class="article-card">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <span class="journal-badge">{{ article.journal.name }}</span>
                                {% if article.is_open_access %}
                                <span class="open-access-badge">
                                    <i class="fas fa-lock-open"></i> OA
                                </span>
                                {% endif %}
                            </div>
                            
                            <h3>
                                <a href="{{ url_for('articles.article_detail', slug=article.slug) }}">{{ article.title }}</a>
                            </h3>
                            
                            <p class="authors">
                                <i class="fas fa-users me-1"></i> {{ article.authors }}
                            </p>
                            
                            <p class="abstract">{{ article.abstract[:150] if article.abstract else '' }}{% if article.abstract and article.abstract|length > 150 %}...{% endif %}</p>
                            
                            {% if article.tags %}
                            <div class="tags">
                                {% for tag in article.tags[:3] %}
                                <a href="{{ url_for('articles.list_articles', tag=tag.slug) }}" class="tag">{{ tag.name }}</a>
                                {% endfor %}
                            </div>
                            {% endif %}
                            
                            <div class="meta">
                                <span><i class="fas fa-calendar me-1"></i> {{ article.published_date.strftime('%b %d, %Y') if article.published_date else '' }}</span>
                                <span><i class="fas fa-eye me-1"></i> {{ article.view_count }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if articles.pages > 1 %}
                <nav class="mt-5">
                    <ul class="pagination justify-content-center">
                        {% if articles.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('articles.list_articles', page=articles.prev_num, q=query, tag=tag_filter, journal=journal_filter, author=author_filter) }}">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page_num in articles.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                            {% if page_num %}
                            <li class="page-item {% if page_num == articles.page %}active{% endif %}">
                                <a class="page-link" href="{{ url_for('articles.list_articles', page=page_num, q=query, tag=tag_filter, journal=journal_filter, author=author_filter) }}">
                                    {{ page_num }}
                                </a>
                            </li>
                            {% 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('articles.list_articles', page=articles.next_num, q=query, tag=tag_filter, journal=journal_filter, author=author_filter) }}">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h4>No articles found</h4>
                    <p class="text-muted">Try adjusting your search criteria or browse all articles.</p>
                    <a href="{{ url_for('articles.list_articles') }}" class="btn btn-outline-primary">View All Articles</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}