{% extends 'base.html' %}

{% block title %}Articles Tagged "{{ tag.name }}" | {{ settings.site_name }}{% endblock %}

{% block meta_description %}Browse research articles tagged with "{{ tag.name }}" at {{ settings.site_name }}.{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url_for('main.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('articles.articles_list') }}">Articles</a></li>
                <li class="breadcrumb-item active">{{ tag.name }}</li>
            </ol>
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <div class="d-flex align-items-center mb-4">
                    <span class="badge bg-primary fs-6 me-3">
                        <i class="fas fa-tag me-1"></i>{{ tag.name }}
                    </span>
                    <span class="text-muted">{{ articles.total }} article{{ 's' if articles.total != 1 else '' }}</span>
                </div>
                
                {% if tag.description %}
                <p class="text-muted mb-4">{{ tag.description }}</p>
                {% endif %}
                
                {% if articles.items %}
                <div class="row g-4">
                    {% for article in articles.items %}
                    <div class="col-12">
                        <div class="card article-card h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        {% if article.is_open_access %}
                                        <span class="badge bg-success mb-2">
                                            <i class="fas fa-unlock-alt me-1"></i>Open Access
                                        </span>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">
                                        {{ article.published_date.strftime('%B %d, %Y') if article.published_date else article.created_at.strftime('%B %d, %Y') }}
                                    </small>
                                </div>
                                
                                <h5 class="card-title">
                                    <a href="{{ url_for('articles.article_detail', slug=article.slug) }}" class="text-decoration-none">
                                        {{ article.title }}
                                    </a>
                                </h5>
                                
                                <p class="text-muted small mb-2">
                                    <i class="fas fa-user me-1"></i>{{ article.authors }}
                                </p>
                                
                                {% if article.journal %}
                                <p class="text-muted small mb-2">
                                    <i class="fas fa-book me-1"></i>
                                    <a href="{{ url_for('main.journal_detail', slug=article.journal.slug) }}" class="text-decoration-none">
                                        {{ article.journal.name }}
                                    </a>
                                </p>
                                {% endif %}
                                
                                {% if article.abstract %}
                                <p class="card-text text-muted">
                                    {{ article.abstract|truncate(250) }}
                                </p>
                                {% endif %}
                                
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    {% if article.doi %}
                                    <span class="badge bg-secondary">DOI: {{ article.doi }}</span>
                                    {% endif %}
                                    {% for t in article.tags if t.id != tag.id %}
                                    <a href="{{ url_for('articles.by_tag', slug=t.slug) }}" class="badge bg-light text-dark text-decoration-none">
                                        {{ t.name }}
                                    </a>
                                    {% endfor %}
                                    <span class="text-muted small ms-auto">
                                        <i class="fas fa-eye me-1"></i>{{ article.views }} views
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if articles.pages > 1 %}
                <nav aria-label="Page navigation" 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.by_tag', slug=tag.slug, page=articles.prev_num) }}">
                                <i class="fas fa-chevron-left"></i> Previous
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page in articles.iter_pages(left_edge=2, left_current=2, right_current=2, right_edge=2) %}
                            {% if page %}
                            <li class="page-item {% if page == articles.page %}active{% endif %}">
                                <a class="page-link" href="{{ url_for('articles.by_tag', slug=tag.slug, page=page) }}">{{ page }}</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.by_tag', slug=tag.slug, page=articles.next_num) }}">
                                Next <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-file-alt fa-4x text-muted mb-4"></i>
                    <h4>No Articles Found</h4>
                    <p class="text-muted">No articles have been tagged with "{{ tag.name }}" yet.</p>
                    <a href="{{ url_for('articles.articles_list') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left me-2"></i>Browse All Articles
                    </a>
                </div>
                {% endif %}
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Related Tags -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Related Topics</h5>
                    </div>
                    <div class="card-body">
                        {% if related_tags %}
                        <div class="d-flex flex-wrap gap-2">
                            {% for t in related_tags %}
                            <a href="{{ url_for('articles.by_tag', slug=t.slug) }}" 
                               class="badge bg-light text-dark text-decoration-none {% if t.id == tag.id %}bg-primary text-white{% endif %}">
                                {{ t.name }}
                            </a>
                            {% endfor %}
                        </div>
                        {% else %}
                        <p class="text-muted small mb-0">No related topics found.</p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Search -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-search me-2"></i>Search Articles</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('articles.search') }}" method="GET">
                            <div class="input-group">
                                <input type="text" name="q" class="form-control" placeholder="Search...">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Submit CTA -->
                <div class="card border-0 shadow-sm bg-primary text-white">
                    <div class="card-body text-center p-4">
                        <i class="fas fa-paper-plane fa-2x mb-3"></i>
                        <h5>Have Research to Share?</h5>
                        <p class="small opacity-75">Submit your manuscript for peer review today.</p>
                        <a href="{{ url_for('submission.submit') }}" class="btn btn-light">
                            Submit Research
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}