templates/partials/paper_card.html

<article class="py-5 border-b border-gray-200">
    <!-- Title with paper icon -->
    <h3 class="text-lg font-semibold text-gray-900 leading-tight">
        <a href="https://huggingface.co/papers/{{ paper.id }}"
           target="_blank"
           class="hover:text-blue-600 inline-flex items-start gap-2 group">
            <svg class="w-5 h-5 mt-0.5 text-gray-400 group-hover:text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <span>{% if search %}{{ paper.title|highlight(search) }}{% else %}{{ paper.title }}{% endif %}</span>
        </a>
    </h3>

    <!-- Meta info - inline with category badge -->
    {% set category = paper.categories.split(' ')[0] if paper.categories else '' %}
    {% set cat_colors = {
        'cs.CV': 'bg-purple-100 text-purple-700',
        'cs.AI': 'bg-blue-100 text-blue-700',
        'cs.LG': 'bg-green-100 text-green-700',
        'cs.CL': 'bg-orange-100 text-orange-700',
        'cs.NE': 'bg-pink-100 text-pink-700'
    } %}
    {% set badge_class = cat_colors.get(category, 'bg-gray-100 text-gray-600') %}
    <div class="mt-2 flex items-center gap-3 text-sm text-gray-500">
        <span class="px-2 py-0.5 rounded-full text-xs font-medium {{ badge_class }}">{{ category }}</span>
        <span>{{ paper.update_date.strftime('%Y-%m-%d') if paper.update_date else 'Unknown' }}</span>
        {% if search_type == 'semantic' and paper.similarity_score is defined %}
        <span class="text-blue-500 inline-flex items-center gap-1">
            {{ "%.0f"|format(paper.similarity_score * 100) }}% match
            <span class="cursor-help" title="How similar this paper is to your search query">
                <svg class="w-3.5 h-3.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke-width="1.5"></circle>
                    <path stroke-linecap="round" stroke-width="1.5" d="M12 16v-1m0-3a2 2 0 10-2-2"></path>
                    <circle cx="12" cy="16" r="0.5" fill="currentColor"></circle>
                </svg>
            </span>
        </span>
        <span class="text-gray-400 inline-flex items-center gap-1">
            {{ paper.confidence_score|confidence }}% conf.
            <span class="cursor-help" title="Model confidence this paper introduces a new dataset">
                <svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke-width="1.5"></circle>
                    <path stroke-linecap="round" stroke-width="1.5" d="M12 16v-1m0-3a2 2 0 10-2-2"></path>
                    <circle cx="12" cy="16" r="0.5" fill="currentColor"></circle>
                </svg>
            </span>
        </span>
        {% else %}
        <span class="{% if paper.confidence_score < 0.8 %}text-gray-400{% else %}text-gray-500{% endif %} inline-flex items-center gap-1">
            {{ paper.confidence_score|confidence }}% conf.
            <span class="cursor-help" title="Model confidence this paper introduces a new dataset">
                <svg class="w-3.5 h-3.5 {% if paper.confidence_score < 0.8 %}text-gray-300{% else %}text-gray-400{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke-width="1.5"></circle>
                    <path stroke-linecap="round" stroke-width="1.5" d="M12 16v-1m0-3a2 2 0 10-2-2"></path>
                    <circle cx="12" cy="16" r="0.5" fill="currentColor"></circle>
                </svg>
            </span>
        </span>
        {% endif %}
    </div>

    <!-- Authors -->
    {% if paper.authors %}
    {% set author_list = paper.authors.split(', ') %}
    <p class="mt-1 text-sm text-gray-500">
        {{ author_list[:3]|join(', ') }}{% if author_list|length > 3 %} <span class="text-gray-400">et al.</span>{% endif %}
    </p>
    {% endif %}

    <!-- Abstract (expandable) -->
    {% if paper.abstract|length > 400 %}
    <div class="mt-2" x-data="{ expanded: false }">
        <p class="text-gray-600 text-sm leading-relaxed">
            <span x-show="!expanded">
                {% if search %}{{ paper.abstract[:400]|highlight(search) }}{% else %}{{ paper.abstract[:400] }}{% endif %}…
            </span>
            <span x-show="expanded" x-cloak>
                {% if search %}{{ paper.abstract|highlight(search) }}{% else %}{{ paper.abstract }}{% endif %}
            </span>
            <button @click="expanded = !expanded"
                    class="ml-1 text-gray-400 hover:text-gray-600 text-sm">
                <span x-show="!expanded">Show more</span>
                <span x-show="expanded" x-cloak>Show less</span>
            </button>
        </p>
    </div>
    {% else %}
    <p class="mt-2 text-gray-600 text-sm leading-relaxed">
        {% if search %}{{ paper.abstract|highlight(search) }}{% else %}{{ paper.abstract }}{% endif %}
    </p>
    {% endif %}
</article>