{% extends "layout.html" %}
{% import "_macros.html" as m %}

{% block content %}
<div class="topmargin">
    <div class="layer-nav-bar">
        <a href="/" class="tools tools-box">home</a>
        <a href="/layer" class="tools tools-box">layer home</a>
        <form id="layer-go-form" style="display:inline-flex; align-items:center; gap:4px;">
            <span style="font-size:0.85rem; opacity:0.7;">arxiv.org/</span>
            <input type="text" id="layer-path-input" class="config-input"
                   value="{{ arxiv_path }}" placeholder="list/quant-ph/new"
                   style="width:300px;">
            <button type="submit" class="tools tools-box">go</button>
        </form>
    </div>

    {% if layer_page is none %}
    {# ── Welcome page ─────────────────────────────────────────────── #}
    <div class="layer-welcome">
        <h4>layer-the-arxiv</h4>
        <p>Browse arxiv.org with your speed-the-arxiv tools: favourites, notes, and BibTeX.</p>

        {% if user_sections %}
        <h5>Your sections</h5>
        <div class="layer-links">
            {% for sec in user_sections %}
            <span>
                <a href="/layer/list/{{ sec }}/new">{{ sec }}</a>
                <span style="font-size:0.75rem;opacity:0.5;">
                    (<a href="/layer/list/{{ sec }}/recent">recent</a>)
                </span>
            </span>
            {% endfor %}
        </div>
        {% endif %}

        <h5>Browse by section</h5>
        <div class="layer-links">
            <div>
                <strong>Physics</strong><br>
                <a href="/layer/list/quant-ph/new">quant-ph</a> &middot;
                <a href="/layer/list/hep-th/new">hep-th</a> &middot;
                <a href="/layer/list/hep-ph/new">hep-ph</a> &middot;
                <a href="/layer/list/cond-mat/new">cond-mat</a> &middot;
                <a href="/layer/list/astro-ph/new">astro-ph</a> &middot;
                <a href="/layer/list/physics/new">physics</a>
            </div>
            <div>
                <strong>Computer Science</strong><br>
                <a href="/layer/list/cs.LG/new">cs.LG</a> &middot;
                <a href="/layer/list/cs.AI/new">cs.AI</a> &middot;
                <a href="/layer/list/cs.CV/new">cs.CV</a> &middot;
                <a href="/layer/list/cs.CL/new">cs.CL</a> &middot;
                <a href="/layer/list/cs.CR/new">cs.CR</a> &middot;
                <a href="/layer/list/cs.DS/new">cs.DS</a>
            </div>
            <div>
                <strong>Math &amp; Stats</strong><br>
                <a href="/layer/list/math/new">math</a> &middot;
                <a href="/layer/list/math.CO/new">math.CO</a> &middot;
                <a href="/layer/list/math.AG/new">math.AG</a> &middot;
                <a href="/layer/list/stat.ML/new">stat.ML</a>
            </div>
            <div>
                <strong>Other</strong><br>
                <a href="/layer/list/eess/new">eess</a> &middot;
                <a href="/layer/list/q-bio/new">q-bio</a> &middot;
                <a href="/layer/list/q-fin/new">q-fin</a> &middot;
                <a href="/layer/list/econ/new">econ</a>
            </div>
        </div>
    </div>

    {% elif layer_page.error is defined %}
    {# ── Error page ───────────────────────────────────────────────── #}
    <p class="alert-msg">{{ layer_page.error }}</p>

    {% elif layer_page.papers %}
    {# ── Papers rendered in our template ──────────────────────────── #}

    {% if layer_page.heading %}
    <h3 style="margin-bottom:4px;">{{ layer_page.heading }}</h3>
    {% endif %}

    {% if layer_page.nav_links %}
    <div style="margin-bottom:8px;">
        {% for link in layer_page.nav_links %}
        <a href="{{ link.url }}" class="tools tools-box" style="font-size:0.85rem;">{{ link.text }}</a>
        {% endfor %}
    </div>
    {% endif %}

    {% if layer_page.page_info %}
    <p style="font-size:0.85rem; opacity:0.6; margin-bottom:12px;">{{ layer_page.page_info }}</p>
    {% endif %}

    <div class="topmargin-papers">
    {% for paper in layer_page.papers %}
    <div class="paper-wrapper">
    <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) }}
        {{ m.abstract_notes(paper, 'layer-summary-' ~ loop.index, 'layer-notes-' ~ loop.index, abstract_open=layer_page.is_abstract) }}
    </div>
    <hr style="background-color:gray; margin-bottom: 30px;">
    </div>
    {% endfor %}
    </div>

    {% else %}
    {# ── No papers found on this page ─────────────────────────────── #}
    <p style="font-size:0.9rem; opacity:0.6;">No papers detected on this page.
        <a href="https://arxiv.org/{{ arxiv_path }}" target="_blank">Open on arxiv.org</a>
    </p>
    {% endif %}
</div>

<script>
$(function() {
    // Navigation bar
    $('#layer-go-form').on('submit', function(e) {
        e.preventDefault();
        var path = $('#layer-path-input').val().trim();
        if (path) window.location.href = '/layer/' + path;
    });
});
</script>
{% endblock %}