{% extends "base.html" %}

{% block title %}Papers - ACS Paper Crawler{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1><i class="bi bi-file-text"></i> Crawled Papers</h1>
        <p class="text-muted">Browse all collected papers ({{ papers|length }} total)</p>
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">
                {% if papers %}
                <div class="list-group">
                    {% for paper in papers %}
                    <a href="/papers/{{ paper.paper_id }}"
                       class="list-group-item list-group-item-action">
                        <div class="row">
                            <div class="col-md-9">
                                <h6 class="mb-2">{{ paper.metadata.title }}</h6>
                                <p class="mb-1 text-muted">
                                    <small>
                                        <strong>Authors:</strong>
                                        {% if paper.metadata.authors %}
                                            {% for author in paper.metadata.authors[:3] %}
                                                {{ author.name }}{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                            {% if paper.metadata.authors|length > 3 %}
                                                , et al.
                                            {% endif %}
                                        {% else %}
                                            N/A
                                        {% endif %}
                                    </small>
                                </p>
                                {% if paper.metadata.abstract %}
                                <p class="mb-2 text-muted">
                                    <small>
                                        {{ paper.metadata.abstract[:200] }}
                                        {% if paper.metadata.abstract|length > 200 %}...{% endif %}
                                    </small>
                                </p>
                                {% endif %}
                                <p class="mb-0">
                                    <small class="text-muted">
                                        <strong>DOI:</strong> {{ paper.metadata.doi }}
                                        {% if paper.metadata.journal %}
                                        | <strong>Journal:</strong> {{ paper.metadata.journal }}
                                        {% endif %}
                                        {% if paper.metadata.publication_date %}
                                        | <strong>Published:</strong> {{ paper.metadata.publication_date }}
                                        {% endif %}
                                    </small>
                                </p>
                            </div>
                            <div class="col-md-3 text-end">
                                <small class="text-muted d-block mb-2">
                                    <i class="bi bi-clock"></i> Crawled: {{ paper.crawled_at.strftime('%Y-%m-%d') }}
                                </small>
                                {% if paper.metadata.keywords %}
                                <div class="mt-2">
                                    {% for keyword in paper.metadata.keywords[:3] %}
                                    <span class="badge bg-secondary me-1">{{ keyword }}</span>
                                    {% endfor %}
                                    {% if paper.metadata.keywords|length > 3 %}
                                    <span class="badge bg-secondary">+{{ paper.metadata.keywords|length - 3 }}</span>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-inbox" style="font-size: 4rem;"></i>
                    <p class="mt-3 h5">No papers yet</p>
                    <p>Start a crawl job to collect papers</p>
                    <a href="/" class="btn btn-primary mt-2">
                        <i class="bi bi-plus-circle"></i> Create Job
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}