{% extends 'base.html' %}

{% block title %}Search Results{% if query %}: {{ query }}{% endif %} | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url_for('main.home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('articles.articles_list') }}">Articles</a></li>
                <li class="breadcrumb-item active">Search</li>
            </ol>
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <!-- Search Form -->
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8">
                <form action="{{ url_for('articles.search') }}" method="GET">
                    <div class="input-group input-group-lg">
                        <input type="text" name="q" class="form-control" 
                               placeholder="Search articles by title, author, keyword..." 
                               value="{{ query or '' }}">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>Search
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        {% if query %}
        <div class="row">
            <!-- Results -->
            <div class="col-lg-8">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h4 class="mb-1">Search Results</h4>
                        <p class="text-muted mb-0">
                            {% if articles and articles.total > 0 %}
                            Found {{ articles.total }} result{{ 's' if articles.total != 1 else '' }} for "{{ query }}"
                            {% else %}
                            No results found for "{{ query }}"
                            {% endif %}
                        </p>
                    </div>
                </div>
                
                {% if articles and articles.items %}
                <div class="row g-4">
                    {% for article in articles.items %}
                    <div class="col-12">
                        <div class="card article-card h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        {% if article.is_open_access %}
                                        <span class="badge bg-success mb-2">
                                            <i class="fas fa-unlock-alt me-1"></i>Open Access
                                        </span>
                                        {% endif %}
                                        {% if article.journal %}
                                        <span class="badge bg-light text-dark mb-2">
                                            {{ article.journal.name }}
                                        </span>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">
                                        {{ article.published_date.strftime('%B %d, %Y') if article.published_date else article.created_at.strftime('%B %d, %Y') }}
                                    </small>
                                </div>
                                
                                <h5 class="card-title">
                                    <a href="{{ url_for('articles.article_detail', slug=article.slug) }}" class="text-decoration-none">
                                        {{ article.title }}
                                    </a>
                                </h5>
                                
                                <p class="text-muted small mb-2">
                                    <i class="fas fa-user me-1"></i>{{ article.authors }}
                                </p>
                                
                                {% if article.abstract %}
                                <p class="card-text text-muted">
                                    {{ article.abstract|truncate(250) }}
                                </p>
                                {% endif %}
                                
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    {% if article.doi %}
                                    <span class="badge bg-secondary">DOI: {{ article.doi }}</span>
                                    {% endif %}
                                    {% for tag in article.tags[:3] %}
                                    <a href="{{ url_for('articles.by_tag', slug=tag.slug) }}" class="badge bg-light text-dark text-decoration-none">
                                        {{ tag.name }}
                                    </a>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if articles.pages > 1 %}
                <nav aria-label="Page navigation" class="mt-5">
                    <ul class="pagination justify-content-center">
                        {% if articles.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('articles.search', q=query, page=articles.prev_num) }}">
                                <i class="fas fa-chevron-left"></i> Previous
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page in articles.iter_pages(left_edge=2, left_current=2, right_current=2, right_edge=2) %}
                            {% if page %}
                            <li class="page-item {% if page == articles.page %}active{% endif %}">
                                <a class="page-link" href="{{ url_for('articles.search', q=query, page=page) }}">{{ page }}</a>
                            </li>
                            {% else %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if articles.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('articles.search', q=query, page=articles.next_num) }}">
                                Next <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                
                {% else %}
                <!-- No Results -->
                <div class="text-center py-5">
                    <i class="fas fa-search fa-4x text-muted mb-4"></i>
                    <h4>No Results Found</h4>
                    <p class="text-muted mb-4">
                        We couldn't find any articles matching "{{ query }}".
                        Try adjusting your search terms.
                    </p>
                    
                    <h6 class="mb-3">Search Tips:</h6>
                    <ul class="list-unstyled text-muted text-start d-inline-block">
                        <li><i class="fas fa-check text-success me-2"></i>Check your spelling</li>
                        <li><i class="fas fa-check text-success me-2"></i>Try more general keywords</li>
                        <li><i class="fas fa-check text-success me-2"></i>Try different keywords</li>
                        <li><i class="fas fa-check text-success me-2"></i>Search by author name</li>
                    </ul>
                    
                    <div class="mt-4">
                        <a href="{{ url_for('articles.articles_list') }}" class="btn btn-primary">
                            <i class="fas fa-list me-2"></i>Browse All Articles
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Popular Tags -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Popular Topics</h5>
                    </div>
                    <div class="card-body">
                        {% if popular_tags %}
                        <div class="d-flex flex-wrap gap-2">
                            {% for tag in popular_tags %}
                            <a href="{{ url_for('articles.by_tag', slug=tag.slug) }}" class="badge bg-light text-dark text-decoration-none">
                                {{ tag.name }}
                            </a>
                            {% endfor %}
                        </div>
                        {% else %}
                        <p class="text-muted small mb-0">No topics available.</p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Browse Journals -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-book me-2"></i>Browse by Journal</h5>
                    </div>
                    <div class="card-body">
                        {% if journals %}
                        <ul class="list-unstyled mb-0">
                            {% for journal in journals[:5] %}
                            <li class="mb-2">
                                <a href="{{ url_for('main.journal_detail', slug=journal.slug) }}" class="text-decoration-none">
                                    {{ journal.name }}
                                </a>
                                <span class="badge bg-secondary float-end">{{ journal.articles.count() }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                        {% if journals|length > 5 %}
                        <a href="{{ url_for('main.journals') }}" class="btn btn-link p-0 mt-2">
                            View all journals <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                        {% endif %}
                        {% else %}
                        <p class="text-muted small mb-0">No journals available.</p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Submit CTA -->
                <div class="card border-0 shadow-sm bg-primary text-white">
                    <div class="card-body text-center p-4">
                        <i class="fas fa-paper-plane fa-2x mb-3"></i>
                        <h5>Share Your Research</h5>
                        <p class="small opacity-75">Submit your manuscript for peer review.</p>
                        <a href="{{ url_for('submission.submit') }}" class="btn btn-light">
                            Submit Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        {% else %}
        <!-- Initial State - No Query -->
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <i class="fas fa-search fa-4x text-muted mb-4"></i>
                <h3>Search Our Research Library</h3>
                <p class="text-muted mb-4">
                    Enter keywords, author names, or topics to find relevant research articles.
                </p>
                
                {% if popular_tags %}
                <div class="mt-4">
                    <h6 class="mb-3">Popular Topics:</h6>
                    <div class="d-flex flex-wrap gap-2 justify-content-center">
                        {% for tag in popular_tags %}
                        <a href="{{ url_for('articles.by_tag', slug=tag.slug) }}" class="badge bg-light text-dark text-decoration-none fs-6">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                <div class="mt-5">
                    <a href="{{ url_for('articles.articles_list') }}" class="btn btn-outline-primary">
                        <i class="fas fa-list me-2"></i>Browse All Articles
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}