{% extends "main/master.html" %}

{% block content %}
<div class="search-header mb-5">
    <h1 class="mb-4">Search Results</h1>
    <form action="/search" method="get" class="search-form mb-5">
        <div class="input-group">
            <input type="text" name="q" class="form-control form-control-lg" 
                   value="{{ query }}" placeholder="Search posts..." required>
            <div class="input-group-append">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i> Search
                </button>
            </div>
        </div>
    </form>

    {% if query %}
    <p class="lead text-muted">
        Found {{ results|length }} result{% if results|length != 1 %}s{% endif %} for "{{ query }}"
    </p>
    {% endif %}
</div>

<div class="search-results">
    {% if results %}
        {% for post in results %}
        <article class="blog-post">
            <h2 class="h3"><a href="/post/{{ post.slug }}" class="text-dark">{{ post.title }}</a></h2>
            <div class="post-meta">
                <span><i class="far fa-calendar"></i> {{ post.created_at|truncate(10, true, '') }}</span>
                {% if post.author %}
                <span class="ml-3"><i class="far fa-user"></i> {{ post.author }}</span>
                {% endif %}
                {% if post.category %}
                <span class="ml-3"><i class="far fa-folder"></i> 
                <a href="/category/{{ post.category.slug }}" class="text-muted">{{ post.category.name }}</a>
                </span>
                {% endif %}
                {% if post.tags %}
                <span class="ml-3"><i class="fas fa-tags"></i> 
                    {% for tag in post.tags %}
                    <a href="/tag/{{ tag }}" class="text-muted">{{ tag }}</a>{% if not loop.last %}, {% endif %}
                    {% endfor %}
                </span>
                {% endif %}
            </div>
            <div class="post-excerpt">{{ post.description }}</div>
            <a href="/post/{{ post.slug }}" class="read-more">Read More <i class="fas fa-arrow-right ml-1"></i></a>
        </article>
        {% endfor %}
    {% elif query %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle mr-2"></i> No posts found matching your search.
            <hr>
            <p class="mb-0">Suggestions:</p>
            <ul class="mb-0 mt-2">
                <li>Make sure all words are spelled correctly</li>
                <li>Try different keywords</li>
                <li>Try more general keywords</li>
            </ul>
        </div>
    {% endif %}
</div>
{% endblock %}