{% extends "templates/layout.html" %}

{% block content %}
<main class="main-container">
    <a href="/articles" class="back-link-top">&larr; back</a>
    <header>
        <h1>My articles</h1>
        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching articles</p>

        <form action="/articles" method="GET" class="search-form">
            <input type="text" name="search" value="{{ search_term }}" placeholder="Search articles..." aria-label="Search articles">
            <button type="submit" class="pill-button">Search</button>
        </form>
    </header>

    <div class="search-results-container">
        {% if results is empty %}
            <div class="no-results">
                {% if search_term is empty %}
                    <p>Please enter a search term to search the articles. Or <a href="/articles">go back to all articles</a>.</p>
                {% else %}
                    <p>Found no articles matching <strong>"{{ search_term }}"</strong>. <br>
                        <a href="/articles">Go back to all articles</a>.</p>
                {% endif %}
            </div>
        {% else %}
            <ul class="search-results-list">
                {% for article in results %}
                    <li class="search-result-item">
                        <span class="article-date">{{ article.formattedDate }}</span>
                        <a href="/articles/{{ article.slug }}">{{ article.title }}</a>
                        {% if article.summary is not empty %}
                            <br>
                            <span class="search-result-summary">-- {{ article.summary }}</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</main>
{% endblock %}