{% extends 'base.html' %}

{% block title %}{{ article.meta_title or article.title }} | {{ settings.site_name }}{% endblock %}

{% block meta_description %}{{ article.meta_description or article.abstract[:160] }}{% endblock %}
{% block meta_keywords %}{{ article.meta_keywords or '' }}{% endblock %}

{% block extra_css %}
<!-- Google Scholar Meta Tags -->
<meta name="citation_title" content="{{ article.title }}">
{% for author in article.authors.split(',') %}
<meta name="citation_author" content="{{ author.strip() }}">
{% endfor %}
<meta name="citation_publication_date" content="{{ article.published_date.strftime('%Y/%m/%d') if article.published_date else '' }}">
<meta name="citation_journal_title" content="{{ article.journal.name }}">
{% if article.doi %}
<meta name="citation_doi" content="{{ article.doi }}">
{% endif %}
{% if article.pdf_file %}
<meta name="citation_pdf_url" content="{{ url_for('articles.download_article', slug=article.slug, _external=True) }}">
{% endif %}

<!-- Dublin Core Meta Tags -->
<meta name="DC.title" content="{{ article.title }}">
<meta name="DC.creator" content="{{ article.authors }}">
<meta name="DC.date" content="{{ article.published_date.strftime('%Y-%m-%d') if article.published_date else '' }}">
<meta name="DC.publisher" content="{{ settings.site_name }}">
<meta name="DC.type" content="Text.Article">
{% if article.doi %}
<meta name="DC.identifier" content="doi:{{ article.doi }}">
{% endif %}

<!-- Highwire Press Tags (for Google Scholar) -->
<meta name="citation_abstract" content="{{ article.abstract }}">
{% if article.issn %}
<meta name="citation_issn" content="{{ article.journal.issn }}">
{% endif %}
{% endblock %}

{% block content %}
{% if is_preview and not article.is_published %}
<div class="alert alert-warning alert-dismissible text-center mb-0 rounded-0" role="alert">
    <i class="fas fa-eye me-2"></i><strong>Draft Preview</strong> — This article is not yet published. Only admins can see this page.
    <a href="{{ url_for('admin.edit_article', id=article.id) }}" class="btn btn-sm btn-warning ms-3"><i class="fas fa-edit me-1"></i>Edit Article</a>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endif %}
<!-- Article Header -->
<header class="article-header">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('main.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('articles.list_articles') }}">Articles</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('main.journal_detail', slug=article.journal.slug) }}">{{ article.journal.name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Article</li>
            </ol>
        </nav>
        
        <div class="mb-3">
            <a href="{{ url_for('main.journal_detail', slug=article.journal.slug) }}" class="journal-name">
                {{ article.journal.name }}
            </a>
            {% if article.is_open_access %}
            <span class="open-access-badge ms-2">
                <i class="fas fa-lock-open"></i> Open Access
            </span>
            {% endif %}
        </div>
        
        <h1>{{ article.title }}</h1>
        
        <div class="article-meta mt-4">
            <p class="author-list mb-2">
                <i class="fas fa-users me-2"></i>{{ article.authors }}
            </p>
            <div class="d-flex flex-wrap gap-3 text-muted">
                {% if article.published_date %}
                <span><i class="fas fa-calendar me-1"></i> Published: {{ article.published_date.strftime('%B %d, %Y') }}</span>
                {% endif %}
                {% if article.doi %}
                <span><i class="fas fa-link me-1"></i> DOI: <a href="https://doi.org/{{ article.doi }}" class="doi-link" target="_blank">{{ article.doi }}</a></span>
                {% endif %}
                <span><i class="fas fa-eye me-1"></i> {{ article.view_count }} views</span>
                <span><i class="fas fa-download me-1"></i> {{ article.download_count }} downloads</span>
            </div>
        </div>
        
        {% if article.tags %}
        <div class="mt-3">
            {% for tag in article.tags %}
            <a href="{{ url_for('articles.articles_by_tag', slug=tag.slug) }}" class="badge bg-secondary text-decoration-none me-1">{{ tag.name }}</a>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</header>

<!-- Article Body -->
<section class="article-body">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- Abstract -->
                {% if article.abstract %}
                <div class="article-abstract">
                    <h2>Abstract</h2>
                    <p>{{ article.abstract }}</p>
                </div>
                {% endif %}
                
                <!-- Article Content -->
                {% if article.content %}
                <div class="article-content">
                    {{ article.content|safe }}
                </div>
                {% endif %}
                
                <!-- Download Section -->
                {% if article.pdf_file %}
                <div class="card mt-4">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1"><i class="fas fa-file-pdf text-danger me-2"></i>Full Text Available</h5>
                            <p class="text-muted mb-0">Download the complete article in PDF format</p>
                        </div>
                        <a href="{{ url_for('articles.download_article', slug=article.slug) }}" class="btn btn-primary">
                            <i class="fas fa-download me-2"></i>Download PDF
                        </a>
                    </div>
                </div>
                {% endif %}
                
                <!-- Citation Section -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-quote-left me-2"></i>Cite This Article</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-3" id="citationText">{{ article.get_citation() }}</p>
                        <button class="btn btn-sm btn-outline-secondary" data-copy="{{ article.get_citation() }}">
                            <i class="fas fa-copy me-1"></i>Copy Citation
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="article-sidebar">
                    <!-- Article Info Card -->
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-info-circle me-2"></i>Article Information
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between">
                                <span class="text-muted">Journal</span>
                                <a href="{{ url_for('main.journal_detail', slug=article.journal.slug) }}">{{ article.journal.name }}</a>
                            </li>
                            {% if article.published_date %}
                            <li class="list-group-item d-flex justify-content-between">
                                <span class="text-muted">Published</span>
                                <span>{{ article.published_date.strftime('%b %d, %Y') }}</span>
                            </li>
                            {% endif %}
                            {% if article.doi %}
                            <li class="list-group-item">
                                <span class="text-muted d-block">DOI</span>
                                <a href="https://doi.org/{{ article.doi }}" class="doi-link small" target="_blank">{{ article.doi }}</a>
                            </li>
                            {% endif %}
                            <li class="list-group-item d-flex justify-content-between">
                                <span class="text-muted">Access</span>
                                <span class="badge {{ 'bg-success' if article.is_open_access else 'bg-secondary' }}">
                                    {{ 'Open Access' if article.is_open_access else 'Subscription' }}
                                </span>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Share Card -->
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-share-alt me-2"></i>Share This Article
                        </div>
                        <div class="card-body">
                            <div class="d-flex gap-2 flex-wrap">
                                <a href="https://twitter.com/intent/tweet?url={{ request.url }}&text={{ article.title|urlencode }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.url }}&title={{ article.title|urlencode }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                    <i class="fab fa-facebook"></i>
                                </a>
                                <a href="mailto:?subject={{ article.title|urlencode }}&body={{ request.url }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-envelope"></i>
                                </a>
                                <button class="btn btn-sm btn-outline-secondary print-article">
                                    <i class="fas fa-print"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Related Articles -->
                    {% if related_articles %}
                    <div class="card">
                        <div class="card-header">
                            <i class="fas fa-newspaper me-2"></i>Related Articles
                        </div>
                        <ul class="list-group list-group-flush">
                            {% for related in related_articles %}
                            <li class="list-group-item">
                                <a href="{{ url_for('articles.article_detail', slug=related.slug) }}" class="text-decoration-none">
                                    <small class="d-block text-truncate-2">{{ related.title }}</small>
                                </a>
                                <small class="text-muted">{{ related.authors.split(',')[0] }} et al.</small>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}