{% extends 'base.html' %}

{% block title %}{{ journal.name }} | {{ settings.site_name }}{% endblock %}

{% block meta_description %}{{ journal.description|truncate(160) if journal.description else 'Explore peer-reviewed articles in ' + journal.name }}{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<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('main.journals') }}">Journals</a></li>
                <li class="breadcrumb-item active">{{ journal.name }}</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Journal Header -->
<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="d-flex align-items-start mb-4">
                    {% if journal.cover_image %}
                    <img src="{{ url_for('main.uploaded_file', filename=journal.cover_image) }}" 
                         alt="{{ journal.name }}" class="rounded me-4" style="width: 150px; height: 200px; object-fit: cover;">
                    {% else %}
                    <div class="rounded me-4 bg-gradient d-flex align-items-center justify-content-center" 
                         style="width: 150px; height: 200px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
                        <i class="fas fa-book-open fa-3x text-white"></i>
                    </div>
                    {% endif %}
                    <div>
                        <h1 class="h2 mb-2">{{ journal.name }}</h1>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            {% if journal.issn %}
                            <span class="badge bg-secondary">ISSN: {{ journal.issn }}</span>
                            {% endif %}
                            {% if journal.is_open_access %}
                            <span class="badge bg-success">
                                <i class="fas fa-unlock-alt me-1"></i>Open Access
                            </span>
                            {% endif %}
                            {% if journal.impact_factor %}
                            <span class="badge bg-info">
                                <i class="fas fa-chart-line me-1"></i>Impact Factor: {{ journal.impact_factor }}
                            </span>
                            {% endif %}
                        </div>
                        <p class="text-muted">
                            {{ journal.description if journal.description else 'Peer-reviewed research journal.' }}
                        </p>
                    </div>
                </div>
                
                <!-- Journal Stats -->
                <div class="row g-3 mb-4">
                    <div class="col-4 col-md-3">
                        <div class="card text-center border-0 bg-light">
                            <div class="card-body py-3">
                                <div class="h4 mb-1 text-primary">{{ articles.total if articles else 0 }}</div>
                                <small class="text-muted">Articles</small>
                            </div>
                        </div>
                    </div>
                    {% if journal.volumes %}
                    <div class="col-4 col-md-3">
                        <div class="card text-center border-0 bg-light">
                            <div class="card-body py-3">
                                <div class="h4 mb-1 text-primary">{{ journal.volumes }}</div>
                                <small class="text-muted">Volumes</small>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <div class="col-4 col-md-3">
                        <div class="card text-center border-0 bg-light">
                            <div class="card-body py-3">
                                <div class="h4 mb-1 text-primary">{{ journal.founded_year or journal.created_at.year }}</div>
                                <small class="text-muted">Since</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- Submit CTA Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body text-center p-4">
                        <i class="fas fa-paper-plane fa-2x text-primary mb-3"></i>
                        <h5>Submit to {{ journal.name }}</h5>
                        <p class="text-muted small">
                            Have research to share? Submit your manuscript for peer review.
                        </p>
                        <a href="{{ url_for('submission.submit') }}" class="btn btn-primary w-100">
                            Submit Research
                        </a>
                    </div>
                </div>
                
                <!-- Journal Info Card -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent">
                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Journal Information</h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            {% if journal.issn %}
                            <li class="mb-2">
                                <small class="text-muted">ISSN</small>
                                <div>{{ journal.issn }}</div>
                            </li>
                            {% endif %}
                            {% if journal.frequency %}
                            <li class="mb-2">
                                <small class="text-muted">Publication Frequency</small>
                                <div>{{ journal.frequency }}</div>
                            </li>
                            {% endif %}
                            {% if journal.editor %}
                            <li class="mb-2">
                                <small class="text-muted">Editor-in-Chief</small>
                                <div>{{ journal.editor }}</div>
                            </li>
                            {% endif %}
                            <li class="mb-2">
                                <small class="text-muted">Access Type</small>
                                <div>
                                    {% if journal.is_open_access %}
                                    <i class="fas fa-unlock-alt text-success me-1"></i>Open Access
                                    {% else %}
                                    <i class="fas fa-lock text-secondary me-1"></i>Subscription
                                    {% endif %}
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Articles Section -->
<section class="section-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="section-title mb-0">Published Articles</h2>
            {% if articles and articles.total > 0 %}
            <span class="badge bg-primary">{{ articles.total }} Articles</span>
            {% endif %}
        </div>
        
        {% if articles and 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.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 tag in article.tags[:3] %}
                            <a href="{{ url_for('articles.by_tag', slug=tag.slug) }}" class="badge bg-light text-dark text-decoration-none">
                                {{ tag.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('main.journal_detail', slug=journal.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('main.journal_detail', slug=journal.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('main.journal_detail', slug=journal.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 Yet</h4>
            <p class="text-muted">This journal doesn't have any published articles yet.</p>
            <a href="{{ url_for('submission.submit') }}" class="btn btn-primary">
                <i class="fas fa-paper-plane me-2"></i>Be the First to Submit
            </a>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}