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

{% block content %}
<main class="main-container">
    <a href="/" class="back-link-top">&larr; back</a>
    <header>
        <h1>My articles</h1>
        <p class="intro-text">A collection of my writings and thoughts.</p>

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

    <section id="all" class="articles-section">
        <h2>All Articles</h2>
        {% for group in articles_by_year %}
        <details class="year-accordion" {% if loop.first %}open{% endif %}>
            <summary class="year-toggle">{{ group.key }}</summary>
            <ul class="article-list">
                {% for article in group.value %}
                <li class="article-list-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>
        </details>
        {% endfor %}
    </section>
</main>
{% endblock %}