{% extends "layout.html" %}
{% import "_macros.html" as m %}
{% set favourite_ids = papers | map(attribute='arxiv_id') | list %}
{% set sort_options = [
    {'sort': 'added-at', 'order': 'desc', 'label': 'Date added (newest)'},
    {'sort': 'added-at', 'order': 'asc', 'label': 'Date added (oldest)'},
    {'sort': 'date', 'order': 'desc', 'label': 'Date (newest)'},
    {'sort': 'date', 'order': 'asc', 'label': 'Date (oldest)'},
    {'sort': 'scirate', 'order': 'desc', 'label': 'Scirate (highest)'},
    {'sort': 'scirate', 'order': 'asc', 'label': 'Scirate (lowest)'},
    {'sort': 'title', 'order': 'asc', 'label': 'Title (A-Z)'},
    {'sort': 'title', 'order': 'desc', 'label': 'Title (Z-A)'}
] %}

{% block content %}
<div class="container" id="search-nav">
    <nav class="topmargin-nav align-middle" id="search-toolbar">
        <div class="container" style="display: flex; flex-wrap: wrap; align-items: center; gap: 6px;">
            <span>favourites &nbsp;-&nbsp; {{ papers|length }} paper{{ 's' if papers|length != 1 else '' }}</span>
            <button class="tools tools-box" id="scan-folder-btn">scan folder</button>
            <button class="tools tools-box" id="export-bibtex-btn">export bibtex</button>
            {{ m.sort_dropdown(sort_options) }}
            <input type="text" id="filter-input" class="filter-input" placeholder="filter papers..." autocomplete="off">
            <span id="filter-count" style="font-size: 0.8rem; opacity: 0.6;"></span>
        </div>
        {% if all_tags %}
        <div class="container" style="padding: 4px 12px 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center;">
            <span style="font-size:0.8rem;opacity:0.5;margin-right:2px;">filter by tag:</span>
            {% for tag in all_tags %}
            <span class="tag-filter-pill" data-tag="{{ tag }}">{{ tag }}</span>
            {% endfor %}
            <button class="tag-filter-clear" id="tag-filter-clear" style="display:none;">clear</button>
        </div>
        {% endif %}
    </nav>
</div>

<div id="scan-results" style="display:none;" class="container" style="margin-bottom:12px;">
    <div id="scan-results-inner" style="padding: 8px 0;"></div>
</div>

<div class="topmargin-papers fav-page">
    {% if not papers %}
    <p style="opacity:0.6;margin-top:2rem;">No favourites yet. Star papers from search results to add them here.</p>
    {% endif %}
    {% for paper in papers %}
    <div class="paper-wrapper" data-index="{{ loop.index0 }}" data-added-at="{{ paper.added_at or '' }}" data-date="{{ paper.date or '' }}" data-scirate="{{ paper.scirate if paper.scirate is not none else '' }}" data-title="{{ paper.title }}" data-tags="{{ paper.tags | join(',') | lower }}">
    <div class="paper">
        <h3 class="title"><a href="{{ paper.abs_url }}" target="_blank">{{ paper.title }}</a></h3>
        <p class="authors">{{ paper.authors }}</p>
        {{ m.paper_meta(paper, favourite_ids=favourite_ids, added_at=paper.added_at) }}
        <div class="paper-tags-row" data-arxiv-id="{{ paper.arxiv_id }}">
            <button class="tag-edit-btn tools" title="Edit tags" data-arxiv-id="{{ paper.arxiv_id }}">+tag</button>
            <span class="tag-edit-area" style="display:none;">
                <input type="text" class="tag-input config-input" placeholder="add tag, Enter to save" style="width:160px;font-size:0.8rem;display:inline-block;">
            </span>
            {% for tag in paper.tags %}
            <span class="tag-pill tag-pill-paper" data-tag="{{ tag }}">{{ tag }}</span>
            {% endfor %}
        </div>
        {{ m.abstract_notes(paper, 'fav-summary-' ~ loop.index, 'fav-notes-' ~ loop.index) }}
    </div>
    <hr style="background-color:gray; margin-bottom: 30px;">
    </div>
    {% endfor %}
</div>
{% endblock %}