Templates/publications.html

{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <div class="bg-white border-b border-gray-200 py-10">
        <div class="max-w-5xl mx-auto px-8">
            <h1 class="text-4xl font-black text-slate-900 mb-2">Publication Search</h1>
            <p class="text-slate-500">Crossref REST API Intelligence Engine</p>

            <form action="/publications" method="GET" class="mt-8 relative">
                <input type="text" name="q" value="{{ query }}"
                       placeholder="Search journals, DOIs, or researchers..."
                       class="w-full bg-white border-2 border-slate-200 rounded-2xl px-6 py-4 text-lg shadow-sm focus:border-indigo-500 transition-all outline-none pr-32">
                <button type="submit" class="absolute right-2 top-2 bottom-2 bg-indigo-600 text-white px-8 rounded-xl font-bold hover:bg-indigo-700 transition">
                    Search
                </button>
            </form>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-8 py-10">
        {% if results %}
        <div class="space-y-6">
            {% for item in results %}
            <div class="bg-white border border-slate-200 rounded-2xl p-6 hover:shadow-lg transition-all">
                <div class="flex justify-between items-start mb-4">
                    <div class="flex-1">
                        <span class="text-[10px] font-black uppercase text-indigo-500 tracking-widest bg-indigo-50 px-2 py-1 rounded">
                            {{ item.type | replace('-', ' ') }}
                        </span>
                        <h2 class="text-xl font-bold text-slate-900 mt-2">
                            <a href="{{ item.URL }}" target="_blank" class="hover:text-indigo-600 transition">
                                {{ item.title[0] if item.title else 'Untitled Publication' }}
                            </a>
                        </h2>
                    </div>
                </div>

                {% if item.abstract %}
                <div class="text-sm text-slate-600 mb-6 bg-slate-50 p-4 rounded-xl border border-slate-100 line-clamp-3">
                    {{ item.abstract | striptags }}
                </div>
                {% endif %}

                <div class="flex flex-wrap items-center justify-between pt-4 border-t border-slate-100 gap-4">
                    <div class="flex items-center space-x-4 text-xs font-medium text-slate-500">
                        <span class="flex items-center">
                            <i class="fas fa-user-edit mr-2 text-slate-300"></i>
                            {% if item.author and item.author|length > 0 %}
                                {{ item.author[0].family }}{% if item.author[0].given %}, {{ item.author[0].given[0] }}.{% endif %}
                                {% if item.author|length > 1 %} <span class="text-indigo-400 ml-1">et al.</span>{% endif %}
                            {% else %}
                                Institutional Author
                            {% endif %}
                        </span>

                        <span class="flex items-center">
                            <i class="fas fa-journal-whills mr-2 text-slate-300"></i>
                            {{ item['container-title'][0] if item['container-title'] else item.publisher }}
                        </span>
                    </div>

                    <div class="flex items-center space-x-3">
                        <span class="text-[10px] font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">{{ item.DOI }}</span>
                        <a href="{{ item.URL }}" target="_blank" class="text-indigo-600 hover:bg-indigo-50 p-2 rounded-lg transition">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% elif query %}
        <div class="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
            <h3 class="text-xl font-bold text-slate-900">No matching publications</h3>
            <p class="text-slate-500">Try searching for a specific DOI or a different keyword.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}